Drift Case Study Hero Image

Drift

Creating the mobile experience for a leading DEX

The Project

Role
Mobile UX/UI Designer & Developer
Tasks
  1. Mobile Web Application
  2. Front-End Development (ReactJS)
Timeline
2022
Engagement
Contract

The Company

Overview

Drift Protocol is a decentralized crypto exchange (DEX), and the first perpetual swap exchange to leverage a Dynamic AMM (DAMM). Its key innovation being that it introduces repegging and adjustable k mechanisms to recalibrate liquidity in a trading pool based on participant demand.

Size

10 - 50 Employees

Industry

Cryptocurrency, Decentralized Finance

Type

B2C

Introduction

Being a follower of several crypto projects, I stumbled upon Drift Protocol at the end of 2021. I was intrigued by the platform, and the speed at which the team was building and shipping features. Interested in learning more, I joined the company Discord and found out about their bounty program. Simply, the company sets aside funds to be utilized for community-requested features. The bounty that stood out the most to me was one regarding designing and developing the mobile UX/UI of their web application. I got in touch with the team and joined on to help out.



Previous UX/UI

When I joined the team, there was no mobile experience. If users accessed the exchange on their phone, they were met with a message stating the following: "Drift doesn't support mobile browsers optimally yet, please try a using a desktop instead".

At the time, there were not many Solana mobile wallets available, so there weren't too many users who were visiting the Drift app on their phone. However, with the release of Phantom iOS looming, this mobile experience would be critical to building Drift's user base.

Previous Drift Mobile UX
Previous Drift Mobile UX

Research

I began the project by compiling screenshots of competitor exchanges with a mobile UX, and noted similarities/difference the apps exhibited. It was relatively easy to identify which features that competitors contained, but more difficult to identify areas where improvement could be brought to Drift.

A note for crypto exchanges - currently, there are two mobile access methods: by using a native mobile application and through a wallet browser. A native mobile application was outside the scope for this project for a few reasons:

For this research, I referenced native mobile applications where available, and utilized wallet browsers for all other instances.

dYdX

Of the applications researched, dYdX was the only one which required access through the MetaMask wallet browser. The main reason this distinction was important when comparing experiences is that MetaMask has a busier interface surrounding the web application. This means that when designing for this environment, designers have to pay particularly close attention to the amount of information they show users, knowing that there will always be a higher baseline of information they must parse while viewing the application.

dYdX Mobile UX/UI
dYdX Mobile UX/UI
Mango Markets

Mango Markets was the application that would be presented most similar to Drift in that it would be accessed via the Phantom wallet browser. Phantom iOS was being launched as we were developing the mobile web application, which worked out quite well for testing purposes. The wallet browser in Phantom is quite minimal, which makes for a less distracting/information-dense starting point for mobile web applications.

Mango Markets Mobile UX/UI
Mango Markets Mobile UX/UI
Binance (Pro)
Binance (Pro) Mobile UX/UI
Binance (Pro) Mobile UX/UI
Binance US
Binance US Mobile UX/UI
Binance US Mobile UX/UI
FTX.US

Likely the most well-known competitor (due in large part to it's marketing efforts), FTX has a number of features in it's mobile application.

FTX Mobile UX/UI
FTX Mobile UX/UI

Wireframes

Once I had established the goals/features of the mobile UI/UX, I started creating low-fidelity wireframes, as Drift already had a desktop UI and many of the existing components were going to be re-utilized for the mobile UI. Opting for low-fidelity wireframes meant that I could iterate rather quickly, and discuss concepts with the team sooner, rather than spend time exploring higher fidelity concepts that wouldn't be built.

I started by taking the current desktop UI and assigning labels to the different sections. Almost all sections would be shown in the mobile UI, so it was a good way to understand how these sections would shift for smaller viewports.

Desktop UI Section Labels

After labeling the desktop UI elements, I started creating simple label and box mobile wireframes, exploring which order would be most helpful for users. I went through several iterations of these wireframes, consulting the research I had conducted on competitors as well as discussing with the team the optimal order of information they would use in their trading.

Early Wireframes
Early Wireframes

Many mobile experiences include long sections of scrolling content, often without context. It's important to provide helpful information whenever a user might be in a particular section of content. This is where position: fixed elements become helpful (such as a navigation bar, and/or support buttons). With limited screen sizes, however, there are only so many elements that can remained fixed as a users scrolls through content. Using position: sticky allows for select elements to follow users' scroll behavior but only for a selected portion of the screeen, moving out of place when a user advances to the next section. These principles of element positioning were going to be very helpful when designing the Drift mobile UI/UX.

Figma, Sketch, Adobe XD, and other UI/UX design applications allow for interactive prototypes to demonstrate position: fixed behavior - making it easy to convey concepts to team members before developers construct the UI. However, what is not commonly supported in these applications, is the ability to demonstrate position: sticky functionality within prototypes. As such, I denoted the position: sticky behavior within the Figma document. Additionally, I created what I refer to as "scrolled views", which denote how element(s) become sticky once scrolling down the page/screen. This method of design gives clients a better understanding of how this behavior would be experienced by users, without needing to code up a prototype for the demonstration.

Sticky Headers Overview in Figma
Sticky Headers Overview in Figma

Following the team's feedback after the initial wireframes, I continued to refine the low-fidelity wireframes into a more polished UI. It was from this base that I developed the application.

Drift Mobile UX Drift Mobile UX

Final UI

After working in the development environment, testing various font sizes, color combinations and layouts, I completed the finalized UI designs, which can be seen below.

Drift Mobile UI Drift Mobile UI
Drift Mobile UI Drift Mobile UI

Web Development

Drift Protocol is a ReactJS web application, utilizing Tailwind CSS for front-end component design, written in TSX. For the mobile UI/UX, I focused on the md breakpoint and below, with viewport size of 768px and smaller receiving the revised layout. The idea for selecting this size was that smaller tablets/browser windows should still be able to have the updated Drift experience.

Local Development Environment in Sublime Text
Local Development Environment in Sublime Text

Reception

The mobile UI/UX was very well received by both the Drift team as well as the community. You can view the launch video and Twitter announcement here. It was an absolute pleasure to work with Drift to bring the first mobile UI/UX to it's community. I look forward to the future of the platform.

Official Feature Launch Twitter Announcement
Official Feature Launch Twitter Announcement

Like what I did for Drift?

Get in touch and let's
discuss working together.