top of page

User-Centric UI for Miles Membership - GoMechanic

Product Design / 2021



In this case study, I delve into the process of designing a user-centered product from a student's perspective. This journey outlines the steps I took to create a meaningful solution that addresses user needs and challenges.


Research, analysis, product design, design systems, user-testing, and design delivery.


2 designers, 1 UX Researcher, 1 product manager 5+ engineers.


June 2020 —  July 2020

Discover Phase

Defining the Scope

The scope of this study revolves around the design of the GoMechanic app's AMC known as"Miles Membership" to create an intuitive and user-centric platform for booking automotive services. The goal is to provide users with a seamless and efficient experience when interacting with the app, Purchasing AMC.


  • Enhance user satisfaction by providing a seamless and transparent automotive service booking process.

  • Increase user engagement and retention through an intuitive and visually appealing UI/UX design.

  • Improve customer trust and confidence in the app's service offerings and pricing transparency.

Problem Statement

Enhancing User Engagement and Clarity in the Miles Membership AMC Feature

Pain Points

  • Lack of Clarity: Users find it challenging to comprehend the benefits and details of the Miles Membership AMC plan, causing uncertainty and hesitation in making a purchase decision.

  • Complex Information: The page presents information in a convoluted manner, making it difficult for users to grasp the advantages and cost-saving potential of the AMC plan.

  • Navigation Issues: Users encounter difficulties in navigating through the page, leading to frustration and potentially causing them to abandon the process.


  • Clear Benefit Communication: Craft concise and straightforward descriptions of the benefits provided by the Miles Membership AMC plan, ensuring users easily comprehend the value they will receive.

  • Simplified Pricing Display: Present the pricing structure in a visually organized manner, utilizing tables or charts to highlight the cost-effectiveness of the membership over time.

  • User-Friendly Comparison: Provide a user-friendly comparison section that illustrates how the AMC plan stands out in terms of cost savings and added features compared to individual services.

User Research

Our strategy team initiated a thorough assessment of the GoMechanic Miles Membership AMC page to uncover insights into the current customer journey. This audit aimed to identify gaps and potential enhancements in messaging and visuals, while concurrently outlining strategic objectives.

Next, In collaboration with the strategy and research teams, I outlined pivotal inquiries aligning with the essence of the Miles Membership AMC page:

  • Precise Audience Targeting: Who are the primary audiences engaging with the Miles Membership AMC page? How can communication be tailored to resonate uniquely with each group, driving effective upsell conversions?

  • Feature Focus: Which specific benefits, such as annual maintenance contract savings and SOS services, are captivating users? Understanding these features is key to strategizing effective upsell promotions.

  • Strategic Upsell Timing: At what juncture within the user's browsing experience is there a peak likelihood of engagement with upsell messaging related to the Miles Membership AMC benefits?

Devlope Phase

Implementing the Strategy

Implementing the Strategy

Creating a custom dashboard for distinct audience segments guarantees that the benefits of the AMC program resonate profoundly, resulting in increased upsell potential. This approach extends to tailoring dashboards for AMC customers, allowing them to access and review their personalized details.

UI mockup.webp

Showcasing Benefits

By emphasizing the savings on annual maintenance contracts and highlighting value-added services like SOS support, we enhance the overall value proposition, thereby fostering upsell conversions.

UI mockup-(

Engaging Communication Channels

Creating a multi-channel communication strategy enables us to reach our target audience effectively, ensuring a holistic understanding of the Miles Membership AMC program's value.

UI mockup.webp

Strategic Presentation of Benefits

Integrating upsell messaging within the user's journey at moments of heightened interest enhances the effectiveness of communicating the benefits.

UI mockup designwebp.webp

App Prototype



Some key lessons learned that I from the KodeUX case study:

  • Data Accessibility: Providing easy access to personalized details empowers customers to stay informed about their AMC program, fostering a sense of ownership and trust.

  • Visual Clarity: Designing the dashboard with clear and intuitive visual cues ensures that customers can quickly interpret their information without confusion.

  • Upsell Opportunities: The dashboard can serve as a platform for subtly showcasing additional services or benefits, encouraging customers to explore upsell options.

  • Continuous Iteration: Regularly updating and refining the dashboard based on user behavior and changing needs maintains its relevance and keeps customers engaged.

  • Value Communication: Clearly communicating the value of the dashboard and how it enhances the AMC experience encourages more users to engage with it.

  • User Education: Providing concise guides or tooltips within the dashboard assists users in maximizing its benefits and understanding its features.

  • Alignment with Brand: Ensuring the dashboard's design and messaging align with the overall brand identity helps maintain a consistent and cohesive customer experience.

Thinkin' what I'm thinkin'?
Let's chat away!

Page dead end? Yep, some things do end. But guess what? New horizons await through those right-side links!
Ready for the next chapter!  I'm open to new opportunities and would love to hear from you.
bottom of page