UI/UX case study
Mike's Car Clinic
UI/UX redesign of Mike's Car Clinic's auto repair website
TYPE
Team project for Practicum for Professional Web Design course
COLLABORATORS
Issac ln, Jonathan King, Maged Waly
BACKGROUND
Mike's Car Clinic is auto repair shop founded by Michael Chon in 1986 in Concord, California. Utilizing his website to reach out to more potential customers and to keep existing customers up to date. We reached out to Michael where we were able to work together to determine his needs for his ideal website redesign.
ROLE
TOOL
Figma
My role for this project was the UX Designer and User Researcher. My role was to spearhead the desktop & mobile design from scratch, designed and refined the hi-fi prototype design on desktop, involved in a lot of design decisions for both desktop & mobile, helped communicate and conduct testing with users, and conducted competitive analysis on competitors.
TIMELINE
9 weeks (March 2022)
MOBILE PROTOTYPE
DESKTOP PROTOTYPE
Problem
The current website is outdated and is not able to contend with competitors in the Dublin area. The website is in need of a refresh that is welcoming to loyal and new customers along with prioritizing interactivity with them.
User Research
Users of various backgrounds experience as automobile owners were interviewed on both desktop and mobile version of the current auto repair website. Previous customers of the auto shop was also contacted for interviews.
-
Many users found the website to be outdated and too plain.
-
Users were having trouble finding information around the website due to dead links and giant wall of text.
-
Scheduling for appointments, testimonials/reviews are important features for a auto repair website.
-
Users would likes to able to know what services the shop brings and what deals are available.
-
Users would like to see updated photos of the shop instead of stock images.
Defining Personas & User Needs
Inexperienced Customer
-
Find a mechanic / auto-repair shop that can diagnose the issue with his car confidently
-
Wants to be able to handle the car maintenance process on his own since family’s too far away
-
Does not want to get scammed or taken advantage of as a person with no experience w/ mechanics or cars
Experienced Customer
-
Wants to develop a relationship with mechanics to learn more about taking care of her car
-
Wants to easily be able to set up appointments that best fit her schedule
-
Have a trusted place she can take her car for any serious problem that arises
Enthusiast Customer
-
Wants a well priced service that is within a reasonable distance
-
Wants to be able to trust his mechanics that they are experienced enough to not make any problem worse
-
Wants to easily confirm information online without having to call in
Competitive Audit
As an Auto repair shop, there are a few key features that must be represented in Mike’s Car Clinic’s website. We looked over Mike’s competitor's Branding, Functionality, Site Architecture, and Navigation to find what works and what doesn't.
Full detailed competitive analysis: Click Here
Key Takeaways
-
Most auto repair shops emphasize: appointments, location, hours, contact info, and testimonials/reviews.
-
Features and designs we took note of are: emphasis on deals/promotions(good), appointment scheduling process(good), and lack of visuals(bad) which will be taken into consideration when making the future website of Mike’s Car Clinic.
-
We also noticed that these websites are straight to the point and put an emphasis on their values, skills, and the ability for the user to contact them.
Lo-Fi Prototypes & Sitemap
The Lo-Fi prototype for both mobile and desktop is made with the initial design created from the takeaways and input from the research and the client for another round of user testing.
Full detailed prototype functional specification: Click Here
![Appointments[1].png](https://static.wixstatic.com/media/b449bb_3b617ffc39a042f5b711c94a77c4b277~mv2.png/v1/fill/w_308,h_472,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Appointments%5B1%5D.png)
With another set of user testing, we actually found some flaws in our design. For example, there were some inconsistencies between the mobile and desktop versions of the website which led to some frustration. Another thing was that we found that content presented on the mobile version was a bit too overwhelming. The text wasn’t presented in a clear way for users who like to quickly find information they need. Lastly, the desktop version proved to us that we weren’t able to highlight some information or features we wanted to show clearly.
Branding
Hi-fi Prototype
.png)
Homepage
-
Added the special offers on top of the homepage is to make sure users can notice the coupon.
-
Text content is highlighted in different colors to emphasize certain features and key words.
-
Added customer reviews to the homepage so there is a brief view of the page’s content.
About Us Page
-
Combined "About Us" and "About Mike" page to reduce different pages needed to be clicked.
-
Cut repetitive content and reformatted content for better readability.
-
Added image gallery at the bottom of the page to allow users to find the gallery easier.
Services Page
-
Reformatted the content of the our services page to reduce scrolling and improve readability.
-
Added contact us button on the foot of the content to allow for easier contact.
Special Offers Page
-
New page created for special and deals offered by Mike's Car Clinic with coupons that be redeemed
Reviews Page
-
Added a prompt to let user know that they can click on the yelp to add a review.
-
Removed dead links to older review sites that are no longer functional.
Contact Us Page
-
Contact form changed to a more simple form, to give users a easier time filling out the form to reach out to the store quicker
Schedule Appointment Page
-
Given a dedicated page instead of a pop up.
-
Users are able to selected a specific services needed.
Hi-Fi Prototype Testing
Users are asked to schedule appointments, apply coupons, find specific information like how to take care of their car, and their business information. From the user testing we found that:
-
Typography needed to be changed as the users had trouble skimming through the walls of text.
-
Some users also had issues with the yellow background color being too harsh on the eyes.
-
One of the users wanted more continuity as “special offers” were tickets in the desktop version but in the mobile only being a block.
-
Another change the users wanted was on the appointment page, the users felt there is too much white space and the buttons are too small to click.
From the feedback we got we decided to change the background from yellow to dark gray to make it easier on the eye.
Changed the typography and highlighted key words and reduced text width and amount to make content more readable.
Changed the special offer content from blocks into tickets and finally reduced the white space and increased the sizes of buttons in the appointment page.
Final Mobile Prototype
Final Desktop Prototype
Takeaways
-
Learned how to work with clients and how to balance out client expectations, our own design philosophies, and user needs as we continued to iterate.
-
Becoming more experienced with Figma technical skills, especially in creating prototypes as learning to work with components has made my time in Figma much smoother and allowed me to cut down on some tedious work and to create a more consistent design across the different pages.
-
Learned that our user testing could have benefited from having more variety of users to reduce bias in our testing.