Redesigning the deposit page for a crypto exchange platform
It’s been a while since I wrote anything, having a baby changed a lot of things and included a ton of unpredictability. It’s been a great deal of joy and a series of constant challenges that called for quick wins and iterated solutions. Sounds like my everyday experience as a UX designer.
Anyhow, I’ve been doing some reflection on my projects while at OKX. I was initially assigned to focus on the mobile app and the website’s asset, deposit, and withdrawal user flows. The most exciting design updates that I worked on was about the mobile app deposit page details that allows people to receive their crypto asset in their wallet.
Before redesign
I performed a UX Audit based on usability heuristics for user interfaces to find usability issues. After sharing the findings to my product team, I prepared a list of enhancements that we could work on and some that needs further research.
We focused on the app given that most people are using mobile apps. The product team has been trying to tackle user pain points by improving the design.
This is a rough list of components in the OKX app deposit page:
- A header with title, back button and an icon for deposit transaction history.
- A card that shows the selected coin and the supported networks.
- Another card that contains the deposit address in QR code, CTAs for saving the deposit address as a QR code, one for copying the actual deposit address, and memo/tag button if any.
- A list of related notes.
The existing deposit page seems pretty similar when compared to Binance and Huobi. I wondered how this status quo design came to be. On one hand, Jakob’s law states that it is a good thing to have a similar interface compared to the other interfaces that people spend most of their time on because they expect it to work the same way.
On the other hand, there is also a high chance that users are also experiencing the same pain points on other competitor apps. Crypto is still quite new, and a lot has not yet been established. Having been a part of OKX meant having the privilege of finding design solutions for crypto exchange users.
The existing web version was also considered. When comparing to the web, the app didn’t feel like it had a similar user flow. The web looked something like this:
It was important to make the app and the web versions have a similar user experience. If I remember it right, the web version did not pre-select any network after a coin has been selected from a list. This was one source of inspiration on how the app version was redesigned.
Here are some of the usability issues, correlated to user findings and pain points:
1. Aesthetic and minimalist design
It’s not about making things look less, but making people focus on just-in-time content. This means, reducing the noise and showing what is only needed for people to help people go through their task of getting the deposit address.
From where I started, the ‘Save QR code’ button was more prominent than the ‘Copy address’ text link button. The main task on this page was to get the deposit address. I started to wonder which CTA do people tend use to get the address, the QR code or the long address?
User Findings
At that time, user research was not as mature, and I had to perform quick usability testing by observing if online user testers were able to complete the task of copying the deposit address. During observation, the participants were asked to make a deposit, it turned out that people click the ‘copy address’ button more.
Solution
I then discussed with my product manager. One design iteration that I explored included removing the ‘Save QR code’ button to make people focus with even less clutter. At that time, the product team decision was to retain the ‘Save QR code’ button and did not continue with the option of hiding or removing this button.
In order to improve the visibility of the copy button and the actual deposit address, I decided to put more emphasis to the ‘copy address’ text link by replacing it with the primary button in the design system.
2. Recognition rather than recall
Cryptocurrency can be deposited in an exchange platform through the networks that it supports. It’s easier for people to recognize a network than guessing if there is some other networks hidden somewhere.
User pain point
In the mobile app, people cannot always see the other supported networks in the deposit page. The networks are displayed using small tabs, and some were hidden on the right side of the card until people swipe all the way to the left. It is imperative that a user always see the supported networks. A user needs to choose the network that matches the network that they will use from their withdrawal platform, or they could lose their coins.
Solution
In the web version, the small tabs were used to show all the popular coins to choose from and it worked because there was more space. But in the mobile app, the small tabs were used to display supported networks.
Not all coins support the same networks. The goal was to ensure people see all the supported networks with ease. I also wanted to avoid any perception of a dark UX design. Using a network to send crypto asset will cost a certain transaction fee, and not all networks cost the same. I wanted to avoid the perception that the app tries to overcharge by seemingly showing networks that might cost more than the hidden ones. Based on the said considerations and the available web design, the new design replaced the a drop-down list that showed all the networks supported in the platform.
3. Error Prevention
User Research
I was not sure how the text links and the actual deposit address in centered layout were being gazed upon by the users. I didn’t have the opportunity to perform a user research at this detailed level, so I leveraged on the user research findings by NN/g. It was found that people spend most of their time viewing the left half of a page and the remaining 20% on the right half. In my observation, most users were able to find the ‘copy address’ button, which meant that people had no trouble finding the CTA.
Also, the text links for ‘Deposit address’ and ‘Copy address’ looked like they are of equal emphasis. My hypothesis was that improving the layout and hierarchy would help eradicate any possibility that user mistakenly clicks the ‘Deposit address’ text link instead of the ‘copy address’ button.
Solution
I needed to remind myself that the card containing the text links is a card component. Hence, I made design iterations based on card layouts from our design system and other design systems.
I intended to let people focus on the deposit address before they click the ‘Copy address’ button. Aside from the deposit address, some coins also have memos/tags that also needed to be copied to a withdrawal platform.
By using a left-aligned layout, the titles were placed on the top left, then the actual deposit address and memo/tag placed below the title. The corresponding CTAs were placed on the right side, where I considered people would still find it easy to reach using their thumb.
User pain points
Here were some of the other pressing issues related to app deposits:
- People end up using the wrong network, consequently making a wrong transaction.
- People always forget to add in memo/tag in the withdrawal page.
- People always ask where their deposited coins are.
After choosing a coin, a user lands on app deposit page, the network is pre-selected in the previous design. For example, USDT-OEC is already selected after USDT is selected. To lessen the difficulties that people experience while trying to make a deposit transaction, we needed to create a more fail-safe design.
My hypothesis was that people might end up using the wrong network by not doing anything on the network options area, just continuing to copy the deposit address and pasting it on the withdrawal platform. People might not know that they have to choose the same network from their withdrawal platform and include copying the memo/tag if any.
Solution
The goal was for people to choose the “correct” network that is both supported in the deposit platform (OKX) and withdrawal platform, where they will get their asset from. I suggested the concept of making people slow down on purpose and to focus on selecting a network. This was done by creating a drop-down component that has an empty state with no pre-selected network, and use a placeholder that says, “Select network”.
Aside from making the user interaction similar to the web platform, the empty state design was intended to provide an affordance for people to perform an action. People would then know that they have to click the dropdown list and choose a network before they see the rest of the deposit page.
Challenges
- Not having readily-available user research findings with actual observation made it harder to make any hypothesis and decision. This gave me an opportunity to perform online usability testing during the pandemic and to have insights to work with.
- Binance has been the golden standard for crypto users and it’s hard for a product team that is moving fast to be critical and break down the objectives of a design solution. In short, it’s hard to not copy and just get it done with.
- Early on, we did not have the luxury of working with an established design system. I had to make some components, which was later on aligned to the design system after rebranding.
After redesign and rebranding
Here are some screenshots, showing the updates after release and after reflecting the rebranded design components.
Present Design
It’s nice to see some of my design concepts are still relevant in the current design and I’m thankful to have contributed to its present form.
Learnings
Dealing with a lot of user pain points could feel overwhelming at times. It’s important to develop a system on identification and prioritization of the design issues to combat the tendency of succumbing to “just do it” mentality.
I did not also know if my hypothesis were right, which is why performing usability testing helped in clarifying user behavior and in making design decisions. And if it was not possible to do so, I leveraged findings from second-hand research.
In here, I tried to emphatize with the users by using usability heuristic principles, also collected the user pain points and then performed competitive analysis. These are all methods that were useful in making smart assumptions, which could further be observed in a user research.
Using usability heuristics made us think objectively, our product team was able to tie our solution to definitive goals and measurable metrics.
Thanks for reading! 💗
