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.
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:
- Get a functioning mobile experience developed quickly, to gauge user interest
- Reach the largest portion of the user base
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.
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.
Binance (Pro)
Binance US
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.
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.
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.
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.
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.
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.
Web Development
Drift Protocol is a React 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.
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.
