A case study on a website-based diagnostic-tool for car owners to easily learn to maintain their cars and even book a mechanic.
Car ownership is increasingly challenging with modern cars' complexity and soaring repair costs. Busy lifestyles make it hard for people to find time for car maintenance. This website offers a comprehensive car-diagnostic tool, providing users with insights into their vehicle's health, empowering them to address issues on their own, and efficiently schedule a mechanic.
Persona
Empathy map
Prioritizing clear and smooth navigation and usability, I began the design process with drafting the sitemap and creating simple sketches on pen and paper.
The digital wireframes were created using the sitemap structure. I began with a desktop screen size as a majority of my target users would be using a computer when using this product. Once the desktop wireframes were complete, I moved onto tablet and phone screen sizes to ensure this design would be responsive.
To prepare for the wireframes for testing, I created the low-fidelity prototype by connecting the wireframe screens according to one of the main user flows: “Book a mechanic”.
Five volunteers offered to test and share their experience with the low-fidelity prototype.
Shifting away from the theme of stressful car ownership, the cruise brand seeks to spark a sense of adventure. This is why the brand was developed with imagery of forests and off the beaten path roads to bring our users a reminder of all the excitement that cars can bring.
Finally, it was time to refine the cruise website by adding the new branding and improvements from the usability study. The mockups brought cruise closer to reality.
This case study impacted my learning in a major way as I was pushed to learn more about web design standards. From text and image sizes, to margins and padding– I am grateful for the way I grew in technique. And most importantly, this case study taught me to always keep the user’s needs front-and-center.