AutoNation Mobile Checkout Progress Tracker

The Challenge
AutoNation, a leader in automotive retail, sought to modernize its mobile checkout process for customers purchasing vehicles online. The existing system lacked clarity and efficiency, leading to frustration as users navigated multiple steps without a clear sense of progress. To improve customer satisfaction and streamline the checkout journey, AutoNation needed a mobile-friendly progress tracker that provided transparency, reduced friction, and enhanced the overall user experience.

My Role
As Head of Design, I managed the creation of the progress tracker, overseeing the design team to ensure that every element met AutoNation's UX, brand, and design system standards. My responsibilities included leading UX/UI strategy when needed, collaborating with product and development teams if needed, and ensuring seamless communication between design and engineering for flawless implementation.

The Approach

Understanding User Needs

Conducted research to identify user pain points, focusing on a lack of clarity in the checkout process.
Partnered with stakeholders to define key requirements for transparency, ease of navigation, and actionable feedback during each step of the journey.

Designing the Experience

Created a step-by-step progress tracker with clear milestones, allowing users to visualize their progress in real-time.

Introduced expandable accordions for completed and upcoming steps, enabling users to review or preview information without cluttering the interface.

Designed a fixed action button for key interactions, ensuring that users always had a clear path forward at every stage of the process.

Visual and Functional Integration

Incorporated AutoNation’s design system standards to ensure consistency with the brand’s identity.

Leveraged AutoNation’s colors and typography to create a clean and modern aesthetic that guided users through the journey with minimal cognitive load.

The Solution
The Mobile Checkout Progress Tracker introduced the following improvements:

Progress Transparency: Users could now see exactly where they were in the checkout process and what steps remained, reducing anxiety and confusion.

Streamlined Interaction: The auto-open/close accordion system allowed users to focus on the current step while having easy access to previous or upcoming tasks.

Improved Efficiency: With actionable prompts and a simplified navigation flow, users were guided through the process without unnecessary delays.

The Outcome

Enhanced User Experience: Customers experienced a more intuitive and transparent checkout process, leading to increased satisfaction.

Reduced Drop-Off Rates: By providing clear milestones and actionable steps, the progress tracker minimized friction, reducing the likelihood of users abandoning the checkout process.

Brand Consistency: The tracker’s design seamlessly integrated with AutoNation’s brand standards, reinforcing trust and professionalism.

Reflection
This project showcased the impact of user-centric design on a critical customer touchpoint. By addressing pain points and prioritizing clarity and efficiency, the Mobile Checkout Progress Tracker not only improved the customer experience but also strengthened AutoNation’s position as an innovator in automotive retail.

Project Roles
UI Designer, Design Director
Skills
Creative Direction, Creative Strategy, Figma
Media
Mobile Apps, Products - Digital
AutoNation Mobile Checkout Progress Tracker
AutoNation Mobile Checkout Progress Tracker
AutoNation Mobile Checkout Progress Tracker
Support