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.
This showcases the foundational UI approaches and designs that shaped the 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.
This showcases the foundational UI approaches and designs that shaped the 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.
This showcases the foundational UI approaches and designs that shaped the 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 to redesign Globe's website with a focus on a consistent thematic customer experience across their wide range of offerings – Postpaid, Prepaid, Broadband, Rewards, Platinum, International, Corporate, Enterprise, SME, etc.
2
Context
The brief was to redesign Globe's website with a focus on a consistent thematic customer experience across their wide range of offerings – Postpaid, Prepaid, Broadband, Rewards, Platinum, International, Corporate, Enterprise, SME, etc.
2
Context
The brief was to redesign Globe's website with a focus on a consistent thematic customer experience across their wide range of offerings – Postpaid, Prepaid, Broadband, Rewards, Platinum, International, Corporate, Enterprise, SME, etc.
Background
Globe Telecom recently engaged a brand marketing company to develop new brand guidelines, including a really useful photography guideline that reflected their offerings.
This systematic approach in using colour tones to define a landscape of emotions and imagery to match their offerings was very well thought out. How would this guideline translate to digital interfaces?
Background
Globe Telecom recently engaged a brand marketing company to develop new brand guidelines, including a really useful photography guideline that reflected their offerings.
This systematic approach in using colour tones to define a landscape of emotions and imagery to match their offerings was very well thought out. How would this guideline translate to digital interfaces?
Background
Globe Telecom recently engaged a brand marketing company to develop new brand guidelines, including a really useful photography guideline that reflected their offerings.
This systematic approach in using colour tones to define a landscape of emotions and imagery to match their offerings was very well thought out. How would this guideline translate to digital interfaces?
Brand photography guidelines organised around bright and muted, dark and light.
Initial thoughts
The design team was consisted UX and UI designers. My involvement was leading the UI design and art direction, and managing a team of six UI designers.
Initial thoughts were:
Initial thoughts
The design team was consisted UX and UI designers. My involvement was leading the UI design and art direction, and managing a team of six UI designers.
Initial thoughts were:
Initial thoughts
The design team was consisted UX and UI designers. My involvement was leading the UI design and art direction, and managing a team of six UI designers.
Initial thoughts were:
Components and templates will likely serve a wide range of content and user personas. A challenge would be unifying the experience that reinforces the brand identity while allowing each offering to retain its distinct characteristics.
Examples of possible content include:
Marketplace and brochureware for products, plans, entertainment (tv, music and games)
Purchasing flows
Account management
Entertainment and lifestyle articles
Corporate information
How should interface 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 collaborators.
How would the interface designs cater and adapt to IA explorations easily?
3
Definitions
Before diving into design execution, the teams focused on understanding Globe’s diverse offerings, user needs, and business objectives while defining the principles that would guide the design process.
3
Definitions
Before diving into design execution, the teams focused on understanding Globe’s diverse offerings, user needs, and business objectives while defining the principles that would guide the design process.
3
Definitions
Before diving into design execution, the teams focused on understanding Globe’s diverse offerings, user needs, and business objectives while defining the principles that would guide the design process.
Setting design principles
To guide the design process for the whole team, a set of core principles was established. These principles ensured adaptability and emotional resonance in the final user experience.
Setting design principles
To guide the design process for the whole team, a set of core principles was established. These principles ensured adaptability and emotional resonance in the final user experience.
Setting design principles
To guide the design process for the whole team, a set of core principles was established. These principles ensured adaptability and emotional resonance in the final user experience.
Clear
The design had to offer intuitive pathways to help users find what they needed quickly while allowing room for discovery and engagement.
Clear
The design had to offer intuitive pathways to help users find what they needed quickly while allowing room for discovery and engagement.
Consistent
Consistency was critical in providing a unified experience while allowing for contextual differences.
Consistent
Consistency was critical in providing a unified experience while allowing for contextual differences.
Emotional
Experiences should connect emotionally with users, ensuring interactions felt relevant, engaging, and intuitive regardless of the journeys they were in.
Emotional
Experiences should connect emotionally with users, ensuring interactions felt relevant, engaging, and intuitive regardless of the journeys they were in.
Flexible
The design should be flexible and modular, accommodating Globe’s wide range of services while ensuring a cohesive experience.
Flexible
The design should be flexible and modular, accommodating Globe’s wide range of services while ensuring a cohesive experience.
Defining typography hierarchy and rhythm
Globe’s choice of the brand font ‘FS Elliot’ is a perfect workhorse typeface, with multiple variant weights, all highly legible in various scenarios.
Defining typography hierarchy and rhythm
Globe’s choice of the brand font ‘FS Elliot’ is a perfect workhorse typeface, with multiple variant weights, all highly legible in various scenarios.
Defining typography hierarchy and rhythm
Globe’s choice of the brand font ‘FS Elliot’ is a perfect workhorse typeface, with multiple variant weights, all highly legible in various scenarios.
Font sizes
6 font sizes were generated for the whole portal based on a modular scale of 1.3.
A
⤑
130%
A
Line heights
2 kinds of line heights were used to improve vertical rhythm, creating 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
Establishing a cohesive colour system was essential to ensure visual consistency across Globe’s diverse offerings while reflecting the brand’s dynamic personality.
This process involved translating photography guidelines into a flexible digital colour system that complements multiple personalities while ensuring visual usability and accessibility across.
Defining colours
Establishing a cohesive colour system was essential to ensure visual consistency across Globe’s diverse offerings while reflecting the brand’s dynamic personality.
This process involved translating photography guidelines into a flexible digital colour system that complements multiple personalities while ensuring visual usability and accessibility across.
Defining colours
Establishing a cohesive colour system was essential to ensure visual consistency across Globe’s diverse offerings while reflecting the brand’s dynamic personality.
This process involved translating photography guidelines into a flexible digital colour system that complements multiple personalities while ensuring visual usability and accessibility across.
Colour system
Colour palettes were defined by a mix of extracting prominent colours from the brand's photography guidelines, as well as generating supporting colours using colour harmonies that best represent their personality.
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 acceptable when used on text?
Do colours cause eye fatigue during scanning?
4
Component designs
Variants of highly-configurable and adaptive components for a range of ecommerce, lifestyle and marketing content. A component's ability to adapt and be reused was essential to support the range of user and business needs.
4
Component designs
Variants of highly-configurable and adaptive components for a range of ecommerce, lifestyle and marketing content. A component's ability to adapt and be reused was essential to support the range of user and business needs.
4
Component designs
Variants of highly-configurable and adaptive components for a range of ecommerce, lifestyle and marketing content. A component's ability to adapt and be reused was essential to support the range of user and business needs.
Banners
Variants of banners designed for a range of scenarios, from brochureware pages to embedded self-serve entry points.
Banners
Variants of banners designed for a range of scenarios, from brochureware pages to embedded self-serve entry points.
Banners
Variants of banners designed for a range of scenarios, from brochureware pages to embedded self-serve entry points.
Mastheads
Ads
Form builders
Form builders
Form builders
Self-contained module variants
Cards
Variants of cards designed for a range of scenarios, from product pages to cross-selling in lifestyle articles.
Cards
Variants of cards designed for a range of scenarios, from product pages to cross-selling in lifestyle articles.
Cards
Variants of cards designed for a range of scenarios, from product pages to cross-selling in lifestyle articles.
Plans
Devices
Lifestyle
Galleries
Variants of gallery modules designed for ecommerce and lifestyle content.
Galleries
Variants of gallery modules designed for ecommerce and lifestyle content.
Galleries
Variants of 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 exploration of services and plans.
Services & plans templates
A blend of marketing and commerce components that encourages emotional engagement and exploration of services and plans.
Services & plans templates
A blend of marketing and commerce components that encourages emotional engagement and 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 priority in streamlining consumption of content.
Lifestyle & entertainment templates
Designed to balance content that is heavy in text, image, videos. Content hierarchy was a priority in streamlining consumption of content.
Lifestyle & entertainment templates
Designed to balance content that is heavy in text, image, videos. Content hierarchy was a priority in streamlining consumption of 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.
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.
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.
