SafeDrive is an innovative idea for the future navigation app.

It is designed to help the new driver drive safely and improve their driving quality. The navigation map will show on the car windshield to keep the driver pay more attention to the front.

Check the final work click here.


User Researcher, UI/UX Designer, Visual Designer

Type/ Timeline

UI/UX & Visual Design
Feb - Jun 2019

Tools Used

Figma, Illustrator, Photoshop, After Effects, InVision

Design Goals

The project goal is to increase the driving safety level for every user and help the users easy to understand the map system. The business goal is to help the company to partner with small businesses in the Bay area to drive our customers to their shops. For example, users use the app will get a coffee discount or cashback to increase the business.


The navigation app is too small to read, and sometimes it is hard to understand.

As a new driver like me, I have some troubles of using the navigation app while driving on the road. The navigation app on my iPhone X is too small for me to read, and sometimes it is hard to understand the navigation. So I have to look back to my phone more than twice to double-check the navigation while I am driving on the road.

I noticed that not just only me think it is dangerous to looking back and forward on the phone while driving, so I want to build a solution for the people who have the same issue as me. This is not just a problem, it is a dangerous issue for everyone.


My research plan is to find a better way to understand my target audiences, my plan starts with competitor analysis (Hudway, google map and Waze), make a simple user survey, and then in-person user interviews. I targeting the people who love are fresh drivers, ages from 18 to 22 years old.

1. The size of the screen
The navigation map on the mobile phone is too small to read. Especially if the user is not familiar with the location, they have to double-check the map.
2. Searching function
The searching function in the navigation app is complicated. There have too many steps to click before users start to search for things (parking lot, coffee shop, and gas station) nearby.
3. Voice Control
As a future IoT product, many interviewees would like to embed a voice control in the system, so they can search easily while they are driving.

User Quotes

"It is a problem that I need to look back to my phone and look to the front of the traffic. If there have something can show the map on the windows that would be great." -David
"Sometimes I put my phone on the car phone holder or the dashboard, but when driving too hard the phone wills fall down. Therefore, I rather use my hand to hold my phone." -James
• They want to have better driving experience.
• Want to have a road trip with his friends.
• Age 24 - 35.
• Lives in San Francisco.
• Works at a photographer company.
• May have a family at home.
• Has a busy schedule.
• Loves to hangout with friends.
• Love to share photos on the social media.
• Love to explore new places.


Empathy Map


After the multiple research, brainstorm, and iteration of sketches, and receive feedback from classmates, friends, and professors, I finalized the product design of the problem that I wanted to solve. Based on multiple user interviews, here are some key goals about the product:
1. Simple, easy to read
Use huge San-serif font instead of the small serif font, to increase eye recognition.
2. Informative
Have enough information for the driver to check the car, such as the car speed, car fuel, direction steps, and coordinate.
3. Safety Reminder
The color on the left bar will be changed by the driving speed, when it's driving too fast the color will be changed to yellow then red.


After the product function is solid, I started to design the main features of the app. I have gone through several iterations of the app and user testings with different people and finalizing all the screen's feedback into the final prototype.

User Testing

Before I start user testing the workflow and prototype, I made some screen & UI assumptions to help me understand my user. Because this is a product for the future, I decided to use the High-fidelity wireframe to do user testing. For some part of the UI design, we need to use high fidelity wireframe to let the user be easier to understand the icons and functions.

User testing

Finding 01 - Users would like to have the drive path colors to know the traffic easily. Most of the users think red is means the worst traffic, yellow means warning, and green or blue means the traffic is good.

Finding 02 - Most of the users think the white background is distracting and it is hard to see the directions. I assumed many different UI and colors, and the final version I decided to go with dark blue and put every font bigger and bolder to help the driver to read easily.

Finding 03 - Some user does think it is a great idea to have the swipe down function to do a quick search, but some of the users don't know there is a swipe down function in the app.

Finding 04 -Some users think the number on each parking lot means the price low to high. The others think it is depending on how close to the destination distance. After another user testing, I found out that most of the drivers would like to see the price low to high rather than the destination distance.

User Flow

1. Set up location

Enter the user's destination and pick a routes to start driving.

2. Quick search

Swipe down the app to do a quick searching for the parking lot, gas station, cafe, restaurant, and ATM nearby.

Final touches and delivery

Check it out

Final Design Prototype


This project was a great opportunity to learn about the entire process of user experience, from concept through idea validation, design, and development. It helped me to get insights from my users to understand their needs.

Big thanks to my instructor - Aaron and my talented classmates!