Brand, illustration, visual design
1 head of product
1 visual designer
How do we systemize a brand around distracted driving?
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.
A standardized design system that embraces the TeenSafe mission and cross-functional team collaboration.
Legacy Brand Auditing
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 style guide
Existing Focus wireframes
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.
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.
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.
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.
Creating an Icon Set
Custom icons added to the look and feel of the TeenSafe brand. The icons are driving inspired. Each icon is comprised of simple and minimal pictograms as to remain discernable at smaller sizes.
Trip details with rules icons
Side menu with navigation icons
Exploring a New Illustration Style
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.
Explorations for beacon illustration
Beacon illustration drafts
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.
The final, implemented illustration style is vibrantly colorful. There are illustration sets for onboarding, in-app, desktop, and web experiences. The linework and offset fill of the illustrations give them a lively tonality that adds to the TeenSafe brand.
Empty state for drives
Drive in progress illustration
Setup requirements illustrations
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, making them look polished and legitimate to consumers.