Summer Of Bitcoin 2022: Blog (2/3)
This is my second blog related to the internship under Summer of Bitcoin 2022.
Table of Contents
- Understanding Keeper
- My Work Procedure
- Meet the Product Team of Keeper
- Week-2 : Getting the basics of UI right
- Week-3 : Diving deeper into the core fundamentals of Hot Wallets
- Week-4 : Time to take independent decisions for UX
- Week-5 : A week of intense learning
- Thanking note 👋
Understanding Keeper
Hexawallet, the Bithyve Organization’s flagship product, will now be available in two versions, each one tailored to a different user’s needs.
They offer three definitions of users:
A) Pre-coiner Pam: Being new to the field, she first wants to test out the wallet and educate herself about bitcoin.
B) New-coiner Neeraj: He has some bitcoin thus far, but wants to use them in new ways.
C) Bitcoiner Bob: has a sizable sum of bitcoin and wants to spend them safely.
Two products: Keeper is primarily for the C types of consumers, and Hexapay is intended for both A and B.
1.User possesses a sizeable BTC worth (between $ 10,000 and $ 100,000).
2. User holds it on a hardware wallet but wants to increase security/resiliency, or Holds it on an exchange but is afraid to withdraw for fear of losing it
likes having self-control.
3. User is privacy-conscious also contemplating the possibility of inheriting his Bitcoins.
(Information based on the company’s research)
Work Procedure
There are sprints for each new version of the Keeper application, and the entire project is managed on Github.
The development and testing teams work at a lower sprint level than the design team. My mentor reviews the tasks when I’ve finished them.
Every Thursday, the tech team sees the final release for each sprint and provides input. Final revisions must be completed by Friday to put to development in the very next sprint.
Product Team
Week-2 (30 May 2022–3 June 2022) :
In the Monday morning meeting, the task for the week was given. I’ll discuss the conclusions I reached and why.
Task 1: Creating a version of the home screen when nothing is setup
Goal:
⇒ Understand Hexawallet’s Wallet Creation Process ( Keeper will have a similar journey )
⇒ Understand the Primary and Secondary journeys of user
⇒ Understand user messaging in a minimal way
⇒ Create an iteration from the design system and a few designs provided based on understanding
Thought Process:
● Users will land on a screen where they're asked to either “Add a wallet” or “Add a vault”; buying BTC can be an optional addition to the screen.
● Some users may prefer both options on the same while others may go for separate locations. Hence, I created two different iterations.
●I have to strictly stick to the typeface provided by the mentor and the branding elements like the colors and gradients etc.
Feedback from mentor and team:
•Avoid using tags for user messaging, it is meant for categorizing things.
•The second iteration is better because it’s more informative and visually pleasing.
Task 2: Creating Settings Screen
Goal:
⇒ Understand Hexawallet’s Settings elements that will be repeated in Keeper
⇒ Understand the Primary and Secondary journeys of user
⇒ Understand Features of Keeper
Thought Process:
● As the user is going into a secondary journey, the screens must be of secondary color.
● The first iteration was an experiment with green over beige color with some gradient for the CTA part.
● The second iteration was focused to be minimal and added a search bar for improving the search experience of the user.
● The third iteration was created after discussing with the mentor regarding elements in UI and talking with developers regarding the features.
Feedback from mentor and team:
•Avoid using gradient elements on gradient background for CTA
•The search bar should be a minimum of 38px in width
Task 3: Creating Login Flow for Keeper
Goal:
⇒ Understand Hexawallet’s Login elements that will be repeated in Keeper
⇒ Understand different journeys of user
⇒ Create an iteration from the design system provided based on understanding
Thought Process:
● The first two iterations were created to demonstrate different contrast of secondary color on login screen
● I tried using tags for giving user message ( which I realised was not a good practice ).
● The third iteration was more focused on how primary color will contrast with white for the login screen.
● Similar to Hexawallet I added inbuilt numpad in login screen.
● My major concern was the amount of information user needed for a smooth login experience.
● I thought of highlighting the particular block in which user was typing.
Task 4: How Error while Login will be shown?
Goal:
⇒ Understand Hexawallet’s Login elements that will be repeated in Keeper
⇒ Understand different journeys of user
⇒ Create an iteration from the design system provided based on understanding
⇒ Understand what is ideal way to show error which does not inhibit the authenticity of design and spoils user’s mental state
Thought Process:
● The first iteration would turn all the dots into hollow depicting there is some error.
● The second iteration was intended to be more bold and visibily clear that user needs to enter the passcode again.
Feedback from mentor and team:
•Avoid using texts between 11px to 12px for user messaging while error as it is hardly visible.
• The idea to highlight blocks with a shade of red was appreciated.
Task 5: Design a flow for creating a new wallet in Keeper
Goal:
⇒ Understand Hexawallet’s userflow for creating a new wallet
⇒ Understand different wallet types
⇒ Create an iteration from the design system provided based on understanding
⇒ Understand what is ideal way to create screens for user entry that is not overwhelming for users.
Thought Process:
● I experimented with the contrast levels of secondary color as this is secondary journey for a user.
● Minimum number of fields for user to enter the required information and getaway with the first step as soon as possible.
● Also, mentioned number of maximum characters based on the space available on home screen for showing wallet details.
Feedback from mentor and team:
•The design was confirmed and sent for development
Week-3 (6 June 2022–10 June 2022) :
In the Monday morning meeting, the task for the week was given. I’ll discuss the conclusions I reached and why.
Task 1: Creating Send Journey
Goal:
⇒ Understand Hexawallet’s userflow for sending SATS
⇒ Talking to product manager regarding specific details
⇒ Create an iteration from the design system provided based on understanding
⇒ Understand what is ideal way for a user to perform transaction without being obstructed by high priority information flowing in
Thought Process:
● I experimented with a few design samples provided by my mentor and also took inspiration from few crypto wallets
● For the selection of receiver, providing different options to user was important. However, major focus should be on the scan part because it’s easily accessible and fast.
● Creating screen where user enters the amount and other details was a tough task as I needed to find appropriate words to be used for this was a High Priority Task.
● After creating a few iterations, I had a discussion with mentor about improvements and realised I was repeating a few things and ignoring some important details like “What is the reason for transaction?”.
● I created few iterations as below based on feedback and also trying to complete the whole procedure in minimum number of steps.
● Custom Priority is a new thing for user. Hence, the best way they could understand what it meant was to show it along other ways of Transaction Priority: High, Medium and Low. User would get a basic idea that — The more the Fees, the fast transaction would be completed.
Feedback from mentor and team:
•The design was confirmed and sent for development
Task 2: Creating Receive Journey
Goal:
⇒ Understand Hexawallet’s userflow for receiving SATS
⇒ Talking to product manager regarding specific details
⇒ Create an iteration from the design system provided based on understanding
⇒ Understand what is ideal way for a user to perform transaction without being obstructed by high priority information flowing in
Thought Process:
● I experimented with a few design samples provided by my mentor and also took inspiration from few crypto wallets
● The most important things are : QR code, Address of the wallet and the amount user will receive (optional)
● Why will user enter amount to receive? : The QR part and Receive SATS option work together. When user enters 200 SATS for instance and the sender scans the QR, the amount 200 SATS will automatically be filled in sender’s entry field.
● User can also copy the address of the wallet and share it with the sender.
Feedback from mentor and team:
•The design was confirmed and sent for development
Task 3: Creating Transaction List
Goal:
⇒ Talking to product manager regarding specific details
⇒ Create an iteration from the design system provided based on understanding
⇒ Understand what are the most important elements of any transaction on a blockchain network
⇒ Understand which elements would be useful from a user’s point of view
Thought Process:
● I researched through a few wallets and made list of important aspects of a bitcoin transaction.
● The most important things are : Transaction ID, Amount, Sender and Receiver’s wallet ID and the transaction fees.
Feedback from mentor and team:
•My mentor explained me about the standard practice of making transaction lists.
•Also, the design would vary as per the wallet hence this design was moved to lower priority and kept for redesigning.
Task 4: Creating a Settings screen for a wallet
Goal:
⇒ Talking to product manager regarding specific details
⇒ Create an iteration from the design system provided based on understanding
⇒ Understand what are the most important elements of any wallet
Thought Process:
● The design would be similar to Keeper Settings screen.
● The most important things are : Show XPub and Wallet’s seeds.
Task 5: Creating flow for exporting wallet individual seeds
Goal:
⇒ Talking to product manager regarding specific details
⇒ Create an iteration from the design system provided based on understanding
⇒ Understand and simply the complex procedure for developers using userflows
⇒ Intergrating privacy check features within the UI
Thought Process:
● To increase security, user will be asked to confirm the passcode again before exporting seeds.
● Only a single seed word would be visible at a time on tap. This is done to prevent screenshot of the screen and make the process longer hence much serious.
● In the note, user will be informed to keep the seed words safely as losing it will lead to permanent loss of access to the wallet.
Feedback from mentor and team:
•The design was confirmed and sent for development
Week-4 (13 June 2022–17 June 2022) :
In the Monday morning meeting, the task for the week was given. I’ll discuss the conclusions I reached and why.
Task 1: Creating a screen for inheritance flow
Goal:
⇒ Talking to product manager regarding specific details
⇒ Create an iteration from the design system provided based on understanding
⇒ Understand the crucial details within the process of “Inheritance of Keeper”
⇒ Simplifying complex vocabulary in much simpler way for a user
Thought Process:
● The whole process of inheritance would be a checklist to complete one after another.
● The second step can be initiated only after completion of first.
● Also, making Know-more screens for inheritance is on list of future works so that user can be guided well throughout the process.
Feedback from mentor and team:
•The design was approved however number of steps were reduced.
Task 2: Creating a success message after password reset
Goal:
⇒ Create an iteration from the design system provided based on understanding
⇒ Understanding that timely user feedback is very necessary
Thought Process:
● This was a low effort task and the thought process was pretty much obvious.
● Such positive user feedbacks are necessary to improve the user experience
Task 3: Creating screens for setting up tapsigner
Goal:
⇒ Talking to product manager regarding specific details
⇒ Create an iteration from the design system provided based on understanding
⇒ Understand the crucial details within the process of “Setting Up Vault from Tapsigner”
⇒ Understanding how does a Tapsigner works
Thought Process:
● The actual flow will include a screen showing all the possible hardware supported by Keeper. User can select the respective hardware wallet used by them.
● After entering CVC code during setup process, the Tapsigner takes a while in the backend to retrieve data and show it on the frontend.
To solve this, different levels of process will be shown so the user can understand what is happening in the meanwhile.
Task 4: Creating screens for transferring funds from wallet to vault
Goal:
⇒ Talking to product manager regarding specific details
⇒ Create an iteration from the design system provided based on understanding
⇒ Understand the crucial details within the process of “Transfering BTC from wallet to vault within Keeper”
⇒ Understand the trigger policy
Thought Process:
● The most important aspect of Vault is to secure the funds. A wallet is made for daily basis transaction. Hence, when wallet crosses a certain amount of money, user is asked to transfer it to vault for increasing security.
● The trigger policy for this can be changed by users themselves. This will be shown as a user message on homescreen.
● Also, we would require the user to complete the procedure in minimum number of steps as much as possible. Hence, only two screens with heavy details were to be made.
● Before any such high priority task, there is always a confirmation modal.
Feedback from mentor and team:
•The design was confirmed and sent for development
Week-5 (13 June 2022–17 June 2022) :
In the Monday morning meeting, the task for the week was given. I’ll discuss the conclusions I reached and why.
Task 1: Create settings screen modified version
Goal:
⇒ Talking to product manager regarding specific details
⇒ Create an iteration from the design system provided based on understanding
Thought Process:
● This was a low effort task and only a single element “Backup Keeper” was to be added.
Task 2: Understand Backup, Recovery, and Health Check of wallet
Goal:
⇒ Perform Backup, Recovery and Health Check of wallet on Hexawallet and understand the fundamentals before creating a new flow.
⇒ Divide the intensive task into chunks and create userflows which can be later used for usability testing for each process
The ETA for this task was assigned for the next weekend.
The userflow was created many times by us and changes were made with more meetings. The following userflow was finalized by the UX designer.
Task 3: Create Recovery via seed words flow for Keeper
The following screens were created as per the userflow:
The remaining part of this BHR flow would be covered in the next blog
Many thanks for sticking with me
It took a long time for me to document my work along with minor details behind every design. A few things I would like to mention apart from the work:
💛 The Hexawallet/Bithyve team is really helpful and supportive. Everyone is considerate enough to lend a hand when necessary. Working with them throughout this initial round of my internship was a lot of fun. From Morning Scrums through Evening Community Times, here are a few screenshots:
💙 I met quite a few designers who are part of Summer of Bitcoin 2022 and made great friends! A special thanks to Harsh Singhal for supporting me, bearing with my rants, and offering advice in the manner of a mature senior. For LN Capital, he is building a design system that is excellent.
🖤 Also, a warm note for fellow design interns at Hexawallet. Thanks for being super supportive Yusuf and Jessica! You guys are amazing.
🤎 Thank you Pranshu for guiding me through complex topics in weekly study sessions and keeping a check on my progress.
