TeenSafe

Building for safe driving

Project

Design system

Role

Brand, illustration, visual design

Team

1 head of product
1 visual designer

Client

TeenSafe, Inc.

Challenge

How do we systemize a brand around distracted driving?

Background

TeenSafe is a leader in parental controls company that focused on monitoring device usage in children and teenagers. In early 2018, they shifted their focus to fighting distracted driving. With a new driving tool in development, I worked with the head of product and another visual designer to revitalize the TeenSafe brand.

Outcome

A standardized design system that embraces the TeenSafe mission and cross-functional team collaboration.

Research & Discovery

Research & Discovery

Legacy Brand Audit

When I joined TeenSafe, a legacy brand existed. The style guide was visually outdated and needed to be updated since it no longer matched the trajectory of the company’s product revamping. There were also many inconsistencies and little guidance on how to use the given design components.

teensafe_legacy
TeenSafe legacy style guide
TeenSafe legacy style guide

Understanding the Problem Space

Without a proper system in place, passing off files among designers was messy. It dramatically slowed our workflows and lent itself to disorganization. Because of the disorganization, we were handing off files to developers that were inconsistent, giving the team double the workload to fix the mistakes.

Process

Defining New Colors

Implementing a revised color palette was the first challenge as the previous one felt too technical. Bright, modern colors were chosen to create friendlier, human values. Though distracted driving is a dangerous topic, it was crucial to ease users with a feeling of warmth and security in comparison to serious or alarming colors.

teensafe_color
New color palette
New color palette

Setting a Type System

Open Sans is a versatile typeface chosen for its legibility. Since TeenSafe had products  across multiple mobile and desktop platforms, it was important to select a type that was applicable on a variety of digital mediums.

teensafe_typography-1
Open Sans family
Open Sans type family
teensafe_typography-2
Typography system
New type system

Creating an Icon Set

Custom icons added to the look and feel of the TeenSafe brand. The icons are driving inspired and can be used in different contexts. Each icon is comprised of minimal pictograms to remain discernable at smaller sizes.

teensafe_iconography-1
Navigation icons for menu
Icons for navigation
teensafe_iconography-2
Numeric icons for installation steps
Numeric icons for installation
teensafe_iconography-3
Rules icons for driving alerts
Icons for driving rules
teensafe_icon-1
Trip details with rules icons
Trip details icons
teensafe_icon-2
Side menu with navigation icons
Side menu with navigation icons

Exploring Illustration Styles

In the beginning stages of the TeenSafe illustration style, the illustrations were flat and single-colored. Though they were quick to create, the team felt they lacked personality and felt stock. Colors and dimensionality were added in later revisions to add vitality.

teensafe_illustration_process
Explorations for beacon illustration
Explorations for beacon illustration

Final

Final Illustration Styles

The implemented illustration style is vibrantly colorful. Illustration sets are applicable for onboarding, in-app, desktop, marketing, and web needs. The linework and offset fill of the illustrations give them a lively tonality that adds to the TeenSafe brand.

teensafe_illustrations-3
Empty state illustration
Empty state illustration
teensafe_illustrations-2
Onboarding illustrations
Onboarding illustrations
teensafe_illustrations-4
Loader illustration
Loader illustration
teensafe_illustrations-1
Welcome illustration
Welcome illustration
teensafe_illustrations-5
Marketing illustrations
Marketing illustrations
teensafe_ill-1
Set up illustrations
Set up illustrations
teensafe_ill-2
Stats illustrations
Stats illustrations
teensafe_ill-3
Drive in progress illustration
Drive in progress illustration

The Complete Design System

The result was a multi-page design system filled with color, type, logos, components, navigation, illustrations, and usage guidelines. This made for quicker visual updates for designers and developers.

teensafe_designsystem
Final design system
Final design system

Impact

By building a go-to document for all design-related needs, development handoff was seamless as well as cross-designer teamwork. A system also enforced consistency across TeenSafe's products and made them look polished and legitimate to consumers.

Impact

100+ visual components and patterns
50+ unique illustrations
→ Significant improvements in engineering and design efficiency and consistency
→ Increase in developer and designer collaboration efforts
→ An invaluable training tool for 10,000+ volunteers and 150+ coaches and supervisors

96% of United States trainees reported that the training program either met or surpassed their expectations

→ Implemented new inclusive user research practices

First real-time feedback product launched at Crisis Text Line

Check out other projects

Car IQ - FuelingMobile app

Car IQ - Design SystemDesign system

FocusMobile app, responsive web