GENERAL MOTORS

Checkout Optimization

A checkout flow optimization that elevates brand trust and prepares for growth.

The Problem Space

General Motors (GM) offers a range of valuable OnStar digital products that customers can purchase online. However, the current checkout process is outdated, cumbersome, and lacks user-friendliness. This has led to a high abandonment rate, with limited insight into the specific reasons or points at which customers drop off.

The Goal

As the product catalog expands, we require a highly scalable, optimized, and modernized checkout experience that can flexibly integrate new payment options to meet evolving customer preferences. Critically, this future-proof solution must be fully optimized for the mobile devices that now account for the majority of sales (over 60% globally). By delivering a streamlined, efficient, and mobile-friendly checkout process, we will ensure a seamless customer experience as our business is projected to grow 5-7% in the next year. 

Deliverables

Achievements:

Led the end-to-end redesign process, from initial concept to final implementation.

Crafted user-friendly flows and wireframes, ensuring intuitive navigation and minimal frictions.

Simplified with content optimization to achieve easy to understand terms and values.

Conducted regular stakeholder reviews to align the design with business objectives, legal requirements and technical constraints.

Validated designs through multiple rounds of usability testings and in-depth customer interviews.

Collaborated closely with the analytics team to implement comprehensive event tagging throughout the new checkout flow.

Developed a tagging strategy to capture key user interactions, enabling detailed funnel analysis and future optimization efforts.

My Role

Redesign the checkout experience, creating a seamless, mobile-first interface that aligns with brand guidelines, boosts user satisfaction and conversion rates, while enabling comprehensive data collection for both current rapid product expansion and future analysis.

Metrics

Abandonment rate

Customer satisfaction

Sales growth

Timeline

4 design sprints

3 development sprints

1 QA and enhancement sprint

What users say

  • "I like that I don't have to enter my payment information."

    Regular customer with 2 GM vehicles

  • "The checkout process is easy and modern."

    New GM customer

  • "I like seeing my discount applied."

    Customer with military discount

  • "I know exactly what I am paying each month."

    New GM customer

My design process

evaluation of the current experience shows high level directions

Through heuristic evaluation and analysis based on Baymard Institute’s usability research, I identified several critical usability issues.

  • Reducing the number of steps

    To drive higher conversion rates, we require a mobile-optimized checkout experience that minimizes friction for customers. By reducing unnecessary steps, simplifying to easy-to-understand content and delivering a frictionless checkout flow capable of easily integrating new payment options, we can increase the likelihood of customers completing their purchases even as our product catalog continues to expand.

  • Clear Call-To-Action

    To drive higher conversion rates, the checkout experience must feature a clear and prominent call-to-action button that guides customers through the process. By ensuring the CTA stands out and makes the next step obvious, we can reduce friction and increase the likelihood of customers completing their purchases, even as our product catalog continues to expand.

  • Optimize with data

    Given that mobile sales now account for over 60% of e-commerce transactions in the US and internationally, optimizing the mobile checkout experience is critical to driving conversion. A one-page checkout design is ideal for mobile optimization, as it simplifies the process and reduces the time and effort required to complete a purchase. 

  • Expand popular payment options

    From our research interviews, we found that customers are looking for multiple and easy ways to pay. Having a checkout that allows for multiple payment options can also significantly improve the customer experience and reduce friction during the checkout process. My new design ensured the accommodation of the addition of Apple Pay and Google Pay in the upcoming year.

Mapping the customer journey to understand context

By creating a comprehensive customer journey map based on the interviews I observed, I was able to build a deep understanding of how customers find and interact with our service. This exercise revealed numerous user pain points and opportunities for improvement, particularly at the consideration and loyalty stages of the customer journey. 

As a result, I paid close attention to enhancing the experience within these critical phases during the design process. Focusing on the areas of the journey map that highlighted user problems allowed me to identify high-impact opportunities to optimize the overall experience and drive better outcomes.

UX flows show clear connections

The UX flows facilitate discussions, reviews, and communications with cross-functional teams. They help illustrate feature connections, enhancing understanding for product managers and engineers.

Iterations on wireframes produced clarity and simplicity

Now my goal is to generate wireframe design explorations, gather feedback from a 20 over person design team, and create mockups of the top designs for prototype testing.

The key steps were:

  1. Generating mid-fidelity wireframe design explorations.

  2. Presenting the wireframes to the design team for feedback. 

  3. Aligning the designs with other related projects and platforms.

  4. Creating mockups of the top 3 designs for prototyping.

  5. Testing prototypes with current customers.

Usability tests gave me confidence

I created high-fidelity prototypes in Figma to showcase the new flows. Concurrently, we began recruiting suitable test subjects based on our predetermined criteria. 

Throughout the project, I conducted three usability tests, which revealed key findings and led to effective solutions. These results validated my assumptions and supported my design rationale in discussions and alignment meetings with the leadership team.

Simplified payment method

Automatically select the most recently used payment method or the one tied to an existing monthly subscription to streamline the checkout process. If no payment method is on file, clearly guide users to add a new payment method as the next step.

Concisely indicate the start date for each plan, the duration of the promotional pricing period, and regular pricing information.

Dates clarification

Final design optimizes checkout flow and prepares GM for growth

Key obstacles overcome along the way

  • Modal vs. full page

    Due to technical constraints, accessibility requirements, and our expanded product catalog, I redesigned the checkout from a modal to a full-page layout to accommodate increased content.

  • Legal copy

    I explored various UI designs to optimize user experience while meeting legal requirements.

  • New loading components

    To minimize friction and reduce wait times, I explored various loading UI designs and tested them in prototypes to determine which one best creates the perception of no waiting while ensuring users trust that their request is being processed.

Learnings and opportunities

  • Promotional code functionality

    Enhance the promo code application process. For example, auto-apply from promotional marketing email.

  • Rewards-based payments

    Boost loyalty through making it easier to use rewards as partial or total payments

  • Payment methods unification

    Unify payment flow across all platforms including parts and accessories, EV charging or in-vehicle purchases via an optimized payment method page or "wallet"