Brand Identity Enhancement
Brand Identity Enhancement
Brand Identity Enhancement
Designing a Unified and Distinct Home Experience Across Regions
Designing a Unified and Distinct Home Experience Across Regions
Project 1: Redesigning the Home Shortcut Icons
Project 1: Redesigning the Home Shortcut Icons
Project 1: Redesigning the Home Shortcut Icons
The home screen’s 8-icon grid features frequently used services. However, the original icons lacked consistency and brand presence—resulting in low recognizability and a weak impression of professionalism. This affected the overall visual quality and trustworthiness expected from a financial product.
The home screen’s 8-icon grid features frequently used services. However, the original icons lacked consistency and brand presence—resulting in low recognizability and a weak impression of professionalism. This affected the overall visual quality and trustworthiness expected from a financial product.
Problem
Problem
Unclear brand tone and personality
Unclear brand tone and personality
Existing icons fail to convey the brand’s core values of professionalism and stability
Existing icons fail to convey the brand’s core values of professionalism and stability
Low icon recognizability makes it hard for users to associate visuals with functions, reducing usability and click motivation
Low icon recognizability makes it hard for users to associate visuals with functions, reducing usability and click motivation
Constraints & Challenges
Constraints & Challenges
Brand Consistency
Brand Consistency
Icon style must reflect a professional and reassuring brand tone, avoiding overly playful visuals
Icon style must reflect a professional and reassuring brand tone, avoiding overly playful visuals
Technical Limitations
Technical Limitations
Icons must remain legible and recognizable across small sizes and various devices
Icons must remain legible and recognizable across small sizes and various devices
Colors were overly vibrant
Colors were overly vibrant
Inconsistent icon styles
Design Goals
Design Goals
User Need
User Need
How might we
How might we
create intuitive links between icons and functions to streamline interaction and reduce cognitive load?
create intuitive links between icons and functions to streamline interaction and reduce cognitive load?
Business Goal
Business Goal
How might we
How might we
design a visual icon language that balances aesthetics and usability while staying true to the brand?
design a visual icon language that balances aesthetics and usability while staying true to the brand?
Design Process
Design Process
Design Process
Desktop research
Desktop research
To ensure meaningful insights, I selected competitors from two perspectives:
To ensure meaningful insights, I selected competitors from two perspectives:
Feature Alignment
Feature Alignment
Apps with similar core functions (e.g., payment, transfer, balance check) — to explore icon representation strategies
Apps with similar core functions (e.g., payment, transfer, balance check) — to explore icon representation strategies
Brand Positioning
Brand Positioning
Brands with a visual tone of professional finance or effortless living — to guide stylistic direction
Brands with a visual tone of professional finance or effortless living — to guide stylistic direction
Style Exploration
Style Exploration
To enhance recognition and visual consistency on the home screen, I explored multiple icon styles, considering brand tone and clarity:
To enhance recognition and visual consistency on the home screen, I explored multiple icon styles, considering brand tone and clarity:
Monoline with Partial Fill
Monoline with Partial Fill
Improves basic recognizability and structural clarity for a more unified look
Improves basic recognizability and structural clarity for a more unified look
Two-tone Outline (Primary Color Emphasis)
Two-tone Outline (Primary Color Emphasis)
Highlights key functions using brand colors to create visual hierarchy
Highlights key functions using brand colors to create visual hierarchy
Two-tone Solid
Two-tone Solid
Adds visual weight and warmth, reinforcing a more friendly and branded atmosphere
Adds visual weight and warmth, reinforcing a more friendly and branded atmosphere
Monotone Gradient Fill
Monotone Gradient Fill
Combines a modern and professional feel, offering clear yet calm brand expression
Combines a modern and professional feel, offering clear yet calm brand expression
Design Challenge
Design Challenge
I faced differing visual preferences from cross-functional leads during the proposal phase.
I faced differing visual preferences from cross-functional leads during the proposal phase.
→ I guided the discussion using readability and visual weight as objective criteria for evaluation.
→ I guided the discussion using readability and visual weight as objective criteria for evaluation.
Final Design
Final Design
Final Design
Final Design
Final Design
Before
Design Impact
Strengthened brand identity
Improved visual consistency & icon recognizability
Easier maintenance & Future scalability
After
After
After
Design Impact
Design Impact
Design Impact
Strengthened brand identity
Improved visual consistency & icon recognizability
Easier maintenance & Future scalability
Project 2: Multi-Region Home Screen Visual Optimization
Project 2: Multi-Region Home Screen Visual Optimization
Project 2: Multi-Region Home Screen Visual Optimization
The app’s regional indicators (Taiwan, Japan, Hong Kong) relied on subtle backgrounds that users often missed. A clearer, unified visual system was needed to improve recognition and align with the new design style.
The app’s regional indicators (Taiwan, Japan, Hong Kong) relied on subtle backgrounds that users often missed. A clearer, unified visual system was needed to improve recognition and align with the new design style.
Problem
Problem
Low visual distinction and inconsistent styles
Low visual distinction and inconsistent styles
Users couldn’t easily identify their current region, leading to confusion or misoperation
Users couldn’t easily identify their current region, leading to confusion or misoperation
Background-based cues needed to balance clarity and visual harmony
Background-based cues needed to balance clarity and visual harmony
Constraints & Challenges
Constraints & Challenges
Design Consistency
Design Consistency
Maintain a unified and clean look on the home page without introducing disruptive visuals
Maintain a unified and clean look on the home page without introducing disruptive visuals
Visual Interference Control
Visual Interference Control
Ensure regional identifiers do not distract from key features or content readability
Ensure regional identifiers do not distract from key features or content readability
Users couldn’t tell whether they were using the local or overseas version
Users couldn’t tell whether they were using the local or overseas version
Hongkong
Japan
Design Goals
Design Goals
User Need
User Need
How might we
How might we
improve user awareness of their current region?
improve user awareness of their current region?
Business Goal
Business Goal
How might we
How might we
create a region-specific home page experience that encourages users to use the app abroad?
create a region-specific home page experience that encourages users to use the app abroad?
Design Thinking
Design Thinking
Design Thinking
Shortcut Region Switching
Shortcut Region Switching
Clicking on the badge leads directly to region settings for a smoother switch
Clicking on the badge leads directly to region settings for a smoother switch
Strengthen Regional Identification
Strengthen Regional Identification
Regional Backgrounds
Regional Backgrounds
Unique cultural patterns for each region to add context and visual distinction.
Unique cultural patterns for each region to add context and visual distinction.
Region Badge
Region Badge
Display current region next to the logo for better visibility
Display current region next to the logo for better visibility
最終設計
最終設計
最終設計
Before
Design Impact
Clearer regional awareness
Improved visual consistency
Seamless region switching
After
After
After
After
Design Impact
Design Impact
Design Impact
Clearer regional awareness
Improved visual consistency
Seamless region switching
Learnings & Reflections
Learnings & Reflections
Learnings & Reflections
From Visual Preference to User-Centered Design Decisions
From Visual Preference to User-Centered Design Decisions
Guided the team from subjective visual debates to objective, user- and brand-driven design decisions.
Guided the team from subjective visual debates to objective, user- and brand-driven design decisions.
Balancing Consistency and Differentiation
Balancing Consistency and Differentiation
In multi-region UI design, I learned to introduce strategic variations that enhance regional recognition while preserving overall brand consistency and visual harmony.
In multi-region UI design, I learned to introduce strategic variations that enhance regional recognition while preserving overall brand consistency and visual harmony.
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!