My Garage

Responsive Website

Problem: “How can we help people become more aware of their vehicle maintenance needs to ensure their vehicles remain reliable for daily routines, family responsibilities, and recreational activities?”

Discovery

Continuing my course work for the Google UX Design Professional Certificate and building on my previous My Garage Mobile App Design, I approached the My Garage Responsive Website Design with a focus on the unique challenges of web-based interfaces. To kick off the process, I conducted a thorough competitor audit, exploring how similar solutions are implemented in the web space versus mobile. This audit provided insights into the strengths and gaps in existing platforms, helping inform my design direction. During this phase, I also refined and updated my personas to reflect the nuances of web users and developed a comprehensive site map, ensuring that the user journey was clear and intuitive.

Screenshot of the competitor Drivvo’s desktop web experience

Screenshot of the competitor CARFAX’s desktop web experience.

Screenshot of the competitor CARFAX’s mobile web experience.

Design

With insights from the discovery phase, I moved into the design phase of the My Garage Responsive Website project. Referencing a new site map, I sketched out new concepts, focusing on how users would interact with the responsive web interface. From there, I developed lo-fi wireframes and a lo-fi prototype, ensuring the design was optimized for usability testing and continued design iteration.

Wireframes with Accessibility Annotations

Prototype of three different screen sizes.

Handoff

After finalizing the design phase, I transitioned to handoff, focusing on creating high-fidelity mockups and ensuring the design was ready for implementation. I developed a new sticker sheet that expanded upon the design system from my previous mobile app work, maintaining visual consistency while accommodating the nuances of the responsive web platform.

I also created a high-fidelity prototype to illustrate key interactions. Given the project constraints, there wasn’t time for additional user testing, so I relied on personas to make informed decisions about user needs and preferences, ensuring the design was both functional and intuitive.

High level screenshot of design specifications

Screenshot of first screens design specifications

Video shows 12.9" tablet prototype in action.

Takeaways

This project allowed me to expand my UX design skills by focusing on responsive web design and adapting my approach from previous mobile app work. Conducting a competitor audit and refining personas helped ensure that the design aligned with web-specific user needs. Although I couldn't conduct additional user testing, leveraging my experience and insights from prior efforts allowed me to make thoughtful design decisions. This project reinforced my ability to balance design consistency with new platform requirements, further developing my skills in creating seamless, user-centered experiences.

Relationship with…

AI Research Participants

The AI research participants, developed through carefully crafted prompts, played a crucial role in shaping the app's design. By simulating behaviors, needs, and preferences, I gained valuable insights into the target audience and ensured that the app's design was aligned with their expectations. This approach was confirmed with friends and family network in later stages of design testing.