Focus

Combatting distracted driving

Project

Mobile app, responsive web

Role

UI design, web design, visual design

Team

1 head of product
1 visual designer
5 engineers

Client

TeenSafe, Inc.

Challenge

How do we assist parents in addressing the distracted driving epidemic?

Background

Distracted driving is a pressing issue in teenage drivers. Existing tools only monitor the problem and do little to engage with healthier driving patterns. TeenSafe wanted to take direct action and go beyond just teaching safe driving behaviors.

Outcome

A cross-platform tool that takes a proactive approach in enforcing safer driving habits. Focus was acquired in December 2018. The product is under development with SiriusXM - Connected Vehicles.

Product Research

When I joined the TeenSafe team, user testing and research had already been done. I reviewed documentations, user needs, and existing competitors. Through this discovery process, I learned how parents want to ensure the safety of their teenage drivers, but have difficulty navigating a productive conversation around proper driving habits. Working closely with the head of product and the use flows and wireframes he created, I led the UI design while taking in visual and UX considerations.

Process

A Guided Onboarding

Because Focus controls many aspects of a user's phone, such as blocking notifications and messages, there were complicated steps into setting up the tool for usage. Onboarding steps below:

1. Install Focus on parent and driver’s phones
2. Create account
3. Order driving beacon
4. Download setup tool
5. Set up driver’s phone with setup tool
6. Onboard driver
7. Complete onboarding
   

I needed to design screens that were visually impactful to make the setup feel less technical and informative enough to convey value and action of each installation step.

Creating a Unique Android Onboarding

I had to design a separate onboarding experience for Android devices because installation requirements differed. Users needed to perform enable a series of permissions for Focus to be fully functional. One of the biggest obstacles was how every Android device's settings is laid out differently, making the setup look possibly different for each user. I came up with a few solutions to solve this problem:

Option 1 - Toasts

Text approach forces users to read, little visual guidance.

Option 2 - Timed Steps

Granular interactive guidance, heavy developmental efforts.

Option 3 - Video Tutorial

Visual learning, bloats app experience

Dashboard Explorations

The dashboard is the key screen in Focus as it is surfaces the ongoing log of a driver's trips. A huge problem I had to solve for was visually density. I had to filter and prioritize the right amount of information for parents. If the the app populated too much information, they would feel overwhelmed. On the flip side, too little information would be unhelpful. Other visual considerations included displaying location and broken driving rules.

Option 1 - Driver with Full Trip Cards

Location of driving alerts easy to access, can be too much information.

Option 2 - Trip Card Alerts

Quick to implement, direct to the point, lacks personality.

Option 3 - Trip Cards with Locations & Alerts

Condenses trip details well, doesn’t feel inviting.

I favored a combination of options one and three, creating a dashboard that zeroed in on insights while remaining visually delightful.

Final

Finished Mobile Designs

The final dashboard design puts a prominent focus on a driver's most recent trips, showcasing high-level routes and driving incidents. Parents can tap in further to each respective trip and understand more about their kid’s drive. Every trip description goes into details about the location, time, and broken rules. Additionally, parents can modify driving rules to keep their kids safe.

Designed for Anywhere, Everywhere

No matter where a teen driver may be, parents can access their driver's ongoing trip and history. Focus is available as a mobile app and on the responsive web.

Learnings

Through intense collaboration with the head of product, I learned how much visual and UX design go hand-in-hand. UX can influence visuals and vise versa. Being able to speak and work honestly together, we were able to create designs and experiences that complemented one another.