Carmex Inc (Cont.): Car Repair Expertise w/ a Human Focus
This project is a continuation of my first project for the General Assembly Immersive UX Course. To view my prior research in detail reference: https://marvera09.medium.com/carmex-collision-repair-8f0cd8962a3
I. Recap
In the first stage of my project, I researched how people experience collision repair on their cars. Through this research, I found a turbulent user journey where something like a car wreck takes over someone’s day and supplants casual thoughts with questions like “how much is this going to cost” and “who can I get to fix this?”.
After my user interviews, I created a persona, problem statement, and conducted an ideation session to find how we can make this journey better for people needing car repair. All of this led me to three key features that my design would provide: 1) Allow the user to create an estimate 2) Allow the user to compare Carmex with other shops and 3) Allow the user to track the status of their repair in the shop. Equipped with a plan to make this user experience better, the next step was starting to bring this application to life.
II. Mid-Fidelity Wireframes and Testing
To kick off the second stage of my project, I digitized the low-fidelity wireframes so that I could re-test my application and see if the problems in my first round of testing came from a lack of detail, or if there was a problem with the task flow I created. After testing my mid-fidelity frames with four users, I found that there were various places where the navigation and the information architecture could be improved.
Thanks to my user testing, I also got feedback on the way that I organized the data on my Track Repair feature. Initially, I had organized repairs according to process (i.e. Pending, In Repair, Repaired) but found that users preferred to have the repairs grouped by the area of the car (e.g. bumper or passenger side door) because that was more conceptually accessible to them than the car repair workflow.
III. UI Design
After I had made updates to the mid-fidelity prototype, I started on the visual design elements for my high-fidelity version. Because the name of the repair shop, Carmex Inc, is an obvious reference to Mexico, I wanted to make sure that the interface design choices continued to show that Mexican influence. That being said, I also wanted to make sure that the design choices weren’t so overtly Mexican that they felt alienating to other cultures.
In my mood board, I highlight the urban spirit of Mexico City which balances a hard-working, always-moving metropolis, with a highly cultured space where people find bright and colorful ways to celebrate life. The subtle message to the user — though times can be tough, we can find ways to make them better.
Along with trying to capture this spirit, I knew I also had to balance that theme against the central focus of the user experience. While I originally played with palettes like the green and red of the Mexican flag, I knew that the red could be too jarring for someone who had just been in a car accident. Instead, I searched for a deep blue to calm the user and a cool yellow to accent the background with tones of warmth and friendliness. By stealing colors from Talavera, a traditional Mexican ceramic style, I was able to find colors that would augment the app experience while also remaining true to the Mexican identity.
When it came to the font of the application, I immediately thought to use the font of the Mexico City Metro, but upon testing, I noticed that the readability of the app was suffering. In response, I only used the font to update the logo for the car shop and then began looking at more common sans serif fonts.
While looking for fonts, I focused on finding one that would be readable, compact, and austere. I chose Roboto because it had all of these qualities while also fitting inside of the greater design of the application. I purposely only used one font to give the app a sense of simplicity for the user who is already having to navigate the complex terrain of getting their car repaired.
By putting my font and color selection together I made a simple style guide which I used to update my mid-fidelity wire-frames to high-fidelity.
IV. App Accessibility
Once I added my style choices to my wireframes I tested to make sure that the application was still accessible after making the updates by using color.a11y.com.
Along with visual accessibility, I also focused on making the app available to those who aren’t literate in English. Because I was assuming that the shop probably has a significant Spanish-speaking clientele that struggles with English, I decided to test this assumption by conducting a quick survey to see how many people know someone who drives and also struggles with English.
When I got the results back, I saw that 7 out of 12 people know at least one person who falls into this category. To make this app easier to use for this group, I decided to add icons to my call to action buttons.
V. High Fidelity Wire-frames and Testing
With my high-fidelity wireframes made, I returned to user testing. I gave my testers three main tasks: check on how long it will be for your car to be ready, find the cheapest shop and see what reviews it has, and find the cost to repair a bumper. The first two tasks had minimal issues but all four of my users struggled to get to their estimate, especially when trying to select the repairs they wanted from a list. To solve this issue, I adjusted the task flow and simplified the interface to rely less on verbal cues. After cleaning up the flow, the next user I tested was able to get through the tasks without failure. The application was finally providing all the features to the user that I had been working for.
VI. Updated Storyboard- Making the Best of a Bad Situation
The User Story above is a complete 180 from the initial story that came from what user’s told me they have experienced. Thanks to the app, our persona, Sara, can quickly get an idea of how much this repair will cost her, and feels comfortable trusting the shop because the Compare Shops feature tells her that Carmex cares more about her finding what she needs than making money off of the work. By the end, Sara is a loyal customer who will be back for more repairs and who will recommend the shop to all her friends. Ultimately, we arrive at a win for both the user and the stakeholder.
VII. Next Steps
While I may not be able to actually develop this app, the research and design of the app have equipped me to take on the next stage of my project which is to redesign the Carmex Collision Repair website. On this project, instead of trying to develop new features, I will focus on updating the UI with the same themes of trust, authenticity, and accessibility that grounded this study.
