Earnest Brand + Design System

Led development of the Earnest brand system to reflect market research findings and cascade the new styles across audience touch points. Brand implementation focused on web and digital marketing as the primary format for interaction with the Earnest audience.

Provided creative direction for designers, developers, and external parters to consistently communicate and promote the Earnest brand.

This includes creating visual styles that leverage user research and data analytics to target the brand audience. Implementation of the new identity includes a new code based web design system, rollout of that system across the marketing website, digital product UI components, and a variety of marketing collateral across web, social, email, advertising, events, etc.

In conjunction with the new design system, new documentation was developed to foster its use by both designers and web developers. This includes a web based style guide and component and resource libraries.

Led cross-functional collaboration between design, UX research, marketing, and engineering teams to maintain brand consistency and incorporate analytics into continued website iteration, AB testing, and experimentation.

 
 

Brand Guidelines

One fundamental need for this project was development and documentation of brand pillars in one centralized location. A web based style guide was created to ensure scalability and ease of maintenance over time.

This includes definition of styles and usage guidelines for: a new color pallet, logo usage, iconography, illustrations, photography, and typography.

In conjunction with the new style guide, a repository of assets was created to house fonts, icons, illustrations, color swatches, logo files, etc. for easy distribution to both internal collaborators and for projects involving freelancers and external parties.

 
 

Contents Include

 
systems_homepage.png
color palette.png
icons.png
icons 2.png

Web Design System

A code based design system was created to govern how the Earnest brand is used on the WordPress based website. I created the new system in collaboration with front end developers to increase efficiency in creating new layouts, maintain design consistency across the entire website, and decrease tech debt in our code base. It includes style guidelines for both designers and engineers—as well as a library of reusable design components.

 

Contents Include

typescale.png
layout.png
ResponsiveLayoutAnimation 2.gif
spacing scale.png
buttons and nav.png

Ongoing testing
and iteration

The Earnest brand system and web design system are used in the creation of all web, digital, and print marketing communications. Metrics are tracked for each new web based experience and iterated on regularly. Web pages are designed and built in modular blocks for localized metrics and rapid iteration.

 

Web Pages 1.png
Web pages 2.png
 

MOTION DESIGN

Various additions of motion and micro interactions to webpages produced a conversion increase of up to 22% across all device sizes.

 
 
 

WEB ADS

Web ads using the new colors, illustration style, and brand guidelines showed an 83% increase in click through rate.

 
blog ads set.png

Data visualization

Infographics used in web based promotions

Data.png