Online portal redesign for a telco

Online portal redesign for a telco

Online portal redesign for a telco

Online portal redesign for a telco

Foundational UI framework for a telecommunications portal.

Globe Telecom, a leading telecommunications provider in the Philippines, serves over 60 million customers with offerings spanning mobile and broadband plans, lifestyle gadgets, and TV entertainment.

Our task was to redesign their entire website, catering to a diverse range of services and audience groups, and deliver a experience and design system that can be used and maintained by their own team.

This is a showcase of the foundational UI approaches and designs delivered for their new online experience.

Year :

2017

|

Industry :

Telecommunications

|

Client :

Globe Telecom

Roles :

Art direction • Foundation design • Interaction design • System design • UI

Online portal redesign for a telco

Foundational UI framework for a telecommunications portal.

Globe Telecom, a leading telecommunications provider in the Philippines, serves over 60 million customers with offerings spanning mobile and broadband plans, lifestyle gadgets, and TV entertainment.

Our task was to redesign their entire website, catering to a diverse range of services and audience groups, and deliver a experience and design system that can be used and maintained by their own team.

This is a showcase of the foundational UI approaches and designs delivered for their new online experience.

Year :

2017

|

Industry :

Telecommunications

|

Client :

Globe Telecom

Roles :

Art direction • Foundation design • Interaction design • System design • UI

Online portal redesign for a telco

Foundational UI framework for a telecommunications portal.

Globe Telecom, a leading telecommunications provider in the Philippines, serves over 60 million customers with offerings spanning mobile and broadband plans, lifestyle gadgets, and TV entertainment.

Our task was to redesign their entire website, catering to a diverse range of services and audience groups, and deliver a experience and design system that can be used and maintained by their own team.

This is a showcase of the foundational UI approaches and designs delivered for their new online experience.

Year :

2017

|

Industry :

Telecommunications

|

Client :

Globe Telecom

Roles :

Art direction • Foundation design • Interaction design • System design • UI

1

Preview

1

Preview

1

Preview

2

Context

The brief was redesigning Globe Telecom's website with a focus on user experience and a consistent thematic experience across their wide range of offerings – Postpaid, Prepaid, Broadband, Rewards, Platinum, International, Corporate, Enterprise, SME, etc. Our team consisted of UI and UX designers, engineers, content strategist and a project manager. My role was leading the UI design and art direction, and managing a team of six UI designers.

2

Context

The brief was redesigning Globe Telecom's website with a focus on user experience and a consistent thematic experience across their wide range of offerings – Postpaid, Prepaid, Broadband, Rewards, Platinum, International, Corporate, Enterprise, SME, etc. Our team consisted of UI and UX designers, engineers, content strategist and a project manager. My role was leading the UI design and art direction, and managing a team of six UI designers.

2

Context

The brief was redesigning Globe Telecom's website with a focus on user experience and a consistent thematic experience across their wide range of offerings – Postpaid, Prepaid, Broadband, Rewards, Platinum, International, Corporate, Enterprise, SME, etc. Our team consisted of UI and UX designers, engineers, content strategist and a project manager. My role was leading the UI design and art direction, and managing a team of six UI designers.

Background

Globe Telecom recently engaged a brand marketing company to develop new brand guidelines.

One of the photography guidelines was a systematic approach in using colour tones to define a landscape of emotions and imagery to match their offerings, which created an interesting challenge of working out how this translates to digital interfaces.

This also provided us a base to start our discoveries.

Background

Globe Telecom recently engaged a brand marketing company to develop new brand guidelines.

One of the photography guidelines was a systematic approach in using colour tones to define a landscape of emotions and imagery to match their offerings, which created an interesting challenge of working out how this translates to digital interfaces.

This also provided us a base to start our discoveries.

Background

Globe Telecom recently engaged a brand marketing company to develop new brand guidelines.

One of the photography guidelines was a systematic approach in using colour tones to define a landscape of emotions and imagery to match their offerings, which created an interesting challenge of working out how this translates to digital interfaces.

This also provided us a base to start our discoveries.

Brand photography guidelines organised around bright and muted, dark and light.

Initial thoughts

Initial thoughts

Initial thoughts

Components and templates need to serve a wide range of content and user personas. A challenge would be unifying their brand experience while maintaining each offering's distinct characteristics.

Examples of content included:

  • Marketplace and brochureware for products, plans, entertainment (tv, music and games)

  • Purchasing flows

  • Account management

  • Entertainment and lifestyle articles

  • Corporate investment information

How should interfaces respond to appeal to multiple user personas while maintaining thematic consistency?

How would brand tones translate to accessible interfaces?

Framework must be easily adoptable by client-side designers and engineers.

Interface must be easily adaptable to IA explorations for parallel tracks for work.

3

Definitions

Before diving into design execution, we focused on understanding Globe’s diverse offerings, user needs, personas, and business objectives before defining the principles that would guide the design process for the team.

3

Definitions

Before diving into design execution, we focused on understanding Globe’s diverse offerings, user needs, personas, and business objectives before defining the principles that would guide the design process for the team.

3

Definitions

Before diving into design execution, we focused on understanding Globe’s diverse offerings, user needs, personas, and business objectives before defining the principles that would guide the design process for the team.

Setting design principles

A set of guiding principles were established to support adaptability in design while creating emotional resonance.

Setting design principles

A set of guiding principles were established to support adaptability in design while creating emotional resonance.

Setting design principles

A set of guiding principles were established to support adaptability in design while creating emotional resonance.

Clear

Clarity in design is important when designing for diverse user types. Information should be easy to understand, components should be easy to reuse.

Product details, costs, and key benefits must be clearly presented for new and existing customers, enabling them to make informed decisions.

Clear

Clarity in design is important when designing for diverse user types. Information should be easy to understand, components should be easy to reuse.

Product details, costs, and key benefits must be clearly presented for new and existing customers, enabling them to make informed decisions.

Consistent

While different services may have unique personalities, it is important to maintain consistency and cohesion in brand, experiences and terminology.

Consistent

While different services may have unique personalities, it is important to maintain consistency and cohesion in brand, experiences and terminology.

Emotional

Content should engage with customer, new and existing, in a way that resonates with their needs and expectations.

Emotional

Content should engage with customer, new and existing, in a way that resonates with their needs and expectations.

Flexible

The design must accommodate a diverse range of offerings while remaining adaptable to different user journeys. The experience should support seamless transitions between content types, from rich storytelling to structured journeys, or passive to active tones.

Flexible

The design must accommodate a diverse range of offerings while remaining adaptable to different user journeys. The experience should support seamless transitions between content types, from rich storytelling to structured journeys, or passive to active tones.

Defining typography hierarchy and rhythm

Globe’s choice of the brand font ‘FS Elliot’ was a perfect workhorse typeface, great for both display and reading. With multiple variant weights to work with, it gave us flexibility in testing legibility in scenarios.

Defining typography hierarchy and rhythm

Globe’s choice of the brand font ‘FS Elliot’ was a perfect workhorse typeface, great for both display and reading. With multiple variant weights to work with, it gave us flexibility in testing legibility in scenarios.

Defining typography hierarchy and rhythm

Globe’s choice of the brand font ‘FS Elliot’ was a perfect workhorse typeface, great for both display and reading. With multiple variant weights to work with, it gave us flexibility in testing legibility in scenarios.

Font sizes

6 font sizes were generated based on a modular scale of 1.3. This gave us flexibility in tweaking font sizes across the board easily.

A

A

A

A

A

A

130%

A

A

A

A

A

A

130%

Line heights

2 levels of line heights were used to create a system that is optically pleasing for headers and highly legible for body copy.

110%

Get the Postpaid Plan that lets you be everything you want.

161.8%

Don’t expect Rosie the Robot to come to life next year, though we are inching ever closer.

Defining colours

Ensuring visual consistency across Globe’s diverse offerings was essential in reflecting the brand’s dynamic personality.

Establishing a cohesive colour palette involved translating photography guidelines into a colour system that's flexible and complements multiple content types.

Defining colours

Ensuring visual consistency across Globe’s diverse offerings was essential in reflecting the brand’s dynamic personality.

Establishing a cohesive colour palette involved translating photography guidelines into a colour system that's flexible and complements multiple content types.

Defining colours

Ensuring visual consistency across Globe’s diverse offerings was essential in reflecting the brand’s dynamic personality.

Establishing a cohesive colour palette involved translating photography guidelines into a colour system that's flexible and complements multiple content types.

Colour system

Colour palettes were defined by extracting prominent colours from the brand's photography guidelines, followed by generating supporting colours using colour harmonies that best represent each offering (e.g. postpaid, prepaid).

Colour tests

Palettes were then tested using example components. Their permutations were tested on three criteria:

  1. Does each palette reflect the personality of the respective business offering?

  2. Is the contrast ratio accessible?

  3. Do colours cause eye fatigue during scanning?

4

Component designs

A component's ability to adapt and be reused was essential to support the range of user and business needs, or when the tone is passive or active. Variants of highly-configurable and adaptive components were designed for a range of content types, ecommerce, lifestyle, marketing and legal content.

4

Component designs

A component's ability to adapt and be reused was essential to support the range of user and business needs, or when the tone is passive or active. Variants of highly-configurable and adaptive components were designed for a range of content types, ecommerce, lifestyle, marketing and legal content.

4

Component designs

A component's ability to adapt and be reused was essential to support the range of user and business needs, or when the tone is passive or active. Variants of highly-configurable and adaptive components were designed for a range of content types, ecommerce, lifestyle, marketing and legal content.

Banners

Variants for a range of scenarios from brochureware to self-serve.

Banners

Variants for a range of scenarios from brochureware to self-serve.

Banners

Variants for a range of scenarios from brochureware to self-serve.

Mastheads

Ads

Form builders

Modular panels with in-line flows for quicker registration and product selection.

Form builders

Modular panels with in-line flows for quicker registration and product selection.

Form builders

Modular panels with in-line flows for quicker registration and product selection.

Variants

Cards

Variants of cards designed for products and lifestyle.

Cards

Variants of cards designed for products and lifestyle.

Cards

Variants of cards designed for products and lifestyle.

Plans

Devices

Lifestyle

Galleries

Gallery modules designed for ecommerce and lifestyle content.

Galleries

Gallery modules designed for ecommerce and lifestyle content.

Galleries

Gallery modules designed for ecommerce and lifestyle content.

Articles

Showcase

5

Template designs

Thematic templates designed using a mix of components and modules, aiming to retain the unique identities of each service while feeling part of the same ecosystem.

5

Template designs

Thematic templates designed using a mix of components and modules, aiming to retain the unique identities of each service while feeling part of the same ecosystem.

5

Template designs

Thematic templates designed using a mix of components and modules, aiming to retain the unique identities of each service while feeling part of the same ecosystem.

Services & plans templates

A blend of marketing and commerce components that encourages emotional engagement and progressive exploration of services and plans.

Services & plans templates

A blend of marketing and commerce components that encourages emotional engagement and progressive exploration of services and plans.

Services & plans templates

A blend of marketing and commerce components that encourages emotional engagement and progressive exploration of services and plans.

Product templates

Designed with a balance for delight and function. Blending the elements together involved lots of testing and iterations. Important information like title, image, and price are placed in prominent locations for easy scanning.

Product templates

Designed with a balance for delight and function. Blending the elements together involved lots of testing and iterations. Important information like title, image, and price are placed in prominent locations for easy scanning.

Product templates

Designed with a balance for delight and function. Blending the elements together involved lots of testing and iterations. Important information like title, image, and price are placed in prominent locations for easy scanning.

Lifestyle & entertainment templates

Designed to balance content that is heavy in text, image, videos. Content hierarchy was a way of streamlining consumption of highly-engaging content.

Lifestyle & entertainment templates

Designed to balance content that is heavy in text, image, videos. Content hierarchy was a way of streamlining consumption of highly-engaging content.

Lifestyle & entertainment templates

Designed to balance content that is heavy in text, image, videos. Content hierarchy was a way of streamlining consumption of highly-engaging content.

Dashboard & forum templates

A neutral and minimal theme is used to present a combination of admin components and modules, used in scenarios like self-serve management and support forums. Keeping it neutral and minimal also acts as a thematic visual reminder of support interfaces for users.

Dashboard & forum templates

A neutral and minimal theme is used to present a combination of admin components and modules, used in scenarios like self-serve management and support forums. Keeping it neutral and minimal also acts as a thematic visual reminder of support interfaces for users.

Dashboard & forum templates

A neutral and minimal theme is used to present a combination of admin components and modules, used in scenarios like self-serve management and support forums. Keeping it neutral and minimal also acts as a thematic visual reminder of support interfaces for users.