Internship / Harpie 2FA

OVERVIEW

As a UX Designer at Harpie, I helped improve the user experience of our product: a crypto security suite that helps web3 users safely conduct crypto transactions and prevent scams and theft on the blockchain. I got to work on a lot of impactful design projects like this one, collaborating with a senior designer, product manager, and 3 developers.

The Head of Design, Jorge Aquino, was an amazing mentor and senior designer to work with. His excellent leadership and the fast paced startup environment contributed to my significant growth and learning during my 8 months here.

This particular project involved a comprehensive redesign of our core feature, Wallet 2-Factor Authentication (or 2FA, for short). Wallet 2FA is a multichain RPC — you can think of it as a VPN or secure network to run crypto transactions through and ensure you're sending money to a safe verified address.

PROBLEM

The main problem with Wallet 2FA was low user activation rates and high drop-off during the onboarding process. We held a design critique to form hypotheses about what UX issues contributed to this problem, and validated them through user research and testing interviews.

Major UX issues with the old design of Wallet 2FA:

• Lengthy onboarding: The onboarding flow involved way too many steps (5 modals) and overwhelmed the user with too much information, resulting in high dropoff rates.
• Lack of visual hierarchy: The most crucial component, the network connection status (which activates the feature), was the smallest button on the dashboard.
• Weak layout: The transaction cards feel like they are shoved into a small narrow section on the right side, when there's a lot of empty space that could be used and opportunity to optimize layout.
• Poor visual communication: Graphics are outdated and don't align with our branding principles.
• Lack of progression: There's no clear flow or journey to help guide users once they complete the onboarding (where do they go next? how should they use the feature?).

Old 2FA: Prototype

USER RESEARCH

We used Maze as our asynchronous testing platform, and conducted usability testing interviews with real users. From our research, we found that:

• Most users didn't know what Wallet 2FA was, and had never tried out the feature
• Users did not fully read our onboarding modals, and spent 3-5 seconds on each screen
• Users found it difficult to progress and identify next steps to take once they completed onboarding
• Users liked our overall branding and design aesthetic

IDEATION

To address the HMW problem statement, we did an ideation session to brainstorm ideas and map out new user flows. Below are some of the sketches I did as part of this process.

How might we increase user activation rates for Wallet 2FA?

DESIGN PROCESS

To fuel our creativity and gather design inspiration, we conducted competitor research into other web3 offerings like WalletGuard and PocketUniverse. We also looked at Dribbble and Mobbin for general UX design inspiration and best practices.

Transaction Cards

Changes we made:

• Brighter colours: In the first iteration, we felt like the green, yellow, and red colours were too muted and didn't effectively communicate the safety or danger of the transaction. To fix this, we went with brighter colours to associate the transaction risk tags with universal symbols of safety, caution, and danger.
• More compact size: We made the final transaction cards more compact and less visually cluttered by stripping the design down to only the most essential elements. The purpose of making the transaction cards more compact was to be able to fit more cards on the transactions history page, enabling a more functional and delightful user experience.

RPC Connection Module

‍

One thing we found through our research was that many users had a hard time understanding what the Wallet 2FA feature does, and new crypto/web3 users weren't familiar with the term "RPC". We wanted to address this problem by leveraging established VPN apps like Surfshark to inform the design of the RPC connection module.

Changes we made:

• Improved visual hierarchy: The first iteration had a lot of wasted negative space, so we increased the size of the graphic to emphasize the connection status as the focal point of the module and grab user's attention.
• Reduced visual clutter: We removed unnecessary info like insurance eligibility and connected wallet so that only the most relevant details were included in this component.
• Animated graphic: In the final design, we swapped the static graphic for an animated one with a pulsing animation to add an element of interactivity and that "wow" delight factor (view animation in the prototype).

Transaction Details Modal

Changes we made:

• Horizontal layout: Changed vertical layout to horizontal to rearrange information in a cleaner, less visually cluttered design and be able to fit better on web screen sizes
• Danger analysis: Added colours and icons to help visually communicate the wallet danger analysis breakdown
• Transaction details: Cut down repetitive information (recipient, transaction date, amount) in the transaction details section because they're already included at the top

2FA Dashboard

FINAL DESIGNS

‍

PROTOTYPE

DESIGN HANDOFF

For the design-to-dev handoff, Jorge and I created a separate page within our working Figma file to cleanly map out all user flows, screens, components, images, and any assets the developers would need to build our design. Below are just a few screenshots of the huge handoff file we created, in addition to walking the devs through our designs on a final handoff call.

‍

‍

‍

‍

‍

‍

OUTCOME & LEARNINGS

This massive redesign of our core feature, Wallet 2FA, resulted in a 45% increase in adoption within three months, with users praising its clarity and ease of use. This metric represents a successful design initiative, with our solution accurately addressing some of the critical user problems and pain points discovered through research insights.

A few takeaways and lessons I learned from this project:

1. Design sprint process: I learned how to independently run a design sprint and why it's so important to start off any design project by defining key goals, metrics, and problem statements.
2. User research: I also realized the importance of conducting user research to validate your hypotheses and uncover user pain paints — even if it's a startup with limited resources and participants.
3. Design handoff: I learned how to set up a proper design handoff Figma file to document every user flow, design, component, and use case to make the implementation phase as smooth and easy as possible for developers.
4. Mobile adaptation: I learned how to make designs responsive and adapt designs to a smaller screen size.

‍

‍