YODL Payment Flow

YODL Payment Flow

YODL Payment Flow

A smooth checkout solution to complex crypto payments

SOLO DESIGNER

The business need was to create an MVP for launch to test the market. My role was to build out a UI for the app to launch & the squad included a frontend dev & blockchain dev.


I started by creating minimum-viable / lean UX frameworks as a way of focusing the design choices. These included short storyboards, happy path user flows and several other frameworks. These frameworks acted as scaffolding for the remaining design work.

The company vision was to create a product that was trustworthy and capable. The guiding brand characteristics were determined to be:

  • Security

  • Crypto native

  • Innovative


We transitioned from an original dark mode design to a light mode style to resonate with existing design language for checkouts and payment processors.

Designs

Takeaways

Biggest challenge

Refining and condensing the hundreds of possible payment token options on the Token selection screen to help guide the user without overwhelm, whilst maintain full flexibility was a great challenge.

A failure

The first iteration of the token selection screen failed since users didn't understand that some tokens were hidden in a collapsed list. This led to experimental and further testing of components.

Key impact

Creating a tested, launch-ready UI from the ground up for launch. Creating a V1 for the design language (including design system) and working through a significant number of variables and edge cases allows rapid iteration for further design iterations.

An unexpectedly learning

Creating a header section allowed multiple UI components to be contained and set back, which allowed the user to focus on a reduced amount of information in the main container.

This was significant due to the density of information for the user to process.

Most proud of…

Simplifying complex data fields on the review payment screen and finding solutions for conveying important info in small space.