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:
Does each palette reflect the personality of the respective business offering?
Is the contrast ratio accessible?
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.
