Coinbase — Miami
I had the wonderful opportunity to work at Coinbase as a Product Design Intern in the Summer of ‘22. I was a part of the Coinbase Wallet team and primarily contributed to the colour strategy (Miami) for the crypto app.
What is Miami?
Miami is the name of the colour style created by the design foundations team. It was designed specifically for Coinbase Wallet to distinguish it from the Coinbase Retail App which primarily uses the blue colour. Although it was well received by users, the problem was that Miami existed only in an onboarding animation, wasn’t seen anywhere else in the product and lacked documentation. This created a visual disconnect for Coinbase Wallet users.
Burst of colours, a visual style designed specifically for Coinbase Wallet by the design foundations team
Symbolic of a gateway to web 3.0 which encourages excitement
Miami helps to visually distinguish Coinbase Wallet from the Coinbase Retail App
MY ROLEHow might we introduce more Miami into product to make the experience more cohesive? → Theme Colors & QR Codes
The existing app offered 5 theme colours to choose from. Once selected, they changed colours across the whole product.
Why were Theme Colors introduced?
In Web3, self-custodial products like Coinbase Wallet should not be about Coinbase but about the identity of the users. How can we achieve that? By offering more personalization to our users like picking theme colours!
Offering more Theme Colours was also important from a multi-wallet POV where users could colour code different wallets.
Before jumping into design, I created some parameters that would drive the overall colour strategy.
1. Accessibility Test
Creating accessible products was our topmost priority. Making sure that a theme colour has high colour contrast and passes the accessibility test was fundamental.
2. Stress Test
Checking whether the theme colour has enough contrast when placed with a CDS Negative component. This is called the stress test and it must be done for both, dark and light modes.
3. Dark/Light Mode
Existing theme colours go slightly darker for accessibility on light mode. It would be nice to have the same theme colour across both modes for consistency.
4. Miami Colours
Miami colours were only seen in illustrations. That’s why it was important to align theme colours as closely as possible to Miami colours to bridge the visual gap between product components and illustrations.
I started exploring by playing around with brand colours, tints, tones and gradients.
I was curious to see if colours changed from dark mode to light mode on other apps as well and discovered that they did. I wondered how this could be fixed.
I found out that it’s possible to have consistent theme colours across dark and light modes with a few tweaks. We would have to switch our coloured active tabs to neutrals such as white and black. This option was good but felt like we were moving away from Miami.
I tried an angle where we completely lean into Miami and own our vibrant gradient.
We could still incorporate blue to associate with Coinbase as the parent company.
The above strategy could be successful but theme colours were still needed for multi-wallet support. I relooked the Miami gradient and derived Miami Solids. This helped me discover that existing theme colours didn’t match Miami Colours.
What this meant is that colours across the app, i.e. theme colours, product components and illustrations were not consistent.
EXISTING THEME COLORS
MIAMI COLORSThe final result of this project was a set of Miami-inspired Theme Colours that are —
✓Accessible
✓ Pass the Stress Test
✓ Consistent across Dark and Light Mode
✓ Align with Miami Colours
QR Codes
With Coinbase Wallet’s dark mode first approach, the existing QRs looked odd on a white background and created a visual disconnect from Miami. I worked closely with engineering to transition these QRs to Miami. The final result was a visually distinct set of Miami QRs that could accommodate crypto assets from the entire colour wheel.
EXISTING QRsMIAMI QRs