MetaMask Mobile
Product Design | Leadership
Overview
Led collaborative design process from conception to launch with global teams of engineers, product managers, and researchers. Developed storyboards, prototypes, and high-fidelity visual design to communicate interaction and design ideas. Mentored junior designers and participated in recruiting and developing design principles. Evangelized design and product thinking methodology with blockchain.
Roles & Responsibilities
Design Lead
UX Research
UX Design
UI Design
Prototyping
Usability Testing
Problem Statement
Many MetaMask desktop extension users worldwide had expressed a desire to check their wallets on their mobile devices when away from their laptops. As the majority of people worldwide use mobile devices, the team recognized the need to build a mobile app to reach a wider audience and take advantage of extensive business opportunities as one of the first Web3 enabled crypto wallets in the space.
My role
Similar to my role on the extension product, I lead the design of a mobile app from concept to launch. I was responsible for leading early design strategy conversations and brainstorming sessions with stakeholders. I collaborated closely with a product manager and the lead mobile engineer on early-stage concepts. We used many of the learnings from the Extension product to inform the design of the mobile app. I developed wireframes, prototypes, and extended the design system to a mobile form factor. Additionally, I led UX research initiatives with a UX researcher to test our designs and iterate based on user feedback. During the development phase, I also worked with engineers to address any UI and interaction design gaps all the way through the launch of the app.
Solution
Onboarding Flow
The onboarding flow needed to be both delightful and educational. Due to the decentralized nature of blockchain, we included important steps to educate users on how to safely and securely store their seed phrases. We designed a "challenge" that required users to enter the seed phrase given to them in order to continue the flow. This was done to ensure the seed phrase was saved by the user. Although this added friction to the onboarding process, we were committed to upholding our principles of security.
Navigation
Before landing on the side drawer as the main way to switch between top level views, we explored using a bottom navigation. The bottom bar at the time was mainly used in iOS, however, since React native was used in order to have one source code for both iOS and Android, the team decided to use a navigation pattern that could be adaptable to both platforms.
Wallet Accounts
The core component of the MetaMask mobile app is its accounts. Upon full onboarding, one account is generated by default from the seed phrase. The account view was designed to present key actions in an accessible way. A primary challenge in creating the view was determining which actions should be top-level and which should be hidden in a secondary menu. We drew on UX insights from the extension to prioritize each action in the mobile account view. While much of the design was informed by the extension, we also tailored the UI to suit mobile usage patterns.
Built-in Web3-Enabled Browser
Due to technical constraints in authenticating user accounts to Web3-enabled websites on external mobile browsers, the team decided to build a native browser right inside the mobile app. The result is a simple browser that can be used like a normal browser, but with Web3 capabilities. This allows users to easily and securely log in to Web3 websites using their MetaMask accounts.
Transaction Screens
To safely use Web3 sites and apps, it is crucial for users to understand how they are transacting with websites. To address this, we designed transaction screens in the form of pop-ups that occur whenever users interact online. Our challenge was to design for comprehension and clarity.
Approach
We used React Native to build the mobile app so as to maximize our reach and target both Android and iPhone users. However, during the design and development process, I had to work around several technical limitations. These included adapting the UI to work on both Android and iOS, as well as addressing privacy, security, and performance concerns, among others.
Despite these challenges, we were able to successfully launch the app and offer our users a seamless experience across both platforms. Throughout the development phase, I collaborated closely with the lead mobile engineer and product manager to ensure that the app met the needs of our users while also aligning with our business goals.
Conclusion
As a result of our efforts, MetaMask mobile was well-received by the community and has become one of the first Web3 enabled crypto wallets in the space. Our success has also inspired other projects in the industry to offer mobile versions of their products, thus expanding the reach of blockchain technology to an even wider audience.
Thanks for reading!