№ 1. The Lumosity Color System

Welcome! Join me through the process of developing a more inclusive, accessible, and comprehensive color system for the Lumosity brand and products

About Lumosity

Lumosity is a mobile and web brain training program with over 85 million users around the world, designed and built to help people feel more confident in their cognitive abilities.

I worked at Lumosity full-time for three years as a Visual Designer and Illustrator, working closely with both the Product Design and Marketing teams. My work there included end-to-end product design, continuously evolving and expanding our illustration and icon systems, leading design on several marketing campaigns, and driving a number of brand and design system projects.

About the Project

Lumosity’s brand color palette — unchanged since 2012 — was no longer cutting it for the scalability, accessibility, and inclusivity we strived for in our products. The palette was far too limited and didn’t fare well in accessibility tests, leaving designers often having to create new custom colors. There was no source of truth, our code bases were full of duplicates and inconsistencies, and the problem was growing with each new hire. 

Largely a self-initiated project, I took on the task of fixing these longstanding issues — refining and expanding our palette into a comprehensive new color system that reflected our team’s workflows and goals in 2017.

I owned every piece of the process — from choosing the colors themselves, to accessibility testing, to pitching to colleagues why this not-top-priority project was absolutely worth our time. I frequently consulted with our Design Director and Creative Directors throughout the process to ensure that their teams’ needs were being reflected in my work.

Auditing the Situation

I began this process by going page-by-page through our entire app, website, and game library and recording every unique color I came across. The result was almost hilariously out of control. “How did we let this happen?”, we’d defeatedly laugh to ourselves each time I walked a new teammate through the audit.

For many brands, the answer here would be to define a very restricted palette, go through and fix the inconsistencies, and promise not to stray away again. This was simply not an option at Lumosity: our games had to meet color contrast, color blindness, and legibility standards that required stepping outside the original palette frequently, and all of our marketing had to match our games. On top of that, the technical cost of editing and reshipping games was far too high to be feasible. This meant that we had to work with what was already there and develop a new system for moving forward that wouldn’t feel out of place with the older stuff.

Presenting: The New Rainbow

I started by determining all of the core primary color values — using existing palette colors where possible and overlaying to find the averages of the new colors that weren’t in the palette at all before (like green and purple). Establishing existing palette colors as the primaries and then building off that meant that nothing in our apps had to be changed; this was simply a system we could grandfather in on new features. All old screens would still be on brand and still feel consistent with the new ones. 

From there, I added in a spectrum of tints and shades, keeping darker shades from feeling too muddy by adding a touch of red and keeping lighter shades from feeling too pastel for our brand by adding a touch of yellow.

Ta-da! So many colors! But also: so many questions. Would engineers hate us if we showed up with this massive new palette? We really wanted them to be on board with the updates. Speaking with engineers on various platforms, they preferred an extensive color system that we’d never stray away from over a more limited one that would require custom colors to be added later.

More existentially: if our brand palette is literally the entire rainbow, is it actually a brand at all? We concluded that, yes — as long as our two primary colors (orange and blue) remained our primary colors — we could add in the whole dang rainbow and Lumosity would still feel like Lumosity.

More Accessible and Inclusive, By Design

Our old palette had four colors that passed white text contrast test; the new palette has over 20.

Another problem that was repeatedly surfacing with our current palette was an embarrassing lack of diversity when it came to the humans in our illustrations. To address this, I also developed a spectrum of hair and skin tone colors and tested that they contrasted well over a variety of background colors from the new system.

From there, I created a library of racially diverse and age diverse avatars that anyone on the team could easily and quickly implement into their designs. While there’s of course always more progress to be made, I’m incredibly proud that, today, the Lumosity brand as a whole is far more inclusive — in part because of those efforts.

Getting the Team On Board

Lumosity’s creative team had 20+ members from a number of both design and non-design backgrounds, and I wanted to introduce the new color system to the team in a way that’d leave them feeling both excited to begin using it and confident in their ability to do so.

Our creative team held weekly skillshares, in which one person would lead a workshop based on their field of expertise. I utilized this to introduce the palette to the team through a short activity: a digital coloring book comprised of grayscale Lumosity illustrations and a series of prompts that could be done with or without any color theory knowledge.

The new color system has been enthusiastically embraced, and has been improving consistency, accessibility, diversity, visual interest, and company headaches in our brand ever since.

[unex_ce_button id="content_bhnuro263,column_content_a6mg89k29" button_text_color="#ffffff" button_font="bold" button_font_size="28px" button_width="auto" button_alignment="left" button_text_spacing="0px" button_bg_color="#000000" button_padding="5px 20px 10px 20px" button_border_width="2px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#000000" button_text_spacing_hover="0px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="https://www.semplicelabs.com" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]read more case studies[/ce_button]