UI/UX Case Study

CoPi (koʊˈ-pi) your copilot will assist you throughout your ride, and provide a safe driving experience.

It started as a project from a Google Course

Design Prompt:

“Design an in-car app”

Duration: June 2022 - October 2022

Overview

CoPilot is an app created to promote safe driving, and voice assistant, CoPi, will provide users a true hands-off-the-phone driving experience.

Safety is the number one priority when it comes to driving, and drivers should be able to keep their hands on the wheel and focus on the road.

Role: UI/UX Designer

Tools: Figma, Adobe XD, Adobe Illustrator

User Research

My target audiences were drivers who want to focus on the road, and drivers who do not have access to a car dashboard or Apple CarPlay/Android Auto.  

I conducted a survey with over 20 participants and gathered some data about their basic needs while driving. Majority of the users admitted to having a hard time navigating through their phones while driving. 91.7% of the users does not have access to Apple CarPlay or Android Auto. 54.2% of the users would like to be able to text hands-free while driving. 

User Pain Points

Distractions 

Notifications from the phones causes distractions for users while driving. 

Multitask

Users cannot communicate with friends or family without getting their eyes off the road. 

User Interface 

Interface is too overwhelming while driving. Users need smarter interface. 

Accessibility 

Not enough assistive technology to give users a better experience while driving. 

User Survey

Competitive Audit

Drivemode Dash

Good

  • Simple and clean design.

  • Offers voice-enabled commands.

Bad

  • Not enough options

  • Users complain that there is no music feature.

  • App crashes a lot.

DriveAid

Good

  • Offers necessary functionalities.

  • Straight to the point design.

Bad

  • No voice commands.

  • Takes you out of the app when using navigation.

  • Buttons take up all screen space.

iCarMode

Good

  • Simple and straight to the point.

  • Clear brand identity.

Bad

  • No voice command

  • Users have issues with other app integrations within the app.

  • Monotonous look.

User Personas

“Mornings are very busy for me. I have to drop off my children to school. I am also in a rush but I want to do things safely.” 

- Amanda Kim

Goals

  • Create a safe environment for her family.

  • Be a good example for her children.

  • Practice good habits.

  • Teach her children good habits.

Frustrations

  • Keeps getting notifications while driving.

  • She is tempted to check her phone every time she gets a notification.

  • Does not have access to Apple CarPlay or Android Auto.

Amanda is a stay-at-home mom of three. She is always looking after her children’s health and well-being. She drives everyday to drop them off to school. She almost got in a car accident for recklessly driving while being on the phone. She wants to eliminate distractions from her phone.

“I need to eliminate any distractions that will disrupt my goals. I need to be focused for my future career.”

- Joseph McHale

Goals

  • Pass all his classes.

  • Get internships and find a job before graduating.

  • Be successful. 

Frustrations

  • Does not have a car display

  • Have to rely heavily on his phone for navigation.

  • Friends keep texting him while he is driving.

Joseph is a second-year college student. He is determined to finish school and have a successful career. He drives to school  four to five times a week, and his vehicle is an older model so it does not have a car display. He relies on his phone but there are lots of distractions.

User Journey

I created a user journey map that identifies a scenario where and how the app could be helpful.

Goal: Drop off kids to school and go grocery shopping.

Persona: Amanda

User Flow

Colors

#C9D8FF

#D3EEF4

#A0C5D5

#93CBF1

#60B066

#8AB9E8

#E05F5F

#E88A8A

#3B3B3B

#717171

Typography

Poppins

Wireframes

Previous Design

Initial designs were similar to Google’s design system. It looked clean and well laid out, but there was no originality. The collapsable menu allowed the interface to look less distracting, however, the extra step of tapping the menu icon while driving might be inconvenient.

High Fidelity Prototype

Logo inspired by the radar screen.

CoPi (koʊˈ-pi) is the voice assistant. Voice commands will be activated with “Hey, CoPi”.

Create primary contact list of people that can call/message.

Curve inspired by the car dashboard.

When drivemode is on, it will turn off all notifications and send automated messages to callers.

Final Screens

Takeaways

Impact

CoPilot allows users to practice safe driving by limiting the apps that can be used while driving, muting all notifications with a single button (or voice command), and by having a voice assistant that will help eliminate distractions and navigate through the phone hands-free.

What I learned

I learned that I should not be afraid of colors. This project made me get out of my comfort zone, and I discovered a colorful side of me that I did not know was there. When I started this project from the Google Course, I decided to follow their design system because it was the safest. Their designs already looked well structured and I couldn’t go wrong. However, it did not help my work stand out nor show my personality. A great mentor advised me to redesign the project and express myself. I am glad I listened.

I also learned that even after the final touches, there is never a true end to design because there is always room for improvements.

Thank you