onboarding | responsive web

Wryder stable coin exchange

Overview

Wryder is a stablecoin conversion app that allows users to exchange US dollars for various types of stablecoin.  The scope of this project was 0-1, so we design the entire responsive web app, including marketing landing pages and the onboarding process. I am going to focus on the onboarding process as I was the sole responsible for this flow.

CHALLENGE

This project was particularly challenging as I had to get up to speed with cryptocurrencies and specifically exchanges. What was the difference between them what were the current processes.

The onboarding process needed to be easy to use even though there was a lot of information to gather to create an account. Cryptocurrency exchanges have to gather a lot of personal information in order to comply with federal regulations and validate identity. Such information such as SSN, date of birth and uploading documentation to proof identity could create points of friction for the user.

I began with some competitive analysis and reviewing other financial and digital asset onboarding process. I started with a simple flow chart to organize the information that the user needed to enter. Here is the original flow and then the final flow, we ended up having to add in google authenticator in addition to Authy so we moved phone number back into signup.

Lo-fi phase

After many iterations and reviewing the flow with the client, I began to build out the minimum screens needed in lo-fidelity. The two aspects that I wanted to focus on were the wizard and streamlining the form process.
The wizard gives the user a quick visual to know exactly where they were in the process. In this instance, I decided to use two types of wizards.
‍

• The first wizard lays horizontally at the top of the page. It's purpose is to guide the user through each section.
• The second wizard is a bit more complex, it is a vertical wizard. It is represented by the numbers and subheaders (ie. 1. Enter Phone Number). It collapses and expands information as it is being requested of the user. So it gives it a feel of a mobile app (one piece of information on one screen) while still existing on the web.

Below are the first screens of the onboarding flow in lo-fidelity to test the wizards and the usability.
‍

User testing and final designs

After considering the insights gained from user testing on the lo-fi prototypes, I decided to rearrange the signup and two-factor authentication flow. The API with Prime Trust wanted to be able to allow both Authy and Google Authenticator. So I moved the phone number to the signup flow and dedicated the two-factor section to make the process really easy to follow along, especially for those that are not used to having to do this process, as we found through user testing.

After running through a series of iterations, I was able to clarify information conveyed.  I focused the style of the horizontal wizard in a style that didn’t need numbers, so that I could use numbers through the vertical wizard. We made sure the visual language was simple and clear for comprehension and ease of navigation. The minimal style also ensured the wizard was easily scalable for mobile and desktop.

reflections

The client was really happy with the final result. Implementing our Wyoming mountain range as a background/footer differentiated the product and emphasized the value prop for the exchange. User testing continued to give feedback that . the design was easy to use and understand for non-crypto users. As the number of users increase I look forward to testing and refining the onboarding process.

I really enjoyed designing for this onboarding experience. It helped me grow as a designer by continuously supporting the importance of user testing.