Payment Flow

Design Case Study

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.

Storyboards Using Open Peeps

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.

From Dark to Light Mode

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.

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.

Token Selection Screen

Key Impact

The flow was the native in-app starting point for users to learn from and for support and sales staff to showcase the platform. It be a feature we were able to monitor and adapt over time and integrate it into support documents and promotions etc.

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

Final Designs