Case Study: Coinbase UX Redesign (2024)

So this is actually the very first Case Study I ever did, back in 2021. This is the one that started my pivot into UX/UI design. Well, actually it’s a revision of that case study. It follows the same principles but I updated the mock-ups once I got more comfortable with design tools.

I decided to transfer it on my Medium page because Coinbase actually came to a similar conclusion as I did, and updated the app in a similar fashion as I proposed in this case study.

Make sure to stick around until the conclusion to find out the similarities and differences between my designs and the changes the Coinbase app implemented.

Introduction

During the rapid evolution from a Bitcoin trading platform into the powerhouse that powers the broader crypto economy, Coinbase has added a lot of features. And it is well-known that features add complexity to a product.

The purpose of this UX redesign project is to see how the added features have affected the usability of the Coinbase mobile application and to improve the user experience without harming the integrity of the product.

It is important that this redesign doesn’t interfere with the business goals of Coinbase and helps improve key performance indicators, specifically revenue and trade numbers.

RESEARCH

Product research

In order to not lose sight of the application’s integrity during a redesign, it’s important to understand the problem the application is solving and how the application solves that problem.

→ Coinbase is a trading platform for Cryptocurrencies. It powers the crypto economy. People buying and selling assets generates revenue.

→ Coinbase is a place where people discover crypto, learn about crypto and get into crypto for the first time.

The current design uses bottom navigation and a four page setup, while some less important features and the features that are aimed at power users can be accessed via the side menu.

The four main pages are the Home page, the Assets page, the Trade page and the Pay page. The Home page holds shortcuts for the most common user actions, show the users’ watchlist, some market trends and articles with the latest news in the industry. It’s worth noting that these quick actions are at the top of the page, which isn’t always as easy to reach.

The assets page consists of a graph that plots the total user assets over time, a list of the users’ assets, and sections that provide the users the option to grow their balance or set up recurring buys.

The Trade page ironically doesn’t have the quick actions to buy, sell or convert cryptocurrencies. Users are forced to take an additional step either by going to the Home page and using these quick actions, or by going to an asset’s detail page and starting an action from there.

The Pay page gives quick access to send or receive crypto. These quick actions are found at the bottom of the page and have good accessibility. The page also shows a log of recent transactions.

A recap of the features:

• Buy, sell, send, receive and convert crypto assets
• Add cash and/or cash out
• Manage your assets
• Follow assets and the market in general
• Learn about assets
• Read relevant crypto news
• Earn rewards
• Earn yield
• Manage recurring buys
• Referral program
• Connect Coinbase Wallet

UX research

The main focus of this UX case is a redesign of the mobile application based on how users interact with the application, what they’re trying to do on Coinbase and which features they use and don’t use to achieve their goal.

A survey determined the user goals while usability testing coupled with depth-interviews and card sorting helped gain insights in user behaviors and their mental models.

→ Most people open Coinbase to check on their assets and see how they performed.

→ Most people buy more of what they already own or have on their watchlist.

DESIGN

UX redesign

The user research — and card sorting in particular — resulted in a design with 5 main pages that group the most used features and the features that are integral to Coinbase. All pages flow into each other based on the users’ mental models.

The less used features and more advanced features are moved to the side menu. Depth-interviews also resulted in the addition of a new feature: contact list management.

The Trade, Transactions and Discover pages cover all features intrinsic to Coinbase, while the Dashboard and Assets pages are designed specifically to help most users achieve their goals as easily as possible.

→ Most people open Coinbase to check on their assets and see how they performed.

→ Most people buy more of what they already own or have on their watchlist.

Dashboard page

People visit Coinbase mostly to check on their assets, and people tend to buy more of what they already own and know.

The new homepage, now Dashboard, gives users a quick overview of their top assets and makes it easy for them to buy more. This is a non-scrollable page that shows only the essentials for quick, at-a-glance information.

→ Focus on your top 5 assets and top performers.

• Interacting with the View all button takes the user to the Assets page.
• Interacting with an asset directly takes the user to that asset’s detail page.

→ Visual comparison between the user’s top 5 assets and the general crypto market.

• Advanced graph features for power users.

→ The Dashboard page can switch between user-owned top assets and the top assets on their watchlist.

Assets page

The Assets page offers users a more in-depth look into their assets, balance, watchlist and market trends.

→ Visual presentation of the user’s balance over time.

• Advanced graph features for power users.

→ Expandable lists of the user’s assets and watchlist.

• Interacting with the View all button expands these lists.
• Interacting with an asset opens the detail page for that asset.

→ Horizontally scrollable lists of the top performing, most in-demand and most sold assets on Coinbase.

• Interacting with an asset opens the detail page for that asset.

High-quality details

The difference between a good user experience and a great user experience is the level and quality of the details and animations. These details have to be well thought-out and have to add to the general functionality and experience.

App navigation menus

The redesign proposes a unique new bottom app navigation menu to give the users easy access to frequently accessed features. This menu has adaptable icons for pages that allow specific actions.

• When users are on the Assets or Discover page, the corresponding icon changes and allows quick access to the search interface.
• When users are on the Transactions page, the icon changes and interacting with it opens the transaction setup interface.

Another stand-out design detail in the app navigation is the Trade button. It is an adaptable colored call-to-action button. It’s slightly bigger than the other menu items and takes a more prominent position. When users scroll through the pages, it drops back in line with the rest of the navigation menu items so the users can focus on the content of the page.

The new top app bar design is interactive as well. It now shows an indicator when the user is scrolling through a page. Interacting with this indicator or the page name jumps back to the top of the page.

The top app bar design gets an additional feature on the Assets page. It is a current Coinbase design feature that gets extended from a very specific use case to a page wide feature. When the user scrolls down on the Assets page, the user’s overall balance gets displayed at the top app menu instead of the page’s name.

Personal experience

Software should know its users and should feel personal to them. This is reflected in small details like the graphs remembering the time period to plot your graphs against and which assets the users have plotted and which are hidden on the Dashboard page.

It’s also visible in edge cases when users don’t own enough assets or haven’t added enough assets to their watchlist to make a top 5.

On Android devices, making the experience personal also includes Material You color science.

Animations

• The Trade button in the bottom navigation menu gets smaller and moves down to fit in between the other navigation buttons, when users start scrolling down. It returns to its original state and position when scrolling up.
• The scrolling indicator at the top of the page fades in when scrolling down beyond a specific point and fades back out when scrolling up past that point again.
• The Assets page name disappears while your balance appears when scrolling down beyond a specific point. When scrolling up past that point again, the balance disappears again while the page name re-appears.

LEARNINGS

UX Research

I got to learn more about the different aspects of UX research, including competitor analysis on Mobbin, setting up surveys both to gain insights on what the potential problems of a product are, as well as surveys to identify the right people for in-depth qualitative research.

The qualitative research consisted of a focus group, which included a card sorting workshop, and individual interviews combined with a usability test.

Paper + Figma

This case study also offered me another chance to do a deep-dive in the design software, but it all started with working on paper. This allowed me to make some low level wireframes and see how the pages interact with each other before settling on a final design.

The process

So, the one thing I would do differently, except for potentially trying out new methods for the research or brainstorming workshops, is creating UX research deliverables. I chose not to create user personas or journeys because I was the only stakeholder involved in this case study.

However, I do know the importance of the research stage and would take some time to create templates for UX research deliverables that could be used for multiple projects.

Conclusion

Like I said at the top of this post, I decided to put this case study on Medium because of the direction the Coinbase App went in and the similarities it shows with my designs.

Coinbase’s core business is being a trading platform for the crypto industry. And my design puts the trade button front and center. Users can start trading from anywhere and any screen in the app.

Coinbase did something similar and updated the trade page to include the quick actions to start trading. they simplified it by emphasizing the three main actions: buying, selling and converting cryptocurrencies. Just like in my designs, access to this page takes a prominent position in the center of the bottom navigation menu.

They also decided to move the content around a bit and included a new Explore tab, which serves a similar purpose to my proposed Discover page.

The big difference is that they made it an entire separate page that gives access to the trade actions and the users’ transaction history, while my vision and design has it as a call-to-action and has the users’ logs on a separate page.

I included a later iteration of this bottom navigation menu and the trade action below.

Another difference lies in Coinbase’s inclusion of a separate page for everything related to earning crypto (via rewards and staking).

Staking crypto and earning yield was just coming up and still considered a pro feature when I first did this case study, but I definitely think this is a good call by Coinbase from a business perspective and I would do something similar and move the transaction logs to the side menu.

I want to finish the conclusion by mentioning that my concept for an interactive bottom navigation menu has actually been tested and implemented by Snapchat after I did this case study.

The camera screen, which still is the main function of Snapchat, switched up the bottom navigation to hide the lenses under an icon where users expect the active page’s icon. This fits in perfectly with their view on gamification in UX design and is similar to how I would add the “Search” shortcut to the icons in the navbar.

They like to switch up their design every so often to keep it fresh and interesting for their young userbase and have since switched again to another layout.

That’s it for this case study. For me personally it’s been interesting to come back to this case study and compare it with the actual evolution the Coinbase mobile application went through since.

Feel free to ask questions or give some claps (try holding down the icon) if you liked it.