SUMMER OF BITCOIN : HEXA WALLET

My contribution to the open-source design project by Hexa wallet: Bitcoin and Friends — Secure chat-like interface for the interaction between wallets

Jessica Alexandra Jide

Product Designer

Email: jessicaalexandrajide@gmail.com

LinkedIn Profile: https://www.linkedin.com/in/jessica-a-a7105999

INTRODUCTION

I shared my experience getting into Summer of Bitcoin’22 and how I got an opportunity to contribute to an open source project and this is a detailed overview of my workflow with Hexa wallet.

This project is a feature of chat interfaces between wallets and will be designed to aid communication as well as foster quality relationships with friends, and family, all in one app. With this feature the users can invite friends from their contacts and stay connected with them, allowing the users to pay each other without asking for their address, sending their contacts messages, allowing them to create joint accounts with them, helping them in situations like backup and recovery of their wallet and also allow the users to trade in a peer-to-peer way.

Overview

The project duration: May 23 — August 15, 2022.

Hexa team believes in team collaboration, it helps get the job done. Working with a fellow intern Ayomide Yusuf, we have made so much progress these past months. This is a detailed report of my workflow this past few months , with every mistake and feedback that helps our learning process.

Let me take you on a product development journey…..

Week 1

We had a meeting with the Hexa wallet team for induction for the new interns, to get to know the team, and a general overview of what our experience working with Hexa wallet would be like. We had a general discussion about these topics :

1. Introduction to the new apps — Hexa Pay and Hexa Keeper

2. Initial scope discussion (with the project as the first step)

3. Teams and task management.

We had a second meeting with the team for the week and all the interns were given small tasks to do some research our deliverables were :

1. Download Hexa Wallet and explore/try all the features and give feedback on them.

My feedback on this was mostly on the onboarding process as a first user, I suggested that there should be onboarding screens or little guide pop-ups to direct a new user on how to navigate the app.

2. Examine and do basic research on the competition/alternatives to HexaPay ( like Google Pay).

On this deliverable, I had a meeting with my teammate where we compared and listed out UX issues with the current hexapay designs and how to improve the UI in comparison to our competitors.

These were our deductions:

Account creation Screen

-Adding a Nav bar (Home, Contacts, Chats & settings ).

-Phone number(with country code) input and verification

-Profile picture (option to skip), In case users don’t feel like adding a profile picture

Home Screen

-Adding a Notification icon

-Balance in a rectangular board(like the Hexawallet)

-Access the transaction history from the home page.

Settings

-Users being able to edit their profile pictures

-Adding Notifications settings

-Adding a Help center to assist users(might be a bot)

-Adding a Log out CTA

Chat Screen

In personal chats, breadcrumbs at the top right end lead to the following;

Create new group

Mute notifications

Report spam

Block user

Get help

Week 2

The team decided to do a weekly review every Friday to know the progress of our projects. My teammate and I had a meeting with our mentors on more details on the Bitcoin and Friends project called “ Hexapay” and we got an overview of why certain screens were designed the way it was, who our target audience is, and also suggestions to help guide us in developing our screens.

Understanding the user :

The team had three generic 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.

“A” and “B” type of users were intended for Hexapay while “C” type is for Keeper, another project handled by a fellow intern Juhie Chandra.

We were assigned tasks to improve current screens to suit our product users, we were to conduct research and come up with the deliverables for the week and hand off the designs to the developers for implementation of the screens to show at the weekly review meeting

Our deliverables :

1. Onboarding screens: I realized that the current app and the Hexa pay had no onboarding screens, so it was suggested in the meeting to add these screens to give the users a quick overview of the app features.

We did our research and came up with these onboarding screens

We showed the team during the meeting for feedback, one of your mentors suggested adding a screen that speaks volumes about the bitcoin and friends features and how friendly the interface is, so from these suggestions we created our final onboarding screens that satisfy our product goals:

2. Password screens: We had to research to come up with a better sequence for a new user to sign up for the app.

“Name before password”

“Password before the name”

This was the challenge given to us, we brainstormed and concluded that for personalization of the app, getting the user’s name should be the first thing to do before the password. The team was comfortable with screens after hearing our reason

We followed up the design of these screens with error screens for wrong password inp

Week 3

We progressed to the next screens as our onboarding process has been finalized.

Our deliverable for the week was to improve the Home screen and also figured out a better option for displaying the backup message without overwhelming/ forcing the user but still attention-grabbing to alert the user that this is important and should be attended to.

For this deliverable, it was a bit challenging because this is a major screen that should contain all the necessary functions of the app.

We did research and brainstorm on the necessary actions to be taken on this screen, this was our initial design :

We got feedback on this design, and our mentors suggested :

• Changing the color of the alert icon to yellow/lemon to not be too overwhelming for the user but still give them a warning signal that this requires their attention
• Removing the “Recent activity” section because there should be a page designed for that, making the section redundant
• The notification icon wasn’t necessary because when the user gets a chat alert and they can easily see that on their contact’s profile
• The Nav bar wasn’t necessarily because:

• The contacts icon: The contact list was already displayed below the balance card which cancels out the icon, they also suggested adding a more buttons which would lead to the actual contact list page

• The chat icon: Clicking a contact leads to their chats directly so that cancels out the chat icon, they also reminded us that this is not a social media app so it shouldn’t look like one.

• The settings icon: Clicking on the user’s profile picture should lead to the settings screens, this makes the icon redundant

So the nav bar was completely removed because it wasn’t necessary.

From these suggestions we designed another screen:

There was more feedback on this screen and we made a lot of changes. These were the feedbacks :

• We solved the problem of the backup message not being overwhelming but still emphasized as important for the user to attend to.
• The “show transaction history” CTA was seen as unnecessary by the team. Because the balance card is supposed to be clickable to take the user to the wallet overview screen that has all the details of their transaction history.
• The UI colors weren’t matching the brand guide

We took the feedback and redesign the home screen although this might still require a few changes in the UI. The team was comfortable with this screen because it satisfied the product goal

Week 4

From the last review meeting, our deliverable of the week :

-Create a user flow for the application to understand the necessary screens required and also for a better understanding of the app flow by the product development team ( designers and developers)

For this deliverable from our previously designed screens, we were able to create our user flow from them, especially the home screen which acted as a guide to other major screens. Find attached a link to the current app user flow- https://xd.adobe.com/view/5d7ba243-1062-4fac-8ee0-20ee0a0490b3-0828/

This required a lot of corrections and questioning because this is a very critical part of every product development. We shared this flow with the team and the team decided to go with this flow for our processes.

Week 5

With the user flow, we proceeded with the development of other major screens. Our deliverable:

-Wallet overview screen: The user gets to this screen by clicking the balance card, it contains the transaction history of the user.

To make the experience more convenient, we added tabs to act as a filter between “ All transactions, Sent and Received.”

The team agreed with our reasons for designing it this way so there wasn’t any major feedback on it.

These are our final designs on these screens:

Week 6

This week we focused on contact interactions. Our deliverables :

• Contact list: This screen contains the user’s added contacts and contact list, it also contains CTAs (call to action) that affects the contacts. This is our final design of the contact list screen.

• Using the QR scan to add a user: We design screens to support this interaction, especially a screen to ask permission for camera access. These are our final screens:

• Find Nearly CTA: This CTA allows the user to scan for nearby users to add as contacts. Our final screens:

In situations where there are no users nearby, an error message pop-up was designed for such situations :

• Contact profile: This screen is shown to the user to confirm a contact’s profile. Our initial design :

We received feedback from the team on this screen:

• The wallet ID shouldn’t show on their profile, instead, that should be replaced with their “Last seen” on the app.
• The “Add New Contact” CTA should be changed to “Add as a contact”

We redesign according to the suggestions we got and this is our final design:

• The “Share invite” CTA: This would be a system pop-up that leads out to share a link to other contacts in other applications to invite them to join hexa pay.

We made a lot of progress these past few weeks, It was our mid evaluation phase and we were told to submit a report on our work progress .

This was my evaluation feedback :

The journey isn’t over yet!!

Week 7

Moving to the “Interaction” part of the flow, our deliverables for the week:

-Contact Profile: From our last deliverable, We created two variations for contact profile. Unadded contact : The default user profile when they haven’t been added as a contact.

Added Contact: This contains new options as an added contact — Access to the user’s wallet Id and wallet address and the “Add as contact” CTA in the default is changed to “Share Contact”.

• Chat Interface : This is an important feature of the app because it’s where the interaction happens. We got suggestions on this design before working on it : Having expandable chat boxes for viewing long text. We added Quick action CTAs “send & request” in the chat so the user can make quick transactions even while texting. The team was comfortable with the outcome of the screens so there wasn’t any feedback on them

Case 1: User gets friend requests through notifications and is sent to the chat screens to accept/ decline requests.

Case 2 : Users can send / receive bitcoin and view the transaction history using expandable chat boxes.

Week 8

This week’s deliverable was focused on the bot chat interface “Your virtual assistant”. The aim of having the bitbot is to attend to issues the users might face while using the app.

Our first design on this ;

The team wasn’t entirely satisfied with these screens, the feedback we received :

• The questions are limited , we should add categories to give options for unlimited questions for the users access .

We didn’t entirely agree with this, explaining the first that this is a bot and at some point will confuse the users and showing the multiple options like that isn’t really a good ux.

The team agreed with this suggestion then decided to limit the questions between 50–100 and they will be categorized to avoid confusing the user.

From the feedback, we improve the screens to this:

Categorization and Adding a scrollable menu for accessing multiple questions with ease.

Week 9

Using the flow, our next deliverable for the week :

• Send bitcoin screens ; this contains the user’s details, the amount to be sent and an option to add a short note for the receiver.

• Request bitcoin screens ; this contains the user’s details, the amount requested for and an optometrist to add a short note for the reciever.

These screens are designed for users to be able to send and request Bitcoin from friends and family, It’s in the form of satoshis. Users can send Satoshis to one another with the applicable fees for each transaction. Users are also able to add notes when sending these sats to their loved ones, e.g “Pam, these sats are for your Icecream. Enjoy!”

The team was comfortable with these screens, so there was no feedback.

Week 10

Rounding up the flow this week’s deliverable was focused on the settings screens:

• Settings screen : These screens contains options to makes changes to their profile and wallet settings.

Backup screens: This screen contains backup options to protect your wallet.

Passcode and Face ID screens: This gives the user options to change their passcode and biometric lock .

Language and Currency screens : This screens gives options to change your language and currency with quick pop ups.

Broadcast preferences: This screen gives the user options to alter their notification settings.

The team was comfortable with this screen so there was no feedback.

With this we concluded our project on Hexapay , now we were assigned to start the transition from Hexapay to the current Hexa app.

Week 11

For the Hexapay — Hexa transition, we had two deliverables for the week.

• Create similar backup options like that of Hexapay, and redesign the settings by moving the security tab — the settings and naming it. “Wallet backup”

This was the flow given to us

Current Hexa security tab and backup screen:

Our redesign of these two screens: Having two variations, when the user’s wallet is backed up with “ Cloud backup” or the “Seed Phrase backup”

• Gift sats tab:- For this deliverable we had to create a new tab for the “Gift sats” which is under the “Friends/ Family” tab. This new tab is to replace the ”Security centre tab” that was moved to the settings screen as “Wallet backup”.

Current “Gift sats” screens :

Redesign of “Gift tab” screens: Replacing the tab on the nav bar to a “Gift” icon

This screen has three different flows:

• -Create a new gift flow: This follows the current create new gift flow and design but with an additional option for the user to create a gift using a SATSCARD .

Current design :

Redesign of Create New gift with an option to add SATSCARD. This has two variations in the flow- “when there’s sats in the card” and “when there’s no sats in the card”

Sats Available:

Sats Unavailable:

• Available Gift flow: this screen has similar flow to the current flow so no major changes were made in flow .

• Claim SATSCARD flow : This has two variations

Sats available

Sats unavailable

Little note : I created the “Visual SATSCARD”illustration , pretty cool right? :)

Week 12

For the Hexapay — Hexa transition, we had a deliverable for the week.

Sherpa : a new feature to be added to Hexa, the aim of sherpa is like a bitcoin guardian that helps a fellow user protect their wallet by having access to their backup and monitoring of their transactions.

This was the flow created of the sherpa

• Become a sherpa flow: This screens shows how a user becomes a sherpa

Create link without Gifts

Create link with Gift

Managing your sherpa: there would be a sherpa icon on contacts that has you as their sherpa

• Dependent Creating wallet with Sherpa : In this case, the dependent’s flow using the Sherpa code.

• Detaching wallet from sherpa: Only the dependent can chose to detach their wallet if they are confident enough to manage it

With this we rounded up our project with the Hexa team.

Personal learnings

Contributing to an open source project and learning about bitcoin was a fascinating experience.

I learnt a lot about the importance of understanding who your product users are and also working with a cross-functional team.

Appreciation

I would like to appreciate my partner on this project Ayomide Yusuf , for being collaborative and patient with me throughout our workflow. My mentor Sumaiah Khan , for her guidance and feedback during our process.

To my fellow interns and the rest of the Hexa team for being great people with beautiful minds.

I really enjoyed contributing to this project!

Thank You Hexa!

Thank You Summer of Bitcoin’22