top of page
2 min read

Tapioca


💡 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.

Some text left fuzzy deliberately. Image to illustrate collaborative process, not technical details.


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


As with other components, these large cards were made up of multiple nested components.

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.


Just one of multiple Figma files. Every flow was designed in full.


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.

bottom of page