Unlocking The Future: Bring Your Own Wallet Along
Bring your own wallet was a multi-department (Foundations and Connect) initiative that streamlined importing or replacing your brand digital wallet with a 3rd party wallet (MetaMask, Coinbase). A digital wallet is where a user can store their tokens, rewards and NFTs. It allows the user to set up a digital wallet as a new user or import an existing one. Once a wallet was set up the option to replace it was available as well as manage it through their account management. Throughout the process of researching and designing this responsive web application, I was able to meet and keep in mind the needs of our brands and their users. I anticipate that this project will streamline a user’s ability to use a third party wallet instead of their brand wallet and make the process user friendly, manageable, and resonate with the user for it’s simplicity.
Project Overview: Key Milestones and Deliverables
As a user, I need the ability to set up, import, or replace my wallet. I also need the ability to manage my wallets.
CHALLENGE
Design a front-end wallet flow that allows a user to set up, import or replace their wallet.
Allow a user to manage their wallets through their account management. They can replace their wallet, change their passcode and copy their Bitcoin and Ethereum addresses.
Allow a user to manage their legacy wallet, update the wallet, change their passcode, and copy their Bitcoin and Ethereum addresses.
Provide the user with education and information up front before they import or replace their wallet.
REQUIREMENTS
ROLE
UX/UI Designer
6 weeks
TIME
TOOLS
Figma, ChartJS, Maze
Unlocking Discoveries: Navigating the Realm of Research
Since I wasn’t very familiar with how importing or replacing a wallet worked, I had to do a fair amount of secondary research to gain a better understanding. Through competitive research, I reviewed MetaMask and Coinbase flows to try and discover differences and similarities. Through my research I wanted to:
Understand how importing or replacing a wallet would work and what steps would be necessary to complete this task for a user.
Identify points of contact where a user enters their passcode and 12-word mnemonic phrase.
Learn about current trends that Web 3 exchanges use for adding or importing a new wallet.
Discover the goals, needs, motivations, and frustrations of our brand’s users.
EMPATHIZE
I learned that there are multiple ways to import or replace a wallet for a user. All you need is a 12-word mnemonic phrase and passcode in the UI in order to import your 3rd party wallet from MetaMask or Coinbase. The one caveat to this is brand reward tokens may not show in your 3rd party app and if they do the decimal place values may not show up to 8 places.
I immersed myself in the import experience and did secondary research for importing wallet flows through MetaMask and Coinbase Wallet (not their app).
I researched and studied Coinbase for inspiration on their wallet management functionality for features such as renaming wallets, hiding a wallet, importing a wallet, and copying a 12-word mnemonic phrase.
DISCOVERY
After conducting my market research, I met with our brand presidents to interview and discuss the findings and how this could potentially alleviate issues with their users. A big selling point for this initiative was the ease of use for a brand’s user to replace their existing Core wallet with a Connect wallet or 3rd party wallet. Since our Connect brand is connected to the entire ecosystem and all the brand tokens are visable it would allow a legacy or new user to see all their tokens in one central location.
Crafting User Personas: Understanding Your Audience
To make sure that I understood a Web 3 user and that my process was as user-centered as possible, I wanted to have a clear understanding of who a typical user was that was interested in our wallet setup and import process.
Users want to make their wallet setup, import, and replacement process as user-friendly and effortless as possible. Ideally, you could set up a new wallet or import one in just a couple of steps and do it from a variety of devices.
Users want the ability to understand the steps needed to take before importing or replacing their wallet. It’s important to note that they need to transfer their funds prior to initializing a replacement flow in order for the funds to not be lost.
Users need to be able to review a side-by-side screen for a comparison of their wallets to view their account balances when replacing their brand wallet.
Defining the Problem: Identifying Core Challenges
With my understanding of our wallet user Winslow, I wanted to start thinking about what problems we are trying to solve for her. I created a point-of-view diagram and a series of questions that would help drive my brainstorming process.
What insights could I understand about the wallet setup and import process and its replace and manage wallet features?
What are her immediate needs during the process?
What her point of view would be like and how could I empathize with it?
How might we help her?
Setting Clear Project Goals: Achieving Success
After defining the problem, I generated a lot of ideas for these problems. I started to strategize and determine what goals I was trying to meet and what solutions would need to be prioritized. I ended up with an intersection with 3 takeaways:
Users need a reliable end-to-end wallet setup and import process
Users need wallet flows that allow a variety of options customized to meet any user’s needs
Users need a personalized experience
Creating an Effective Site Map: Structuring Your Web Application
To plan out the site architecture for this application and where the features would fit, I created an application site map (ongoing) to organize the screens in a way that would be logical and intuitive for Winslow. I had explored 2-3 different versions before settling on the current layout, which was chosen based on user onboarding and overall flow considerations. By watching user flow sessions and their heatmaps with Hotjar, I determined that most new users will onboard, set up their wallet and then purchase node(s). Because of this, I chose to design a top-level navigation in our dashboard that would allow a user to access their nodes dashboard, rewards overview, and wallet.
Wireframing Essentials: Building the Blueprint for Design
I worked on making informed decisions on designing the initial wireframes for this project. Initially there was functionality to manage certain aspects of the wallet, and having the ability to set up and import wallet on the Manage Wallets tab. Over time this would be revised as business needs and certain functionality would become more clear (showcasing multiple wallets or just giving the user the ability to view the Core wallet on the client side UI). At the time, it met the needs of Winslow as she could set up, or import a wallet, and view multiple wallets (Core, Legacy, Archived) from the Manage Wallets tab. Since the flow for setting up a new wallet already existed I didn’t wireframe for that or importing and replacing a wallet.
Account Management Manage Wallets
Core Wallet Details Page
Wallet Dashboard Tokens Page
Designing User Flows: Enhancing the User Experience
To understand the overall journey that Winslow would be taking through the app from start to finish, I created different flows that walked through different paths she could take. She could either set up or import her wallet if she didn’t have one already, or could replace an existing wallet (legacy or core), while managing her wallet from her account management tab. To view the journey maps click here.
SET UP WALLET FLOW
Winslow would select set up a new wallet, sign and accept the terms and conditions, receive her 12-word mnemonic phrase and record it for safekeeping. She would then re-enter her 12-word mnemonic phrase and enter her passcode. This would then redirect her to her wallet dashboard where she could view her wallet balances, manage her wallet or replace it.
IMPORT WALLET FLOW
Winslow would select the import wallet CTA button from her wallet dashboard and view a splash screen where she had to review and agree to the steps she was about to take. She would then be prompted to enter her 12-word mnemonic phrase and her wallet passcode. She would select the complete CTA button and it would check against the lexicon if the 12-word phrase was correct and that her passcode was correct. She would then be prompted to enter and confirm a new passcode, validating if it matched, and then would click the complete CTA button. A success modal would appear and she would then be redirected to her wallet dashboard where she could view her wallet balances.
REPLACE WALLET FLOW
Winslow would select the brand wallet and select replace wallet from the ellipses menu. She would view a splash screen where she had to review and agree to the steps she was about to take, then be prompted to enter her current passcode. Next she would be prompted to enter her 12-word mnemonic phrase and select continue CTA button. She would review her wallet balances and confirm that the tokens had been transferred and click the replace wallet CTA button. A success modal would appear and she would be redirected to her wallet dashboard.
Usability Testing: Ensuring User-Friendly Designs
Method: Maze testing, user participation from research, and user testing slack channel
Participants: 7
Age Range: 24-54
Average Time: 3-5 minutes
Task 1 Set up a new wallet - Completion Rate: 60%, 80% Direct Success, 20% Indirect Success
✅ Users were able to set up a wallet in less than 4 steps
Task 2 Import a new wallet - Completion Rate: 80%, 100% Direct Success
✅ Users were able to import a wallet in less than 4 steps
Task 3 Replace an existing wallet - Completion Rate: 70%, 80% Direct Success, 20% Indirect Success
✅ Users were able to replace a wallet in less than 4 steps
Task 4 Manage your wallets from account management - Completion Rate: 80%, 100% Direct Success
✅ Users were able to manage their wallets with little to no confusion
Overall, the testing showed positive results and most users found the process easy to navigate and understood how to complete their task. One interesting finding was there was confusion amongst users when they reached the wallet dashboard at the end of each flow and tried to navigate between different wallets. They were confused with having a drop down and an ellipses menu on the wallet card. Based on this feedback I removed the dropdown and multi wallet select option, but still allowed the user to view their wallets from their account management.
OVERVIEW
Select set up a new wallet
Agree to and sign the terms and agreements
Enter in mnemonic phrase and passcode
Wallet pashboard
Account management manage wallets
Import wallet splash screen
Wallet transfer review
Revisions and Updates: Refining Your Project
Taking what I learned from our user testing for phase I of this project, I made key updates:
✅ Added a wallet passcode input field to the replace wallet splash screen
✅ Removed balance over time graph and ellipses menu from wallet dashboard
✅ Removed the ability to switch between your wallets on the wallet dashboard
✅ Added the ability to copy your wallet ETH/BTC addresses for wallets
✅ Removed the ability to rename your wallet in wallet details view
✅ Removed archived wallet(s) from manage wallets tab in account management
✅ Removed the ability to show/hide your legacy wallet
✅ Added a screen with multiple wallet views for replace wallet flow review
✅ Added Bitcoin and Ethereum addresses for confirmation after entering 12-word mnemonic phrase
Final Prototype: Ready for Launch
Taking my revised mockups, I created a final high-fidelity mockup and prototype. With this phase clearly defined, I worked on incorporating new feature set ideas as well as anticipating future iterations.
Reflections & Impact: Learning from Experience
This project is still under development but based on projections and preliminary findings, I anticipate the following impact:
✅ Over 80% conversion rate for replacing a legacy wallet users to either a new Connect, Core, or third party wallet (MetaMask, Coinbase)
✅ Over 70% adoption for new users signing up for a wallet or importing a third party wallet
✅ 100% success rate in managing their wallet(s) from one central location
✅ 100% of users find the process streamlined and easy to use with each flow being less than 5 steps to complete