💡 Tapioca is a decentralized Omnichain stablecoin ecosystem, comprising multiple sub-protocols, including an isolated lending market, a CDP, and a token vault, allowing the user to lend and borrow assets across any chain. It also features complex processes like locking tokens, and receiving options. Tapioca posed many exciting UX problems to solve. The LBP raised $8M.
The Task
I joined near the start of the project as the only designer, and helped create the product from the ground up. Accordingly, there is far too much to show!
But here are some highlights.
Design process included:
Technical interviews
Ideation workshops
User journeys
User flows
Wireframes
High-fidelity UI
Interactive prototypes
A full mobile version
A complete Design System modified from Material UI
Light and Dark mode
User testing
Live user analysis with Usersnap
Some Initial Flows
I began by sketching out the major journeys, and then working on them collaboratively with the rest of the team.
These were created in workshops with the front and back end team, so that we were all aligned on a single vision.
Requirements Scoping
After discussion with the lead front end developer, we decided to modify a Material UI library, so that we could use Material components as much as possible. This reduced the distance between code and design, and allowed me to develop a large, flexible, Figma library that would be maximally useful to the developers.
Design Library
We used standard components as much as possible, but it’s basically impossible to build a web3 app without creating some unique stuff.
Below is an example of a token select screen - both dark and light - with nested, fully modifiable, components embedded within it.
Many States, Many Flows, Many Screens
To create a top-tier user experience, I paid special attention to things like states, and included designs for:
Error
Warning
Success
This followed best practice, and utilised alerts with easy to understand messages, icons and colour signifiers.
Below is an example of different screens for each state of a transaction:
Pending
In Progress
Failed
Rejected
Complete
Designing for the complexities of cross-chain transactions is only really possible by someone with a good, practical, understanding of DeFi. I think this is one area where being a degen myself really helped me out, as I could combine deep DeFi knowledge with mature design skills.
The transaction flow was designed for every possible blockchain interaction (e.g. deposit only, deposit and borrow, borrow only…) so that the dev team could quickly see every state. This alone was ~140 screens. The actual user flows for each sub-protocol were stored in separate Figma files.
Usability
My guiding principle for Tapioca was to make it as usable as possible.
Tapioca is a complex protocol, as it really consists of multiple protocols. There was only a certain degree of complexity that could be abstracted away, yet I could still make the UI clear and friendly.
In practice, this meant:
Large tokens
Large text
Highly readable fonts
AAA accessibility
Light and Dark mode
Good information hierarchy
Guides on every page
The Results
Tapioca raised $8.39M in an LBP in July 2024. I wrote a bit more about the design process here.
The protocol continues to grow and innovate.
Comments