Metamask Redesign Project

Venturing modern design for accessibility

Sophia Ng, Design Innovation

ROLES

UX Designer, UX Researcher

DURATION

8 weeks

TOOLS

Figma, Figjam

PROBLEM

Users do not have access to features catered for accessibility

CHALLENGE

Understanding what elements to incorporate for better accessibility features to support new learners while keeping experienced users engaged

SOLUTION

Incorporate more accessibility design features as well as providing an improved UI experience for all users

Competitive Analysis

We began initial research by analyzing cryptowallets that provided the similar features as Metamask. Because Metamask runs on Ethereum, we looked into cryptowallets that were Ethereum based. The wallets that we focused on the most included: Coinbase, Exodus, and Mew Wallet.

In both accessibility and reviews, Metamask was ranked the lowest. Synthesizing this portion of our research helped us identify our main guiding questions for this project, and helped us narrow down which elements of the application we should focus on

 
 

Questions to consider

With our guiding questions, we were able to draft up surveys that we planned on sending out on social media platforms and forums, such as Reddit

 
 

Survey Disclaimer

Although we had planned on dispersing our survey on reddit, we ran into complications that discusses the impact of continuing to ask the BVI (blind-visually impaired) community

Rather than focusing on gaining our insights through surveys, the best route for our group moving forward was to proceed with user interviews. We wanted to gain information that would be valuable and NOT something that could simply be googled (refer to image).

This would help us gain a better and more personal understanding of how accessibility and usability affected all users

 

User Interviews & Personas

From user interviews, we split up our users based on experience level with cryptocurrency and using cryptowallets. Rather than focusing on specifically accessibility for BVI individuals, we wanted to focus on elevating accessibility for all users. We wanted to emphasize extremes from our potential user demographic to analyze frustrations and goals these users had with the current Metamask interface

 

Research Methodologies

Following our user personas, from their frustrations and goals, we were able to deduct what features we could implement

We split up features and elements into 3 main categories: Will Not Have, Could Have, and Must Have

This activity next influenced basic sketches and wireframes

 

1. Price & Transfer History

This set of frames includes redesigning the price display and transfer pages as well as introducing the contacts page.

Because many users expressed a need to be able to see prices of different cryptocurrency, we wanted to provide them a platform where they were able to compare and contrast prices visually

We included a transfer history section so that users were able to keep track of overall transactions, which was a new feature that is not offered in the current Metamask version

2. Currency Transfer

We wanted to focus on clarifying the process for converting cryptocurrency to provide an extra step in simplifying the main functions of a cryptowallet–to use and hold cryptocurrency until needed

This function allows users to buy, send, and receive cryptocurrency similar to a banking application, such as Cashapp or Venmo. many users stated that they were interested in using an application that felt more familiar to use

 
 

3. Contacts

The contacts pages are a new set of frames that we wanted to introduce to level Metamask similarly to a banking application. one of the platforms that provided us with the most inspiration was Venmo

Adding a contacts page and the ability to add and message other users on Metamask gives the app the feeling of familiarity that easily allows beginner and advanced users to become comfortable with using

Final interface designs

Following WCAG guidelines for our final prototypes, we focused on typography, ratio, and color contrast to make sure that our frames were accessible to all users

We used a static and sans serif font, Helvetica, to improve readability as well as provided more interactive buttons that included more information on cryptowallet processes, such as buying and swapping currency. furthermore, instead of the original lighter grays and blues of the current Metamask app, we opted for a darker mix of blues to abide with WCAG while still staying within brand guidelines

1. Browser & Contacts

This frame begins from the main internal browser into the contacts page where users can add, view, and message other users

Similarly to other money managing applications, the contacts section of this application enables users to have a means of communication between the buyer and sender

With the new browser tab available, users can now favorite and browse recently searched topics, such as different types of cryptocurrency

While this may not be a key functionality for the application itself, it serves to promote the third-party browsing that persists in many other cryptowallet applications

2. History & View Prices

Jumping from the history tab, users are able to view prices of different cryptocurrency in the platform more in depth

This is an especially important feature for users because it allows them to show the dynamic of cryptocurrency

With the different types of cryptocurrencies displayed, the functionality of the application improves so that users are able to identify and compare between the currencies offered

Being able to view and compare prices is a core component to Metamask. With larger images, text, and color that stand out, users are able to distinguish cryptocurrencies

3. Prices & Wallet

In the wallet section of the app, users are able to buy, sell, receive, and send cryptocurrency. These frames showcase a user buying via Apple Pay

Users are able to select what type of payment method they prefer and select the cryptocurrency that they would like to convert their currency to

When buying, selling, receiving, and sending cryptocurrency, the currency itself will be converted into dollar amounts (or the currency the user prefers) so that users will be able to gauge the volume of money they are receiving and/or selling

This process helps to eliminate confusion while going through the buying and receiving journey in a more efficient manner

Personal Reflection 💭

This was one of the first UI/UX projects that I worked the full design and research process on. This project helped me work on my own personal strengths and weaknesses. For instance, throughout the project, I was able to communicate with my teammates and voice my concerns clearly. One of the things that I typically struggle in is voicing my concerns because I tend to second guess myself, but this project helped me realize that my concerns were valid in my thought process and my reasoning. 

Because this was my first interaction with accessibility design, it was a little bit harder for me to catch up, especially because this project dealt with a challenging topic, which was cryptocurrency and blockchain. Due to time constraints, a lot of the features planned were unable to be designed, however if I had more time, I would incorporate more accessibility features that go beyond design and mesh with the product itself, such as messing with auditory and visual settings. 

Even though this was a difficult project, it helped me realize why I want to design, and why design matters for everyone.