Streamlining Token Purchases
with an Integrated Buy Widget
Designed an in-app widget that allows users to buy presale tokens directly from their crypto wallet — eliminating the need to switch between platforms. Focused on delivering a seamless, trustworthy, and conversion-optimised experience that connects the full presale journey: from discovery to purchase to claim.
My Role: Design Lead / UX Designer
Duration: 10 months Team: 5 designers
Other Teams: Product, DEVs, Business, Data, CRM
01. Impact
Introduced a unified token purchase flow fully integrated
within the wallet experience.Improved user conversion and reduced friction across presale transactions.
Established a data-driven framework for continuous optimisation
and post-launch iteration.
02. Overview
Challenge
Buying presale tokens required users to leave the wallet app and complete transactions via browser-based widgets. This created friction, reduced trust, and limited the wallet’s ability to drive engagement or promote other projects.
Objectives
Create an intuitive in-app token purchase experience
Reduce friction between presale discovery, purchase, and claim
Reuse existing interaction patterns to ensure UX consistency
Build a scalable foundation for multi-token and multi-chain expansion.
03. Research & Competitive Analyses
Benchmark
We benchmarked existing browser-based buy widgets to understand how leading crypto platforms handled presale purchases. Our analysis focused on:
Functionality and parity across platforms
UI and language accessibility for non-expert users
Friction points in wallet connectivity and confirmation
Integration depth with other transaction features
The findings revealed a key opportunity: most widgets treated purchase as an isolated action, while users needed a connected, end-to-end experience within their wallet.
04. Feature Lifecycle Mapping
We mapped the entire presale lifecycle — from token discovery to token claim — to identify how this new feature could support users at every stage. This holistic approach helped define the value proposition:
Excerpt from the Presale Lifecycle — before, during, and after purchase
Key insights:
Many users arrive during high-urgency purchase windows.
Post-purchase steps (like claiming tokens) often lacked visibility.
There was potential to encourage engagement with new token listings.
This feature shouldn’t just enable purchase — it should guide, inform, and retain users.
05. Task Flow & Alignment
A detailed task flow aligned design, product, and business stakeholders early.
We mapped:
The shortest possible happy path
Alternative flows
Required validations and feedback messages
Emotional context — supporting users in high-stress, time-sensitive actions
Task flow for happy path and other use cases
06. Wireframing & Iteration
We began with low-fidelity wireframes to outline layout logic and key interactions.
These were validated internally with cross-functional teams to ensure technical feasibility and content alignment.
Through multiple iterations, we refined the flow to balance:
Simplicity for first-time users
Familiarity with existing feature behaviours.
Efficiency in the fewest possible steps
Initial wireframes to align on UX intention
Flow mockup iterations
07. Refining Edge Cases
Edge cases — such as insufficient balances, failed transactions, or unsupported tokens — were designed to provide guidance, not dead ends.
We focused on:
Clear recovery options and feedback messages
Reusing design patterns from other wallet flows
Maintaining trust and retention during error handling and retries
08. Delivery & Handoff
We prepared detailed design documentation for engineering:
Complete handoff file with all states and flows
Screen-level annotations for default and interaction
Detailed specs for integrations with backend
09. Design QA
Before release, we ran a full Design QA (Quality Assessment) to ensure implementation accuracy. Each issue was categorised by impact:
High
Blocks user flow
Medium
UX deviation, recoverable
Low
Visual inconsistency
This systematic QA reinforced the product’s design quality and ensured parity between the final build and the intended user experience.
10. Post-Launch Behavioural Insights
After launch, we collected customer feedback, analytics data, and session replays across hundreds of sessions.
We reported findings weekly to product and business teams, identifying friction points and behavioural patterns that weren’t immediately visible through quantitative data.
Session replay analysis, observation notes and a presentation of insights to the team.
This ongoing research:
Guided UX refinements to improve clarity and flow performance
Prioritized improvements based on user impact and development effort
Validated progress through continuous post-release measurement
11. Continuous Improvement
Several iterations followed post-launch, focused on:
Reducing friction during conversion and error recovery
Supporting new chains and token integrations
Improving clarity in status and confirmation feedback
These improvements led to a measurable increase in user conversion and transaction completion, reinforcing the value of continuous data-led iteration.
12. Conclusions
This project showcased how strategic UX can connect technical complexity, business goals, and user trust in one coherent experience.
By embedding user insights into every stage — from concept to post-launch iteration — design became a continuous driver of adoption, conversion, and long-term engagement.
Design doesn’t end at launch — it evolves with every user interaction.