Product Design
Summary
Designing a decentralized crypto trading platform that prioritizes clarity for beginners.
My role building Clipper was as the lead product designer and product manager. As the only designer on the team, I also did the branding, illustration, and recruiting and direction for design contractors when I needed support. I worked closely with all corners of the engineering team to distill their complicated smart contracts into beautiful interfaces that connect financial technology to everyday people.
Research
Starting from scratch, I initiated the product design process by gathering insights from people interested in trading cryptocurrencies. Conducting remote interviews and anonymous surveys allowed us to collect valuable data, which was logged in a database to identify common pain points. By immersing myself in online communities, I discovered that users on competing platforms faced challenges with high fees and complex instructions. A groundbreaking discovery by our engineers revealed that small liquidity pools could make small trades cheaper at the expense of making large trades more expensive, leading us to focus on everyday traders doing small transactions and facing the most complications with high fees, which sparked immense interest among the target audience.
Our evolving databases of user feedback
Ideation
Collaborating closely with our engineering team, I translated their complex specifications into a design brief, understanding the functionality and limitations of the codebase. Analyzing competitor platforms and mapping out their flows, I identified successful patterns for optimal user behaviour. Using Miro, I created flow diagrams to highlight the ideal user journey and address any edge cases. I also developed the information architecture for both the marketing website and the app, conducting internal and user tests for validation.
Sketching
My process involves heavy sketching to iterate and gather feedback quickly. Here’s a small collection of some of those explorations.
Design System
With the Clipper brand already established from my earlier work, I leveraged its building blocks to design interactive components in all possible states, creating a comprehensive design system in Figma for reusability throughout the design process.
A snapshot into the Clipper design system
Prototyping
I utilized low-fidelity prototypes to build the app, collaborating with the front-end designer and incorporating notations based on user actions. After multiple iterations, we had a workable prototype connected to smart contracts for real user testing. I refined the copywriting and employed iconography to facilitate beginners’ understanding of complex concepts.
Usability Testing
Continuing with testing, I included users from the initial round as well as those drawn to the project through marketing efforts. Conducting live tests and recording user interactions, we assessed the app’s ease of use, user satisfaction, and language complexity. Valuable feedback from users helped refine the prototype for launch.
After many iterations, here’s some flows I captured of core actions on the app.
Data Visualizations
To aid in building trust through transparency and comprehending key metrics on Clipper’s performance, I designed user-friendly data visualizations that mapped the liquidity pools and associated transactions.
Results
One year after its launch, Clipper has grown into a product with a monthly user base of approximately 28,000, amassing crowd-sourced liquidity for trading at volumes exceeding $1 billion. The app continues to evolve with new features constantly on the horizon.