Mobile app for car maintenance
9 weeks | Solo Capstone Project | Figma, Miro, Freeform
Confide
The problem...
According to the AAA, 35% of Americans put off their scheduled auto maintenance every year. Well-maintained vehicles decrease the risk of an equipment-failure related accident, as well as increase safety in the case of a crash. Properly-maintained gas vehicles are more environmentally-friendly due to improved fuel efficiency and reduced emissions.
34% of drivers in a survey conducted are not confident in completing basic maintenance on their personal vehicle. New drivers and women are more likely to pay more or be a victim of bad business practices when bringing their car in for service. Lack of experience and knowledge about vehicle maintenance is a direct result of the lack of education about vehicle maintenance.
PHASE I: DISCOVER
How might we...
...give people confidence in taking good care of their vehicle?
...help vehicle owners save time and money?
...impart knowledge and reduce the stress associated with maintaining a vehicle?
After conducting 21 surveys and 7 user interviews...
I was left with a ton of tidbits, users quotes, and emotions. An affinity map helped the most in first parsing through the data, separating concepts and emotion. An empathy map then helped guide me toward forming user personas by thoroughly understanding user sentiment surrounding vehicle maintenance.
Affinity Map
Empathy Map
3 User Personas
I learned that users...
...don't have trust in vehicle service providers due to the lack of transparency, leading to unexpected costs and long turnaround times.
...are inconvenienced and stressed by the time-consuming nature of completing routine maintenance, and want affordable and easily-accessible ways to get service.
...want to complete simple maintenance tasks themselves, but do not have the confidence, knowledge, or resources to do so.
...are overwhelmed and confused when researching online as information is not centralized, and accurate information can be tedious to find, especially for older or uncommon vehicle models.
I started designing the most important experiences...
Upon considering all user personas, I decided on 3 red routes to form a minimum viable product. The core functions of the app are the ability to book a service appointment, create a record of service that was completed on a vehicle, and determining a possible cause of an issue and finding a solution.
While not created for the scope of this project, the next user flows that would be the next highest priority are a guidance feature to help users complete simple DIY maintenance tasks, a chat and video call feature to ask an expert about a problem, and a way to view the service history and maintenance record of the user's vehicle.
The gears started turning...
I drew inspiration from a variety of mobile apps, such as Kaiser Permanente, Modern Animal, and CarFax CarCare. Bringing in familiar elements of a healthcare app and a veterinary care app would allow users to draw similarities between existing experiences of getting care and taking care of their vehicle. Taking a look at existing apps related to vehicle care enabled me to understand what features already exists in the market, and how a better experience can be delivered, considering the established personas for this project.
(To follow along, selected screens are shown in each phase of the wireframes and mockups, corresponding to their evolution.)
The wheels were in motion...
After sketching and thinking through the different ideas, I produced a low fidelity mockup of how the app would start to look and feel, with the intention of making it easy to use and approachable for those that found car maintenance intimidating and foreign. At this stage, I knew I wanted the app to feel friendly and innocuous.
Then I put the petal to the metal...
To continue with the goal of designing an efficient, informative, and enjoyable experience, I formed a style guide that prioritized clean and open design, with simple icons and minimal text to reduce mental overload and encourage interaction. The color palette drew inspiration from road signage, boasting uplifting and positives hues, while the typeface was selected for its visual simplicity and approachability.
And finally arrived at the destination...
Putting it all together, I designed high-fidelity mockups of each screen bringing together the style guide, and using ChatGPT to assist with the copy. I created custom components in Figma to adjust to each screen and button's content to ensure the app was as usable as it was enjoyable.
(The screens shown here are the final iterations of the screens, after two rounds of usability testing.)
PHASE II: DESIGN
PHASE III: VALIDATE
The first usability test...
I gathered a total of 7 users that all met the criteria for being a potential user of the app: each participant is responsible for the maintenance of their own vehicle, wants transparency and realistic expectations when servicing their vehicle, and wish for more confidence in receiving car care.
A task was assigned for each corresponding flow:
1. Book an oil change appointment for a specific date and time, at the nearest auto shop.
2. Create a record that the vehicle's spark plugs were replaced by a specific auto shop.
3. Find more information about what might be going on after hearing a rattling sound from under the car.
Through testing, I identified a total of 14 usability issues with the current prototype, and ranked them by severity. There were a few design elements that a majority of testers didn't respond well to, specifically the way to identify the region of the car that an issue was occurring in, a slider component, and a date selector. One user wasn't able to complete the final task due to a combination of these issues.
The chart here shows how I ranked issues, described each issue, and worked toward a solution. This helped to organize the priority of which items should be addressed. In the case that I had a tight time constraint, I would know to focus on the critical and major issues prior to addressing the minor and non-urgent issues.
First iteration prototypes
Feel free to click on the image of each flow to try out the prototype. (It'll open a Figma in a new tab.)
Task 1: Book an oil change at the nearest auto shop on November 15, 2023 at 1:00 PM.
Task 2: Create a record that you replaced your car's spark plugs at an auto shop.
Task 3: You hear a rattling sound from the front area of your vehicle. Discover what this might be and how to address it.
The second usability test...
After iterating on the prototypes based off the feedback I received in the first round of testing, I retested the design with 8 people that would be considered target users of this app. Overall, the 2nd round of usability testing produced far fewer issues compared to the first. I take this to mean that many major issues were addressed and users noticed.
Compared to the 14 issues from the previous round, only 2 issues were found that impacted the user experience:
1. The verbiage of the app and certain buttons left users feeling confused or unsure of the next step, because of their inherent novice-level vehicle knowledge.
2. While the overall experience of selecting the region of an issue on the car was improved, a rotation button was not apparent enough, leading users to struggle finding how to select the rear portion of the car. One user was not able to complete the task because of this.
Second iteration prototypes
Feel free to click on the image of each flow to view the iterated prototype. (It'll open a Figma in a new tab.)
Task 1: Book an oil change at the nearest auto shop on February 15, 2024, at 1:30 PM.
Task 2: Create a record that you replaced your car's spark plugs at "Drift Auto Shop".
Task 3: You see a leak under the rear of your car. Discover what this might be and how to address it.
While the scope of this project instructed me to end here, with another round of iteration and testing, I believe that all 3 flows would reach 100% completion with only minor critical feedback. A common theme across the feedback received during this round of testing was that verbiage and terminology should be simplified or broken down even further, to really appeal to the user that has little-to-no knowledge of car maintenance. Additionally, ensuring that buttons, icons, and imagery are apparent and accurately reflect what they do would add further refinement to the design.
FINAL REFLECTIONS
This project was completed as an initial capstone project as part of my UX Design bootcamp. As it is a hypothetical app, it would be great to see it come to life in the future, as a way for vehicle owners to feel more confident about caring for their vehicle, as well as a way to add transparency and technology to the car maintenance experience. Based on the feedback I received from test participants and interviews, a majority of people would like to have an app like this, in which a familiar experience of finding and receiving care is applied to the complex and esoteric nature of maintaining a vehicle.
If this project were to be completed again, I would have liked to have added an experience that walks users through completing DIY maintenance tasks on their cars, as well as even more of an educational element in which users can expand their knowledge and confidence about owning and keeping-up a vehicle, as part of the minimum viable product.
One of the largest takeaways from this project is that the average users responds best to the most simple and straightforward solution available. The user needs to be guided through an experience, especially one in which they don't have much background knowledge or context. The process of simplification is by no means a simple one, but when done right and well, I have learned that users are able to fully enjoy and appreciate the value in an experience.