Internship / Harpie 2FA

OVERVIEW

As a UX Design Intern at Harpie, a crypto security startup, I got to work on a lot of impactful design projects with the senior designer, product manager, and developers. I wanted to showcase this project in particular, because I felt like I made the greatest impact and learned the most.

This project was a comprehensive redesign of our product's core feature, Wallet 2FA (2 Factor Authentication). Wallet 2FA is a crypto security tool that protects web3 and crypto users from getting their money scammed or hacked. Think of it like a VPN or secure network, but for conducting crypto transactions.

PROBLEM

The issues with the old Wallet 2FA dashboard:

• Lack of visual hierarchy: There's no clear arrangement or prioritization of elements, making it difficult for users to understand what's most important
• Poor visual communication: In this design, there's a lot of wasted negative space that could be optimized.
• Lack of progression: There's no clear and logical flow that leads users to move from one point to the next.
• Lengthy onboarding: The onboarding process involved too many information modals and not enough actionable/engaging steps.

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

SKETCHES

These are some of the sketches I did as part of our design sprint.

IDEATION

Transaction Cards

In the first iteration of the transaction cards, we felt like the colours were too muted and didn't effectively communicate the safety or danger of the recipient address. We also got feedback that the insurance coverage tags looked too similar at a glance.

In the second iteration, we opted for brighter green, yellow, and red colours to associate the safety tags with universal symbols of safety, caution, and danger. We differentiated the insurance coverage tags by changing the colour of "Not Covered" to grey.

In the third and final iteration, we made the design more compact by stripping the component down to its most essential elements. The purpose of making the transaction cards more compact was to fit more transactions on one screen, enabling a better user experience.

RPC Connection Status

These were old iterations of the RPC Connection Status module. The first one had a lot of wasted negative space, so we tried making the illustration bigger as a focal point of the module and rearranging the information layout. The second design was an improvement but we felt like it was missing interactivity and it didn't seem polished enough to fit our brand aesthetic. In the final design, we added a pulsing animation to solve this problem (try the prototype to see it).

FINAL DESIGNS

‍

Mobile Adaptation

PROTOTYPE

New User: 2FA Onboarding

Current User: 2FA Onboarding

‍LEARNINGS

1. Design sprint process: I learned a lot about running design sprints and the importance of starting off any design project with goals, metrics, and problem statements.
2. Handoff designs effectively (and make the developers love you): I learned how to set up a design handoff Figma file and Notion doc to document every user flow, design, component, and use case to make it as smooth and easy as possible for the developers to implement.
3. Mobile adaptation: I learned how to make designs responsive and adapt designs to a smaller screen size.