top of page

UI/UX case study

Mike's Car Clinic

UI/UX redesign of Mike's Car Clinic's auto repair website

MacBook Pro 16.png
iPhone 13 Pro.png


Team project for Practicum for Professional Web Design course


Issac ln, Jonathan King, Maged Waly


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.




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.


9 weeks (March 2022)



Frame 165.png


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

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

Ellipse 31.png

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

Ellipse 32.png

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

Ellipse 33.png

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

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

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

Site map.png
13 Pro - 1.png
13 Pro - 2.png
13 Pro - 3.png
13 Pro - 4.png
Desktop - Homepage.png
Contact Us.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.



Frame 172.png

Hi-fi Prototype

Hi-Fi Prototype
Desktop - Homepage (v2).png
About Us.png
Contact Us.png


  • 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. 

Hi-Fi Testing

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 Prototype
Frame 177.png
Frame 180.png
Frame 178.png
Frame 179.png
Frame 181.png

Final Desktop Prototype

Dell UltraSharp 24_.png


  • 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.

Check out my other projects!
bottom of page