Focus
Combatting distracted driving

Project
Mobile app, responsive website

Role
Visual design

Team
1 head of product
1 visual designer
5 developers

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.

Research & Discovery

Research & Discovery

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.

focus_wireframes

Existing Focus wireframes

Existing Focus wireframes

Process

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.

focus_onboarding

Driver onboarding screens

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.

Option 3 - Video Tutorial
Visual learning, bloats app experience.

focus_android

Android onboarding options

I chose the first option because it was the quickest development implementation. It also bests accounts for the problem in the variety of Android screens because it doesn’t rely on visuals.

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 Location & Alerts
Condenses trip details well, doesn’t feel inviting.

focus_dashboard

Dashboard explorations

I favored a combination of options two 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.

focus_final-2

Dashboard screen

focus_final-1

Trip details screen

focus_final-3

Stats and rules screens

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.

focus_responsive

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.

Afterthoughts
The initial launch of Focus was a good starting point in beginning a conversation around distracted driving. In the future, I hope to extend on the Focus product to allow for a growing outlook on safer driving habits. I believe adding features such as trip data patterns will promote more proactive insights and conversations.


Browse other projects