1 head of product,
1 visual designer,
Brand, design system, illustration, UI design
TeenSafe is a leading parental controls app that focuses on monitoring device usage in teenagers. While the app can monitor many different activities on teens’ phones, TeenSafe noted that distracted driving was an increasingly pressing issue among teenage drivers. They shifted their focus to the distracted driving epidemic. Existing tools only monitored the problem and did little to encourage healthier driving patterns. TeenSafe wanted to take direct action and teach safe driving behaviors through prevention, enforcement, awareness, and engagement.
Partnering with the Head of Product and another visual designer, I helped build a revitalized TeenSafe design system that embraced the company’s mission.
The original brand felt very sterile and TeenSafe wanted to shift perception about parental controls being a governing app to being a companion in safer behaviors.
Without a proper design system in place, passing files among designers and developers was messy.
Since TeenSafe was creating new products, they needed a system that could allow them to test and iterate on them.
TeenSafe style guides
When I joined the TeenSafe team, user testing and research had already been done. I reviewed documentation, user needs, and existing competitors. Through this discovery process, I learned that parents wanted to ensure their teenage kids’ safety while driving, but had difficulty with productive conversations around proper driving habits.
The existing TeenSafe design system was littered with inconsistencies and didn’t match the tone and feel of TeenSafe’s revamped vision. We wanted to appeal to parents but not jeopardize their relationships with their kids. TeenSafe needed to feel safe and friendly.
Before and after dashboard redesign
Implementing a revised color palette was the first challenge as the previous one felt too dull. I chose bright, modern colors were to create a more cordial and human feel. Though distracted driving is a serious topic, it was crucial to give users a feeling of warmth and security and not use serious or alarming colors.
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 type and color
I drew custom icons, which 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.
Trip details screen
The new illustrations are joyfully colorful. The linework and offset fill of the illustrations give them a lively tonality that add to the TeenSafe brand
Plug in phone illustration
The design team I was a part of actively participated in implementing the design system. We collaborated with development teams and engaged in feedback on how to grow and improve the system.
No matter where a teen driver or parent may be, users can access TeenSafe across mobile and the responsive web.
Sign in screen
Trip details screen
With the foundation for a design system set, TeenSafe was able to articulate their brand and products to their users.
Consistent components and tailor-made patterns from the design system reduced development costs and mistakes.
During the course of this project, due to an update in Apple’s policies, TeenSafe had to pivot their products from iOS to Android. Thanks to the new design system, the team was able to adapt products quickly and push them to market.