Carmex Collision Repair: When Cars and Cultures Collide
Project Overview
In this project, I researched what its like to get a car repaired, what pain points exist, and how we could create an application that would provide a better user experience while also serving the needs of the stakeholder.
The Client
Carmex Collision Repair is a family owned business in Irving, Tx that is looking for ways to leverage technology to communicate better with their clients so that they can get more work done and provide a better customer experience.
​
Researching the User
To learn more about the experience of getting a car repaired, I sent out surveys to start defining the users and refining my questions so that I could get as much relevant information from my user interviews.
"I just want to find a car shop that isn't going to screw me over. If I can't fix it myself I drive down to Houston and take it to my cousin, but I honestly don't even trust him that much." - Tyler W.
I distilled all of the information I got through an affinity map, which became the persona of Sara, a working professional who has recently had a car accident, knows some car repair basics, and doesn't feel financially equipped to pay for anything big at the moment. Her main goal is simply to find a place that she can trust.
Solving the Problem
Having synthesized my research, I defined the problem facing my users and ran a brainstorming session where I asked respondents three questions about how we might solve the problem facing Sara.
Problem Statement: Sara needs to find a reasonably priced, trustworthy repair shop so that she can get back on the road without feeling like she wasted her money or got taken advantage of.
How might we...
Make Sara feel more confidant about her estimated cost?
Be more transparent about the car repair process?
Show more professionalism?
I created an affinity map with my brainstorming group's answers and found three features that would address the trust issue our user was having with finding a car repair shop.
1) Compare prices at other shops. This builds trust by showing confidence.
2) Have an online estimate. This builds trust by trusting the user's knowledge.
3) Allow the user to track repairs. This builds trust by keeping open communication.
Creating the Solution
Once I defined the three key features I needed to start sketching the flow of how these would work. Once I had flows for my features created, I started moving through different iterations of what the screens would look like.
This task flow shows the Compare Shops feature. By moving continually right, you see the simple taskflow of someone looking for a quick update but moving through the choices reveals the taskloops that can happen for a user that wants more information.
Wireframes
Next, I started moving through different iterations of what my screens would look like. To start I made hand-drawn wireframes and tested to get user feedback by using the Marvel App.
My low-fidelity to mid-fidelity screens above show changes that I made based on my user testing. Early testing was key in clearing up my app navigation. For example, a progress bar was added to my compare shops feature, and the drop-down for more info was replaced by the hyperlink "More Info...". While I continued to test, I also began to build the UI that would bring the final prototype to life.
Building the UI
Because the repair shop, Carmex, is an obvious reference to Mexico, I wanted to make sure that the interface design choices remained true to the Mexican influence without making people from other cultures feel alienated.
My mood board highlights the urban spirit of Mexico City, a hard-working, always moving metropolis that finds bright and colorful ways to celebrate life. The subtle message to the user-- though times can be tough, we can find a way to make them better.
The colors used were influenced by Talavera, a traditional Mexican ceramic, that features blues and yellows which I knew would be more accessible to our users who had just experienced a crash than the bold green and red of the Mexican flag.
The shop's logo was also modernized by using the font found in. the Mexico City Metro
TITLE OF THE CALLOUT BLOCK
Final Testing and Proto-type
After completing the UI style guide, I created my high-fidelity prototype. While my testing was now more focused on accessibility and final details, at this stage I was also able to simplify the Estimate Repairs user flow and see a greater pass rate in my testing.
The updated logo is now located on the home screen.
Icons were added to the text to account for people who have difficulty reading English. The icons were tested using this Spanish version of the screen.
The yellow and black motif passed WCAG AAA readability with a ratio of 7:1.
My survey showed that 7 of 12 people know at least one person who struggles reading English. Because of this, I plan to build this proto-type out to have a Spanish version.
My final prototype can be used below. **Please note that for workflows asking for car information the prototype only supports a 2015 Nissan Versa because I was not able to make a prototype for all makes and models of car.**
Learnings and
Next Steps
After showing my research to my client he liked the ideas that came from the research but is not able to invest the cost of building such a robust application. In the future I will be using my Research and Updated UI to enhance his current website page.