MetaMask — The Change It Really Needs (Case Study)

Introduction

MetaMask is a crypto wallet service which is available as a web browser extension and as a smartphone application. It’s a service that you can use to move and store your cryptocurrency assets around at any given time. One of the most important reasons that MetaMask is so popular among the new and existing crypto users is it’s interoperability with almost all Ethereum based platforms & services.

The key features of MetaMask include storing & managing account keys, sending & receiving Ethereum based cryptocurrencies as well as tokens and securely connecting to decentralized applications through a compatible web browser or mobile app.

Objective

With MetaMask becoming more and more popular in today’s time where cryptocurrency, NFTs, Web 3.0 is on a boom, a lot of users are going to need a decentralized wallet which caters to their needs and gives out the best user experience while maintaining a pleasing user interface.

Now the current MetaMask wallet lacks a certain standard of an appealing user interface and the user experience. Other cryptocurrency wallet services like Phantom wallet, Trust wallet do a tremendous job at giving out the best user experience to it’s users in today’s time where design as a field has grown so much and has shown it’s importance in building a brand’s identity & creating a user base.

As a product & user experience designer, whenever I use MetaMask for my cryptocurrency needs, I feel like it can do a lot better with a redefined design and a better user experience just like it’s competitors.

Problems In The Current MetaMask Wallet Design

1. Old School Interface

MetaMask was launched back in 2016 and since then there have not been any major design changes in their interface as well in their smartphone application. The current user interface of the app uses small scaled elements which was ideal for smartphones with smaller screens back in 2016–2017. Nowadays smartphones are becoming larger and larger in their screen size and the design standards of an app should keep up with the modern changes.

2. Flawed User Experience

Now this issue can be seen clearly when a new user is trying to sign up for the application/wallet or when he/she is trying to import his/her old wallet into the smartphone application. The amount of steps the user has to go through to finally land onto the homepage is insane compared to their competitors like Phantom Wallet or Trust Wallet.

This is a result of not caring about the design changes over the years especially when Web3.0, NFTs and Cryptocurrency is a major trend in these times as more and more people are getting into these technologies and the need for a decentralized wallet with phenomenal user experience will increase more and more.

3. Missing Dark Mode

Come on, it’s 2022 and there is no dark mode for the infamous decentralized MetaMask wallet app? Nowadays the need for dark mode is increasing more and more because everyone knows that too much of white screen causes pain (at least for me) and subtle dark mode can do wonders.

Even Facebook released a dark mode for their application and if you are following the design changes of this particular app then you would know that Facebook took “a lot of time” to release a dark mode for their app.

Every smartphone is coming up with a system wide dark mode which in turn converts the app into it’s dark mode (if available) automatically and a decentralized wallet used by millions of people not having a dark mode is a bummer.

Cognitive Walkthrough

A cognitive walkthrough describes the process of putting yourself or someone else in the shoes of a first-time user of the interface that you have designed.

My Takeaway : The wallet’s homepage feels cluttered and the whole UI feels old. I can’t see the daily profit/loss percentage for the total amount as well as for the individual ETH based tokens. The screens for Buying, Selling, Swapping & Receiving are much better designed with modern elements but it is inconsistent with the overall design of the wallet ; It feels like they worked on those four screens but forgot about changing the overall design.

The design of the wallet is not as fluid as it’s competitors like the Phantom Wallet which is a treat to the users. Even though MetaMask is a decentralized wallet which is used by millions of people but as a new user it feels like they don’t give as much attention to design as they should.

The Stumbling Blocks

1. Lacks required and important information at places.
2. Segregation of the content is not well done.
3. Too many steps to Create/Import a wallet.
4. Obviously, no dark mode.
5. Repeating homepage information in the side menus which is not required.

Competitor Analysis

Coinbase Wallet, Phantom Wallet and Trust Wallet can be considered as some of the most extensive competitors of MetaMask wallet and when a user has a choice to choose a wallet based on the user interface and user experience, MetaMask will lose it’s users to some of the far-reaching, rightly designed wallets which does the design part right.

Coinbase & Phantom Wallets are two of the major decentralized wallets which provides a great user experience and the interface is a treat to it’s users. They do give the “new web3.0 decentralized wallet” feel to it’s users and most importantly, their segregation of the information is done in the best way possible.

But, apart from all these problems and competition from the major competitors, MetaMask has managed to remain the best ETH based decentralized wallet in the whole world and if it can pull this off with a mediocre design, then it can surely gain extra popularity with a new updated interface and a better user experience.

Measures Taken To Solve Those Problems

1. Cleaning out the clutter

The first step to making MetaMask a refined decentralized wallet for all the new and old users is cleaning out all the clutter on the homepage because home is where a clean design is. Fixing up all the hierarchy issues inside the app and making the whole interface just clean is one of the top priorities that I had in my mind while working on this specific case study.

I tried my level best to change the whole interface to something that really appeals to the users while keeping the current design system elements in mind because a major design overhaul that includes changing the brand’s identity might have a negative impact on it’s user base.

2. Improving create/import wallet journey

The sign up/sign in process of the wallet is unnecessarily long and improving the journey so that a new user can quickly be done with that whole process is important. So I decided to reduce the number of steps taken to reach the home screen by combining elements of two or more screens in one or swipe-able formats while maintaining proper spacing between elements so that the user has to click lesser and lesser to complete the whole process.

3. Laying out important information

Showcasing the information needed is important for a crypto wallet and a wallet which doesn’t show daily total or individual profit/loss percentage is a bummer. Keeping that in mind I decided to show the respective information using two of the self explanatory colors — a shade of red and green where red obviously depicts the loss percentage and green of course showing the profit percentage.

4. Using modern elements

If we are going with a modern design, then obviously we need respective modern elements to compliment with the design. Cards with a subtle shadow, rectangular cards displaying tokens and transaction history with better color combinations are used so as to make the design feel alive.

Challenges Occurred

1. Making a new and refined design change to the wallet app but not giving the whole interface a major design overhaul to keep up with the brand’s identity.
2. Reducing the create/import wallet journey while keeping in kind that I’m not missing out any important information like wallet recovery phrase and securing the account.
3. Keeping up with it’s competitors like Coinbase & Phantom Wallet.

MetaMask — The Changes It Really Needed

With all the important information this case study needed is out, let’s move onto the more “visually appealing” part of this case study — sketches, mockups, component library, style guide & more.

Redefined Style Guide

I changed the font family as well as standard font sizes that are used in the current MetaMask wallet design. I feel that the current design has smaller elements and feels kind off little when browsing through the interface so I increased it just a little bit so that it feels good on newer smartphones as well.

The shade of orange is from their logo which I feel is one hell of a job, I really like that fox haha! A shade of grey is also used to emphasize a specific content and show required information.

Sketches

Roughly fixing up with current user flow in the MetaMask wallet app.

Trying to put out the design that I had in mind in a pen & paper style only directly on figma because that’s how I do it lol.

User Flow

Current

The current user flow for a new user takes approximately ten steps from the very first screen to reaching the final home screen of the MetaMask wallet app.

This is unnecessarily a higher number when it can simply be reduced.

New

Worked on a new and better user flow so that it takes the least number of steps for the user to reach the final home screen of the app without losing any of it’s security features since it’s a wallet app. Mixed both the Getting Started & Import/Create Wallet screens to reduce steps, retracted Secure Wallet Video & Info screens completely since I really think that in 2022, it’s unnecessary and all the importance of securing the secret recovery phrase can just be shown in those respective screens only.

Working On The Visuals (Low-Fidelity)

While working on the visuals for the new design, I decided not to play around with the design too much and stick with the existing brand guidelines because I feel that a major design overhaul can have a negative impact on the existing user base so I worked on this space keeping in mind the UX laws and prioritizing the user goals.

Component Library

I also took the liberty of creating a small component library for the new refined version of MetaMask wallet design which could come in handy in the near future if I decide to update it.

Final Screens (High Fidelity Mockups)

I jumped forward and made these high fidelity screens to showcase a new yet not so new MetaMask Wallet Design.

MetaMask — The Dark Mode It Really Needed

I figured out that everyone needs a dark mode their apps these days and for a crypto wallet app that people usually open every day, it must have a subtle dark mode for it’s user base.

Conclusion

This was one of the most exciting projects that I have worked upon till now! My interest in blockchain world and the love for design made me work on this beautiful project! This project had a huge learning curve and I’m glad I got something to learn while doing something I love.

Some things that I learnt while working on this case study :

• Implementing thoughts into a design process.

• Better documentation while writing a case study.

• Not going crazy while designing the interface — you should know when to stop adding elements.

It was a great experience overall, thank you! 👋