A complete redesign — brand, user flow and interface.
New Metamask.
Thoughtfully new.
A complete redesign — brand, user flow and interface.
New Metamask.
Thoughtfully new.
Web3 starts with MetaMask.
For many, it ends there.
Creating wallet with offline storage costs too much, leading to user drop-off.
Costly Preparation
Poor Usability
Unclear flow and design makes the whole process harder.
Untrustworthy Visual
Inconsistent branding and interface reduce users’ trust.
Redefinition.
For a new experience.
Reimagining what a first-time Web3 experience should be.
Safe
Clear
Effortless
A total new brand.
Inspired by guardianship.
Inspired by ancient guardians, the new brand face draws strength from symbols of protection—calm, alert, and unmistakably watchful.
From blank stare to sharp gaze
The fox’s face is no longer neutral. Its sharpened eyes and calmer geometry reflect focus, confidence, and intent—ready to guard.
Mint Green.
Balances safety and unity.
As a midpoint between MetaMask’s original brand orange and its blue UI, Mint Green preserves identity while adding a sense of safety, freshness, and unity.
Previous Brand Color
Previous UI Color
New UI and Brand Color
Redesigned the flow.
Built for every step.
User State
Design Target
Establish trust by clarifying brand value and applying a cohesive, security-driven visual style.
Set expectations by explaining the purpose, required materials, time needed, and outcomes—guiding users forward.
New users lack trust in the product and understanding of the wallet creation process.
Before wallet creation
Keep users focused on the core flow by minimizing distractions and unnecessary navigation.
Guide users clearly through each step with context-aware instructions.
Make complex terms easy to understand through clean copy and intuitive design.
Encourage completion by highlighting benefits when users drop off midway.
Users struggle with unfamiliar terminology and a complex setup process, which can easily lead to drop-off.
During wallet creation
Provide clear feedback by confirming wallet creation and assuring users that their wallet is protected.
Give users an extra reminder to back up their materials, explain why offline storage matters, and suggest simple ways to do it.
After completing a complex task and successfully creating the wallet, users often feel a sense of accomplishment—and may become less cautious about offline storage and backup.
After wallet creation
From Developer-centered
To User-centered
Set expectations upfront
Compared to before, the new brand identity and cohesive UI palette not only bring clarity and freshness, but also strengthen users’ sense of security.
Inform users to prepare offline storage materials upfront instead of during the process to reduce interruptions and prevent drop-off.
State that the setup includes three steps to set clear expectations.
Emphasize that completing the setup ensures lifelong asset protection, motivating users to finish the process.
Launch APP
Sign UP
Before Creating a wallet
Clarity first.
Explain before setup.
Password and seed phrase are often confused, so I used clear, accessible language and intuitive visuals to clarify their distinct functions and importance.
Turned vague visuals into meaningful metaphors, using familiar everyday objects to help users grasp the true role of the seed phrase.
Step 1 - Set Password
Step 2 - Introduce Seed Phrase
App icon and text indicate that the password only unlocks the app—not the wallet.
Clearly explain the seed phrase and its importance. The button is disabled for 3 seconds to enforce reading.
From visual noise to understanding
Before
After
Using clear and concrete visuals instead of vague, lengthy text to give users clear guidance.
Before
After
Enough with the nonsense.
Straight to the point.
Before
After
Provied clearer and more accurate instructions to users
Progress bar design.
Balancing clarity and pressure.
Creating a wallet includes three main steps. To help users understand seed phrases, two info screens are added, making it five screens transitions total. I kept the structure as three steps with embedded guidance to keep the flow clear and with less pressure.
Shows three core steps, while the flow includes five screens. This mismatch may weaken user trust and patience.
Five steps reflect all transitions, but two are just info screens. The flow feels longer and adds mental load.
Keeps three main steps, with two guidance screens nested under step two. Balanced, clear, and less pressure.
Focused on main steps
Three steps with embedded guidance
Based on screen transitions
Stay Elegant.
Even in warnings.
Allow users leave
but give them reasons to stay
The original flow had no exit. Users who hesitated often quit directly.
The new design adds a prompt on exit, explaining key benefits and encouraging completion.
Before
Pop-up alerts disrupted the flow, stacked layers cluttered the interface and distracted users.
A cleaner, less disruptive way to handle screenshot alerts
Inline alerts keep it clean.
Embedding the message in context to reduce disruption and keep the flow focused.
If a screenshot is taken, the seed phrase may be exposed. Offering regeneration helps keep assets protected.
After
Offer Regeneration
Simple to use.
Simple to finish.
Before
Before
Cluttered interface with small tapping areas.
Larger tapping areas and easier to use. Confirm button only appears when the order is correct.
After
After
A more streamlined completion screen gives users a clearer sense of security.
The tip to “keep multiple copies in safe places” is now shown after confirming the seed phrase, making it better aligned with user context and timing.
Decorative illustrations with mixed styles
cause distraction
Inconsistent styles—mixing emojis, flat icons, and abstract 3D, making illustrations feel random, which distracted from what mattered.
Before
Let illustrations teach.
Not just decorate.
Meaningful Illustrations with consistent style
help better understanding
Familiar objects ground abstract concepts, making Web3 easier to understand. Soft 3D illustrations in a unified style bring clarity.
After