Coinbase App Visual Design North Star

TL;DR

This was my first project as a product designer at Free Association working alongside two principal designers, a senior product director and our client’s senior product designer to define and help implement a major North Star initiative for their web app and native mobile experience.

PROBLEM

  • Coinbase had a confusing array of products bundled into different mobile and web app experiences across use cases and user types (e.g., individual user versus business) without clear principles.

  • Due to Coinbase’s exponential growth, their diversified product offerings were developing at a faster rate than their design system could handle.

GOALS

  • Define a visual design North Star that informs Coinbase’s Unified App vision to bring both individual and business users together into a shared web and mobile experience.

  • Inform the continued development of Coinbase's design system (CDS).

  • Deliver a prototype mapping to the core user segments of individuals, businesses, and institutions.

MY ROLE

  • UXR & Discovery

  • Content Architecture

  • UI / Visual Design

  • User Testing

  • Design System Management

  • Prototyping

PLATFORM/S

  • Web App

  • iOS

Reference Screens

Our team examined how the brand character showed up in the UI and the signal Coinbase conveyed globally. Our objective was to identify the narrative Coinbase intended to communicate and then determine the most effective content architecture to support that goal.

Essential, Savvy,
& Creator Community

We explored 3 territories distilled from our landscape audit and affinity map. My focus was Creator Community, demonstrating how it could show up in product.

Design Explorations

We iterated on information hierarchy and taxonomy, as well as the voice of type and color within specific components using the ‘creator community’ lens. After many rounds of feedback, we deduced our visual territory for product to ‘essential’ with borrowed elements of ‘savvy’, honing in on key areas like charting and crypto asset depiction.

Essential is about making things concise, easy to understand, direct, and clear. This is where Coinbase’s retail product and most of its competitive landscape currently lives. It is designed to invite and drive engagement for every user segment.

Bitcoin

Dogecoin

Ethereum

Bitcoin • Dogecoin • Ethereum •

User Testing Takeaways

Pros

  • Overall positive reaction regarding the visual updates to the look and feel of the product.

  • Users cited attributes such as "simple, colorful, personal, futuristic, innovative”.

  • Treatments were on-brand with users’ perceptions of the Coinbase brand.

  • Color theming avatars and labels (for multi-user accounts) as well as key asset content served as effective visual cues.

Cons

  • Apply color in a systematic way that’s consistent across product.

  • Issues differentiating some colors due to color-blindness and neurodivergence with heavy color use.

Final Designs

Coinbase Design System Checklist

  • Met WCAG 2.1 guidelines

  • Worked on all devices

  • Complied with Apple's HIG and Google's Material guidelines

  • Interactions did not compete with OS interactions

  • Worked in light and dark mode

  • Worked across dense and normal component scales

  • Internationalization-ready

Next
Next

Workrise App North Star