Dark Mode
Creating a new theme that matches the visual language of the brand, Channelfireball -
including a revision to the color design system and mapping for internal use
Role
Lead Visual Designer
Employer
Channelfireball /
TCG Player
Platforms
Web / iOS / android
Areas
Strategy, Growth, Design
Background
Due to my company’s ties with Crystal Commerce (CC), a POS inventory management system that controls the backend along with customer-facing templated design, we were constrained to build and design around their templates. Once they wanted to rebrand off that contract, the main objective was to improve foundational visual design, while still adhering to the current layout.
The brand has always been oriented towards black, and users constantly asked for a dark mode. As the lead designer, I wanted to focus on improving accessibility and industry standards that allowed every user to feel welcomed and add it on our upcoming sprint cycle, acknowledging the obstacles and constraints ahead.
I transcribed the information from light mode and tested it to make sure the breakdown was smooth.
Reiterating on the current design system strengthened the standards for visibility for WCAG.
Reiterating on the current design system strengthened the standards for visibility for WCAG.
Approach
As the lead designer on this project, I wanted to ensure accessibility and equity were up to the highest standard. My goals were to make sure this was scalable and did not conflict with incoming art and images that came with selling thousands of new products every year, that have numerous color designs.
To make sure that the design system was seamless, I needed to make sure all documentation for internal use was crystal clear. By populating the design system into the entire style guide, we were able to feel confident that even external companies that asked for our brand guidelines understood how to use both light and dark modes within the app.
I also revisited the current settings (light mode) to make sure that the design system also followed WCAG standards and I implemented those findings after plenty of attempts and obstacles, and added those definitions within the style guide as well.
Impact
We tracked metrics after launch and used Google Analytics to parse the impact of the project. We also surveyed customers from our local brick-and-mortar store and mailers to see what improvements we could make. Overall, the surveys were positive and the metrics on retention and activation throughout the app.
Content Rentention
+3.4 Minutes
User Frequency
+1.7%
User Purchases & Subscriptions
