PROJECT OVERVIEW

Autonomy was created during my UX Design Bootcamp at BrainStation. Within the span of 8 weeks, we were tasked with creating a digital solution to an identified human - centred problem. The project was an end-to-end UX design experience that included research, ideation, interface design and branding.

KKKK.png
OKMOK.png
mockuuups-58ad462a-9ef0-4bbe-b86b-7b156affbc49.png

Type

|

Academic

Role

|

UX/UI Designer

Timeline

|

February - March 2022

8 Weeks

Device

|

iOS Devices

WHAT IS IT?

AUTONOMY is an online solution that diminishes the barrier of understanding and communication between drivers and mechanics and auto shops

Autonomy is an online solution that nurtures an environment of open communication and information in order for users to feel more confident and to have more autonomy over their vehicle(s)

DESIGN OVERVIEW

designthinking.png

EMPATHIZE

Auto repair means safety on the road, and a topic that shouldn't be compromised due to the lack of understanding and/or barriers to communication.

SECONDARY RESEARCH

                                             enable drivers to be more prompt with servicing their cars in order to improve safety?

HOW MIGHT WE

mockuuups-passenger-walking-towards-a-car-holding-an-iphone-11-mockup.jpeg
12341234.png

USER INTERVIEWS

“Having access to what they did to my car. They usually give me a piece of paper explaining what they do. It’s not as straightforward for my brain to comprehend.”

USER INTERVIEWS

“More layman’s terms or simplified explanations, or maybe put better diagrams of what’s happening.”

mockuuups-iphone-mockup-in-users-hand-with-a-macbook.jpeg
mockuuups-walking-with-iphone-x-mockup.jpeg

USER INTERVIEWS

“Running diagnostics, explaining the problem (both ways). I’ve tried to explain the issue, but the mechanic didn’t understand, and this prolonged the repair. “

KEY INSIGHT
 

I gathered the insights from interviews, and grouped them accordingly into multiple categories. The most overlap was found within communications and time management. 

Screen Shot 2022-04-05 at 9.22.34 PM.png
Screen Shot 2022-04-05 at 9.22.41 PM.png
Screen Shot 2022-04-05 at 9.21.59 PM.png
Screen Shot 2022-04-05 at 9.23.00 PM.png

Time Management

Drivers indicated that the wait time for servicing or the social interactions take up a lot of time. One user interview revealed they had to wait 2.5 hours to get serviced.

Sales and Marketing

A few have indicated that the sales pitch and marketing tactics can be over the top, they expected an engagement about other services and options aside from the purpose of their visit.

Forms of Communication

Lack of diagrams and pictures, and other forms of communication confuses drivers.  The terminology can seem overwhelming, especially for those that have no prior knowledge about vehicles, let alone the particular types and models.

PIVOT

After reviewing the research from the interviews, I came up with a new 'How Might We' to relate more with the users.

How might we empower drivers when it comes to communication pertaining to servicing needs from auto shops so that they understand the explanations and next steps

DEFINE

USER PERSONA

My user persona is a culmination of the secondary research, but most importantly, the findings of my user research interviews. I crafted a persona that represents the target user in order to empathize while identifying potential opportunities through the means of a digital solution.

Meet Eddie Glover

User Persona.png

USER EXPERIENCE MAP

Through the lens of Eddie, I put together an experience map to understand the journey in order to identify moments of opportunity to intervene with a potential digital solution.

XP Map.png

Where to Intervene?

The end of the user journey leaves Eddie with some questions and confusion.

Why Here?

While there was a wave of satisfaction and relief after the car was serviced, Eddie was not as content. There seemed to be no form of visual representation/confirmation of what had been worked on in his car. Experiencing a high moment, only to feel uneasy afterwards.

IDEATE

USER STORIES AND EPICS

Based on Eddie's goals, I developed stories that focused on actions that could help alleviate pain points.

 

The epics reflected frustrations of interviewees catering to the lack of visualization/communication, and thus a lack of understanding of the problem

Screen Shot 2022-04-05 at 11.42.11 PM.png
Screen Shot 2022-04-05 at 11.42.17 PM.png

TASK FLOW

Screen Shot 2022-04-27 at 4.00.31 PM.png

PROTOTYPE

Untitled_Artwork 15.jpg

After saving a collection of inspiration for my UI Moodboard, I curated sketches that interjected multiple features and functionalities. I also pulled inspiration from apps such as Slack, Reddit, and MyFitnessPal. 

After multiple sketches and iterations, I fine tuned it to cater towards the key features and components. A few explorations included: Compare Images, Chat Log, Search Feature, Filter, Drop Down Menu, Input Fields, Notifications.

Untitled_Artwork 16.jpg

WIREFRAMES

Low-Mid Fidelity

X - 16.png
LOGIN
HOME.jpg
HOME
X - 20.png
SCHEDULE
X - 8.png
CHAT
HISTORY.png
HISTORY
OPEN HISTORY.png
LISTING

USABILITY AND TESTING

Three phases of testing conducted to identify issues within the prototypes. Each round consisted of 5 individual tests. Shown are a few examples of the testing and improvements within multiple stages.

AFTER
BEFORE
HOME-1.png
HOME.png

"Your Cars" has been changed to "Quick Actions", as testers noted car selection can be found by swiping on the images.

 

Instead, it was replaced with a button that could harness other potential features. One such feature would be booking an appointment with auto filled information.

BEFORE

The chat option has also been removed, as this option would take time away from the mechanics/auto shop from doing their job. Also, auto shops call when a decision needs to be made on the vehicle. 

BEFORE
AFTER
11.png
22.png
BEFORE
AFTER
qwerqwerqwer.png
qwerrrrrrrr.png

There were multiple heuristic violations within this page.

 

1.  User Control and Freedom:  users were unable to go back to previous page. 

Solution:  Add a back button

2.  Flexibility and Efficiency of Use:  users were unable to identify pictures and diagrams with two side by side images.

Solution:  Tabs. This keeps information hierarchy so users know which stage (before or after) they're at. As well, users are able to view pictures at a larger scale

REFINE

BRAND DEVELOPMENT

Creating an identity and imagery for the app is an important step, as it supports the message and appeals to users who would benefit most.

The adjectives and typography in mind when nurturing ideas for the brand name "Autonomy".

Subtle

Control

Confident

Minimalist

Clean

Modern

Screen Shot 2022-04-05 at 10.42.20 PM.png
mockuuups-iphone-13-pro-mockup-isometric-floor-left-floating-shadow.png
Screen Shot 2022-04-05 at 10.36.31 PM.png

The process for brand name included two schools of thought. One was catered to attract business, thus the SEO derived names. The others were Latin words, a language which has been around for a long time, an indication of strength and longevity.

BRAND NAME TYPOGRAPHY

Screen Shot 2022-04-06 at 12.24.31 AM.png

IN APP TYPOGRAPHY

Screen Shot 2022-04-06 at 12.19.28 AM.png

AUTONOMY

Why Autonomy?

Having autonomy over one’s car/decisions means having control.

 

Having control through the means of information via communication

Three.jpg

Moodboard

Incorporating colour in, the user should note the deep blues. While they are apparent, it is also a minimalistic style. This approach signifies consistency, clarity, durability, and most importantly reliability. 

MOODBOARD

Screen Shot 2022-04-05 at 10.58.31 PM.png
Screen Shot 2022-04-05 at 10.56.41 PM.png

COLOURS

Screen Shot 2022-04-06 at 12.32.05 AM.png
Screen Shot 2022-04-06 at 12.32.11 AM.png

Explored with darker tones of purple as it can convey “premium”, and indicate that users are at the top of the priority list.

**Proportions are according to the 60/30/10

Frame 19.png

FINAL PRODUCT

mockuuups-iphone-12-mockup22.png
mockuuups-iphone-12-mockup.png
1231333.png
12341234.png
ZCV.png
CCCC.png

1. LEARN

Acquire knowledge passively every time you go in for an appointment. It becomes more engaging once users are more familiar with the subject matter.

FEATURES

2. CONFIDENCE

With knowledge, you are less likely to get scammed and less likely to pay extra, as prior appointments will have invoices attached.

3. RELATIONSHIP

Building a good relationship with one's vehicle is key to safety and longevity of the vehicle. 

Desktop - 14 (1).png

MARKETING SITE

mockuuups-ipad-pro-mockup-in-dark-skinned-black-ladys-hand-for-study.jpeg

Establishing a website allows for better marketability. While UX Design caters to users, we must also be able to reach our target audience in order for the solution to be more effective.

KEY LEARNINGS AND NEXT STEPS

1.  Adding accessibility features, such as translation (by text or by auditory means)
2.  Include better transitions so it is more enjoyable for the user.
3.  High fidelity research or more testing.

The take away from this project was research. It is very important to not undermine secondary and user research. Truly dive into the emotions and the reasons as to why users act the way they do.

Understanding instead of assuming, and don't think about the solution first. 




"A problem cannot be solved with the same level of consciousness it was created from"

 
ALBERT EINSTEIN