Pediatric Branding Overhaul
I partnered with a senior digital strategist to create a new color palette for the pediatric service line due to accessibility concerns.
THE PROBLEM
The original color palette for the pediatric service line consisted mainly of pastels. This caused accessibility concerns as most swatches failed color contrast requirements when evaluated with white text. Also, because of the nature of the pastels, the palette lent more towards newborns and infants rather than treating children up to the age of eighteen.
Analyze current state
To begin, we first evaluated the color contrast ratios for each swatch in the palette with white text. The websites leveraging this palette were pediatric clinic sites that primarily used white text on a colored background.
Within the primary palette, the colors blue, lime and pink all failed while lilac, the main color, was only AA compliant at large text sizes.
The secondary palette, which consisted of crimson, orange and yellow, came from the main corporate palette. Because these colors were used elsewhere, we were already aware of their scores and that orange and yellow would need to be used for elements that did not convey information. An example of acceptable use would be an aesthetic graphical element on the page.
Establishing The Goals
-
Fun + Bright Palette
One main goal was to move away from the pastel palette, that only catered to infants, and replace it with saturated colors.
-
Make it Accessible
We needed to quickly establish a new palette and update our websites to make sure they were accessible for all. Most UI elements were using non-compliant colors as their background.
-
"Young at Heart" Typography
Find a new typeface that still evokes the “childlike” feel while being easier to read in digital spaces.
Trial Colors + Refinement
I teamed up with a senior digital strategist to brainstorm various color swatches and combinations. Once we got to a particular palette we felt was cohesive, we tweaked each color slightly to make sure we were in good standing with color contrast ratios. While brainstorming, we determined there were certain colors we needed to have:
Purple — Since the primary color for Novant Health is Aubergine, we needed to have a purple tone that had a nod toward aubergine but wasn’t as jewel tone and felt more kid-friendly
Blue — We knew we needed a blue in the palette and wanted to try to stay away from teal as much as possible as to not cause any confusion with competitors.
Launching the New Palette
After a lot of deliberation, we landed on a new color palette for the pediatric service line. The palette consisted of 5 compliant shades including orchid, azure, jade, sunset, and ruby. We also included 3 additional shades, aquamarine, lime, and amber for graphical elements.
IMPLEMENTATION
Stakeholder Approval + CSS Updates
Once print designers and the brand manager approved the new palette, I began updating CSS for our pediatric clinic site skins. The clinic sites use DNN for the content management system. I copied the current site skin and made the CSS adjustments to the new copy. Once we were happy with the new color updates, I updated the code from the copied skin to the original.
