Overview

✍️ My Role

UX Designer

👥 Key Stakeholders

Product Management, Software Development, Customer Success

💼 Company

Peanut Pioneers Program

launched June 2024

Background

Peanut Protocol facilitates crypto transfers via URLs and QR codes and has around 15,000 daily active users.

Current interface

Challenge

Users struggle with navigating the send, claim, and dashboard interfaces, leading to a high drop-off rate. The challenge is to redesign these interfaces to streamline the experience, reduce friction, and support user growth by fostering a more intuitive and seamless journey.

Solutions

01 Optimise Send/Claim User Journeys

Simplify steps for users to send and claim funds via links.

Send links page

Claim links page

02 Add Visual Hierarchy

  1. Highlight Call to Action (CTA) information in pink and bold font.

  2. Group contents based on proximity and aligned using unified UI components.

  3. Pop-up windows are top-aligned for visual consistency.

  4. Make content scannable.

03 Improve Onboarding Experience

  1. Add instructional and error copies to guide users.

  1. Introduce a UI motion for a point system to reward users, encouraging app usage.

  1. Add customised message upload when sending links to engage more users.

Outcome and Key Results

The new app has driven an increase in daily active users.

It has achieved the following goals within two months of its launch:

6k

monthly SDK downloads

35%

Growth in Incoming Dapp Transaction

40%

Growth of Unique Active Wallets

User Journey Mapping

Goal

To understand the user experience in sending and claiming funds via links.

Method

User journey mapping: map out existing user flow, identified pain points using qualitative and quantitative research methods.

Before

Lack of visual hierarchy, users drop off due to confusion

Users had 3 options to enter the transaction amount, select the token/chain, and connect the wallet, causing drop-offs due to obstacles. New users were reluctant to connect their wallets to an unknown app and got confused about the swap function.

Old 'send links' user journey mapping

Old 'claim links' user journey mapping

Old Interfaces

After

Enhanced visual hierarchy and unified UI pattern across send/claim interfaces

User testing feedback showed that the linear flow does not fit all user cases, especially for those who has already connected wallet. Therefore, I provided more open routes in the user journey map. A review screen was also added to both user journeys for users to confirm their selections before transaction.

'Send links' user journey revamping and wireframes iteration 01

'Send links' user journey revamping iteration 02

'Claim links' user journey revamping and wireframes iteration 01

'Claim links' user journey revamping iteration 02

Ideation

01 How might we emphasise emphasize the CTA information?

Iteration 01

Separate Connect Wallet and Select Token/Chain CTA

Pros: One CTA per page


Cons: Users have to go through three steps to generate links.



Iteration 02

Adding Visual Hierarchy to CTA and Pop Up Window

Pros: Highlighted CTA, simplified steps in a consistent interface


Cons: Possible confusion for new users


Solution: Use colour and proximity to differentiate CTA from other contents.

02 How might we reorganise token/chain selection interface to help user find the right selection?

03 How might we build user trust in transactions?

Add a review screen with transaction details for both send and claim flow. Users can also track all links sent or claimed at their dashboard once connected.

04 How might we encourage users to use swap features while claiming?

Iteration 01

Separate Swap and Claim Page

Pros:

One CTA per page


Cons:

Users are forced to choose to swap or not while claiming, leading to drop-offs.

Iteration 02

Incorporate Swap Feature as a Drop-Down Menu on the Claim Page

Pros:

  • Reminds users of the swap function at the opening screen

  • Use similar UI as the send interface to familiar user with the swap feature

Cons:

  • Users might accidentally click on the swap feature

Iteration 03

Incorporate Swap Feature on the Home (Connect Wallet) Page

Pros:

  • Visually differentiate CTAs:

    • Highlighted text "edit" for swap

    • Input box for manually entering wallet address

    • Grayed-out button for proceeding to claim (activates after address input)

  • Added a return button for users to review before completing the transaction

Cons:

  • Users might accidentally click on the swap feature

Design System

I have created a scalable design system based on the existing UI kit. All components are auto-layout for responsiveness and checked through WebAIM to ensure WCAG 2.1 Level AAA standards.

Design system

Design system

Testing & Iterations

User Testing Feedback

We conducted several user testing sessions to evaluate the prototypes, and here are some key observations and area of improvements:

Lack of guidance

While the error copy tells the user where is the problem, it doesn't come with a solution.

Send Page

Claim Page

CTA don’t fit all users

The current CTA doesn't work for user who already connected. I've noticed that users prefer having open options to choose which steps to proceed with, rather than following a rigid sequence.

Claim Page

Transaction detail management

A dashboard is required for users to manage their assets and keep track of their send/claim activities.

Dashboard

Iterations

Send Page - Lack of guidance

I added the same copy and title throughout the user flow for consistency, along with a pop-up screen to guide users to connect their wallet before sending. Additionally, there is guidance for users to purchase more tokens.

Send pages iteration 02

Send pages iteration 02

Send pages final iteration

Send pages final iteration

Claim Page - CTA don’t fit all users

The current claim flow doesn't work well for users who are already connected. I've noticed that users prefer having open options to choose which steps to proceed with, rather than following a rigid sequence.

Claim page iteration 3

Claim page iteration 3

The CTA has been changed to proceed and made the wallet address editable for new users; users who have already connected will go straight to the swap/claim now page

Claim page final iteration

Claim page final iteration

Dashboard - Transaction detail management

Dashboard high-fidelity prototype for both website and mobile device

Dashboard high-fidelity prototype for both website and mobile device

Reflection

My Contribution

  • Convert user research and user test feedback to actionable design iterations

  • Create wireframes and prototypes

  • Develop a scalable design system with accessibility standards

  • Work closely with the product manager and front-end developers to meet KPR

Challenges and Takeaways

Experience of Shipping Features

The UX audit of the send, claim, and dashboard features took six weeks. I explained designs to developers, made decisions with the PM, and pushed development forward. Despite many collaboration challenges, I gained insights into technical constraints and learned about communication, prioritization, and compromise.

Exploring Design Alternatives

Since the product focuses on Web 3.0 technology, the PM often brought feature ideas to me. I learned to understand their reasoning and found that exploring multiple design iterations leads to better solutions.

© 2025 by Lynn Qian