Primo Water
Project Overview
We were approached with the task to create a style guide and design system for emails to help with consistency, along with a new email layout. PRIMO Water was in the middle of a rebrand when this started, and while reviewing some of the rebranding work we noticed there may be some ADA issues. We took it upon ourselves to dive into the rebranding and identify the areas of issues and provide solutions on how to make the creative ADA compliant.
Branding
ADA
Email Design
Marketing Strategy
User Experience
BRANDING
Email Style Guide
We wanted to have the email style guide be an extension of PRIMO’s larger style guide, to help keep email design simple, and help prevent confusion or information overload. It covered which fonts, colors, and logos to use.
DESIGN
Email Design System
We built a living design system in Photoshop so that we can drag and drop components for quicker design turn-arounds, and better consistency no matter who is designing what email. The design system includes everything from typography, CTAs, how to display secondary logos, hero and body components, and a header and footer.
ADA
Compliance Consulting
After showing concern over contrast ratios we took it upon ourselves to dive deeper and figure out which color combinations passed ADA, which colors looked best together, how it would look with current creative, and then presented our findings.
Color Combinations
We started out by testing all nine colors with each other to see which ones past contrast ratios. These are the ADA-Compliant color combinations we recommended using.
*River - Only Large Text & Graphic UI components pass ADA.
ADA COMPLIANCE
Color Exploration
After figuring out which colors worked best together, we took one piece of creative and explored various color options. The client originally preferred Stream Blue. However, It does not work on white and has the fewest colors that would work on it. After exploring many options, we took the four top color combinations (one design of each Mist, Stream, River, and Lake), and decided to stress test them to decide which options worked best across all creative.
USER EXPERIENCE
Stress Testing
We built out each color theme in order to see how they worked as a family. The Mist theme was able to use the most color combinations, leaving more flexibility in the design. Stream could only use a darker font on top. Lake felt too dark to represent the Primo brand. River felt the most on brand. This lead us to push forward with the Mist and River themes.
We built out these two themes in a variety of applications and platforms. We tested how logos would appear on the color, How app icons would look, along with emails, internal app screens, webpages, social media, and more.
SEE MORE WORK
