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
Untrustworthy Visual
Inconsistent branding and interface reduce users’ trust.
Unclear flow and design makes the whole process harder.
Before
After
Redesigned.
From the ground up
Brand, to establish trust
Flow, to align with user thinking
Interface, to guide every key action with clarity
A brand new MetaMask
Redesigned for trust.
Inspired by guardianship.
Taking cues from stone lions guarding ancient homes, the brand fox returns with a new face to protect digital assets.
From faceted to fearless
The iconic fox, now sharper, calmer, and built for trust.
A new look that speaks security—at a glance.
Mint Green
Mint Green
balances safety and brand unity
Previous Brand Color
Previous UI Color
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.
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
Not just new.
Thoughtfully new.
A Fresh Start, Minted
Set expectations early
Compared to befor, the new brand identity and the cohesive UI palette not only bring a sense of freshness, but also enhance the user’s perception of security.
Prompting offline storage preparation at the start creates clarity and control—reducing the risk of users dropping off when faced with unexpected steps later.
Launching APP
Sign UP
Before Creating a wallet
Understand before create
Password and seed phrase are often confused, so I uses clear image and language to clarify their each functions and importance.
Step 1 - Set Password
Step 2 - Introduce Seed Phrase
App icon and text indicate that the password only unlocks the app—not the wallet.
Use familiar objects and visual metaphors to introduce unfamiliar idea of seed phrase.
Important content forces users to read, button becomes clickable after 3 seconds.
Enough with the clutter
Straight to the point
Before
After
Deliver clearer and more accurate instructions to users
From Read carefully.
To Got it.
Using visuals rather than long text to help better understanding
Before
After
Stay Elegant.
Even in warnings.
Allow users leave during the process, but give them reasons to stay.
Before
Screenshot warnings appeared as pop-ups, with overlapping layers that made the interface messy and distracting.
A cleaner, less disruptive way to handle screenshot alerts
The warning is now shown inline, reducing the sense of disruption, and keeping the interface clean and focused.
Taking a screenshot during wallet creation means their seed phrase already be exposed to the network. By offering a chance to regenerate, we help ensure their assets remain fully protected.
After
Offer regeneration
The original MetaMask flow offered no exit, users who hesitated simply closed the app. The new design displays a prompt when users attempt to leave, clearly explaining the transaction permissions and encouraging them to continue setting up their wallet.
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.
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.
After
After
From visual noise
to visual coherence
with clearer understanding
Before
Illustrations were visually inconsistent—mixing emojis, flat icons, and abstract 3D graphics. Complex colors and shapes distracted from the content itself.
Soft 3D illustrations in a light skeuomorphic style create a cohesive look. A mostly monochrome palette keeps visuals subtle, while familiar objects help explain abstract Web3 concepts more intuitively.
After
