Overview
Coinbase has built the world's leading compliant cryptocurrency platform serving over 30 million accounts in more than 100 countries. With multiple successful products and their vocal advocacy for blockchain technology, they have played a major part in mainstream awareness and adoption of cryptocurrency. Coinbase Pro is a US-based crypto exchange designed for the more advanced trader with information, tools, and access to trade cryptocurrencies on the go.
My Role (Personal Project)
UI Designer, Interaction, Visual Design, UX Research
Reasons for a Redesign
The current web app is difficult to use, often complicated, and can appear fairly intimidating for many users.
It does not offer seamless mobile user flows and interactivity.
Unseasoned investors need an uncomplicated interface to find what they need in order to buy, sell, and manage their account wallets with confidence.
Goals & Solutions
Create a dashboard for the homepage with a watch list section.
Enable a bold clearly marked trade button on each cryptocurrency page.
Redesign how the user can view their cryptocurrency activity on pages.
Restructure the user flow to access account deposits and withdrawals.
Redesign web app with more intuitive interface interactions.
Users & Audience
Meet Chris
An investor for a number of years but fairly new to the world of cryptocurrency. He started trading crypto less than a year ago.
He needs a way to easily track Bitcoin, Ethereum, and other altcoins that he’s interested in and have access to different tools and information to keep him informed so that he can make quick trades on the go.
User Stories
“As someone who is constantly looking for buying opportunities, I would like to create a watch list of top coins that I am interested in to easily keep track of.”
“As an investor, I want to buy crypto with cash, so that I can own a crypto of my choice.”
“As a savvy trader, I want access to my coins history, so that I can track my investment activities.”
“As a money-conscious investor, I want access to my account history, so that I can track all my money investment activities.”
User Flows
Some new user flows I added to the existing web application was replacing the home screen with a ‘home dashboard’ with a ‘watch list’, updated the ‘view order history’ page, redesigned the ‘buy’ screen, and added an ‘account history’ page under settings.
Low-Fidelity Wireframes
After making a sitemap to include new user flows, I created low-fidelity wireframes to quickly map out what screens could look like.
Grids & Grayscale Mockups
I used a 12 column grid with an 8px gutter in an effort to build on the rule of 8’s.
Visual Hierarchy & Spacing
Using this rule of 8’s throughout the design helped to keep everything consistent—while allowing flexibility when scaling blocks of content.
Setting up the Brand Style Guide
Interactions & Gestures
Responsive Sizes
I sketched out some ideas of how I could approach the responsive breakpoints from my mobile-first design to flow into a desktop and tablet.
I adjusted the 12 column grid layout with responsive breakpoints for desktop and tablet screens. Below are examples of the final mockup screens.
Before & After
This is how various components and screens looked before and after I designed them.
Final Design
Coinbase Priorities are 01. Be The Most Trusted and 02. Be the easiest to use.
I dived right into the core values of Coinbase Pro to bring an interface that could allow investors with different skill levels the opportunity to enjoy effortless tracking and trading of cryptocurrencies. I also studied other crypto exchanges in an effort to capture the most valuable strengths for the Coinbase user.
Check out the prototype in action below.
Reflections
Visually, I aimed to achieve a familiar Coinbase Pro appeal with subtle overall tweaks to the web app interface design to make it easier to use. The existing dark theme with vivid bright colors served as inspiration for the color palette. I wanted to avoid changing too many elements in an effort to stay consistent with the current branding. During the redesign of the UI, I discovered accessibility issues with the contrast of the palette and made modifications using certain color combinations to add depth.
Next steps is to conduct more user testing.