Making a design system to speed up both Product and Marketing assets for a consistent brand experience.
Problem Statement
For ~20 years we’ve outsourced our design projects. How do we transition all design in-house and create a world class design system to support the full company?
My Role
Project Lead for research and design efforts to understand current state and develop roadmap. Collaboration from with full-time designers, UX Interns, and developers as available.
Discovery.
Combing through our current assets to understand where we are starting.
What We Started With
Thinking curation, not creation.
8%
Product Elements
Navigation Interaction Model Colors/Typography Components Experience Principles Mobile Applications
24%
Marketing Elements
Logo Usage Tone of Voice Accessibility Standards Iconography Imagery Usage Social Media Self-Service Templates
18%
Print Elements
Trade Show Assets White Papers Swag/Give Aways Data Sheets Company Handouts
Discovery
Off Brand.
Many of our assets were created by outside agencies and lacked consistency.
Creating a Foundation.
Starting with a good foundation makes the creation of all assets easier.
Foundation
Brand Guide.
As the foundation to our Design System, we created a brand guide to help both the product design and creative design teams apply our new brand direction.
Foundation
Design System.
After meeting with developers from both the product and marketing teams, we created a design system that would meet the needs of both teams.
Foundation
Interaction Model.
For our products we created an interaction model to show how page templates behave.
New Assets.
We started with the most important assets and created a roadmap for the rest.
Before and After
Core Application.
Before & After
Mobile Apps.
Like our admin app, our mobile app needed some love to get it up to brand standards.
Foundation
Website Redesign.
Working with the creative team, we rethought how we approach new customers to give them a better experience.
Where We Are Today
Almost there...
94%
Product Elements
Navigation Interaction Model Colors/Typography Components Experience Principles Mobile Applications
89%
Marketing Elements
Logo Usage Tone of Voice Accessibility Standards Iconography Imagery Usage Social Media Self-Service Templates
97%
Print Elements
Trade Show Assets White Papers Swag/Give Aways Data Sheets Company Handouts
