MINT MOBILE
2020
Establishing the Dark Mode Palette for Mint Mobile's App
Mint Mobile provides customers a mobile app that allows them to easily manage their cellular plan on their phone. Customers had been requesting a Dark Mode version of the app for a while, and I was tasked with modifying the existing Light Mode color palette into a Dark Mode scheme. I was the sole designer for this feature, establishing Mint Mobile's very first Dark Mode design system. I worked closely with Product to facilitate discussions with app developers about design feasibility and programming limitations.
This Dark Mode palette was implemented in the Mint Mobile app in February 2021.
The TL;DR
Role
UX Designer
Timeline
June 2020 (1 month)
Launched in February 2021
Platforms
Mobile
Context
Mint Mobile looked to introduce Dark Mode to their iOS and Android mobile apps.
Problem
Mint Mobile's brand identity often relies on bright colors, which introduced challenges when translating them into a Dark Mode palette.
Solution
Working with Product for the mobile app, I successfully shipped a Dark Mode palette that maintained the essence of Mint Mobile's brand.
CONTEXT
Why we created Dark Mode
Background
Mint Mobile's mobile app is the primary way customers engage with and manage their cellular plans. In 2020, the app team noticed Dark Mode gaining traction across web and mobile design trends. Wanting to keep up with emerging trends, they approached the design team to request Dark Mode explorations, so the app can stay aligned with industry trends and keep the brand's tech-forward identity.
Ownership
Each member of the design team explored several concepts. In a stakeholder review, my Dark Mode palette explorations were ultimately selected. From there, I took ownership as the sole designer on the project.
How Might We…
create a Dark Mode design system so that it thematically matches the brand’s design guidelines, while maintaining readability?
SOLUTION
Shipped screens
Final designs
Once I received final approval about the color scheme chosen for Dark Mode from the app developers and project stakeholders, the Dark Mode color palette was successfully implemented into the Mint Mobile iOS and Android apps.
PROCESS
Balancing colors with brand assets
Researching best practices
Each member of the design team explored several concepts. In a stakeholder review, my Dark Mode palette explorations were ultimately selected. From there, I took ownership as the sole designer on the project.
Problem
I noticed both designs used a pure black background. I originally opted to follow a similar color scheme, but quickly realized our brand’s mascot - the Mint Fox - has arms and feet that are pure black in color.
Action taken
I noticed both designs used a pure black background. I originally opted to follow a similar color scheme, but quickly realized our brand’s mascot - the Mint Fox - has arms and feet that are pure black in color.
Early background color explorations, testing a dark background against the Mint Mobile fox illustration.
Managing bright color assets
Challenge
I faced a challenge with translating the Light Mode color palette to Dark Mode, as the app used many vibrant colors (such as orange and green-blue gradients).
Action taken
I originally did not want to sacrifice the brand’s color palette, so I looked into ways to preserve the bright colors. I referenced Apple’s Dark Mode designs, and how they utilize transparency for bright colors to allow the dark background to show. Another option was to remove the bright colors and substitute with the main Dark Mode background color. This would provide a consistent viewing experience.
Outcome
Ultimately, the project stakeholder’s asked to use the main Dark Mode background color in place of screens where vibrant colors were used to fill the entire background. For smaller assets, I kept the vibrant colors in place.
Style Guide I created for Mint Mobile’s Dark Mode.
Managing third-party assets
I designed a contextual overlay that surfaces the show's logo, genre, season count or runtime, and content rating directly above the "+ My List" and "Skip" buttons. An entrance animation draws the eye toward the CTA area as the overlay appears.
Adhering to American Express's logo guidelines
As I was reviewing each brand’s logo guidelines to research if they had Dark Mode compatible logos available, I came across American Express’s logo guidelines and discovered that our app had been using the wrong logo style for its pixel size.
Outcome
I provided a recommended fix to the app developers, showing them images of the official American Express icon rules from their logo handbook.
Screenshot of the Figma file I presented to developers and stakeholders.
Screenshot of the Figma file I presented to developers and stakeholders.
Legality with third party logo assets
An issue with brand logos in Dark Mode was that their logos could not visually work with Dark Mode (due to loss in visibility). I created 2 workarounds for this:
Translate logos to an all-white palette
Opt to add a white background to the buttons
While Option 1 provided a better visual workaround, I voiced my concerns about the legality of changing colors of external brand logos.
Outcome
Option 2 was selected and implemented in Dark Mode’s launch.
HANDOFF
Providing a guide for knowledge transfer
Maintaining documentation
Throughout the design process, I created, documented, and organized all assets changed from Light Mode to Dark Mode.
Transferring knowledge to new hires
I was tasked with a knowledge transfer of my work to a new design hire, 6 months after its initial completion. I walked the new designer through navigating the file and how to use the Dark Mode toggle plugin connected to the file’s library. It was helpful having prior documentation already ready, so that it was easy to go back and reference my own work in the past. I believe it’s always good practice to document your work — you never know when you might have to reference it again later!
OUTCOME
Praise for Dark Mode
The rollout of Dark Mode was met with praise from Mint Mobile customers on Twitter and Reddit. Most notably, Stetson Doggett, owner of BestPhonePlans.net, commented on Twitter about the new color scheme.
As an added bonus, the engineering team at Mint Mobile also let me know that they themselves also adopted Dark Mode as well!
REFLECTION
Final takeaways
Communicating with developers
I couldn’t have succeeded in this project without the help of the app developers. They provided me so many helpful insights about the constraints with building out a new color palette, which allowed me to pivot my design decisions early. I learned that any programming constraints should be identified and addressed early, and often.
Design with the platform in mind
This project had me frequently think about how color may affect visibility on smaller assets, such as tiny legal text. In these situations, I thought about the mobile form factor, and opted to brighten the legal text so that it remained legible even on a small device.
Tackling a UI-focused project was a refreshing new experience
Prior to this project, I was mostly preoccupied with features that focused more on interaction design, rather than visual design. With this Dark Mode exercise, I learned that visual design can play just as much of a key role in the experience of a product.