Valvoline Instant Oil Change – Checkout Experience Redesign and Design System Creation

Project Overview

Valvoline, known for its high-quality automotive lubricants and Valvoline Instant Oil Change services, started breaking down its old monolithic system into smaller, standalone apps to work more efficiently.

I was part of one of the first projects in this transformation, focusing on the Checkout app. This effort was designed to help all Valvoline stores improve the services provided to customers.

Since this was the first project, we also had to focus on atomic design to begin creating a Design System that would be used across all the apps.

The Problem

The primary challenge was that the monolithic POS system had a rigid, step-by-step process that made navigating between steps cumbersome for users. For the new standalone Checkout app, the focus was on designing an initial version that prioritized essential functionality while maintaining compatibility with the monolith for the first release.

The key UX challenges included aligning features with user needs, defining clear requirements, and improving the flow without overhauling the existing navigation, ensuring a smoother and more intuitive experience.

Team Collaboration

Around 30 stakeholders were involved in this project, including:

Product Managers
Business Analysts
Project Managers
Delivery Managers
Visual Designer
Front-end and Back-end Developers
QA Engineers
SRE Engineers

My Role

As a Product Designer and UX Researcher, I was responsible for understanding the pain points store managers faced during the checkout experience, wireframing the solution and ensuring the designs met both user and business needs. My main responsibilities included:

Defining the UX Design Strategy.
Conducting user research and interviews with store managers.
Creating low, mid and hi-fidelity screens along with my visual design peer.
Collaborating on the design strategy and documentation for a new design system, which would be used across multiple apps.
Validating designs through user testing and design critiques, iterating concepts based on feedback.
Aligning with developers on the feasibility of some of the features.

While I worked closely with my peer, a visual designer, to ensure visual consistency, my focus was primarily on research, strategy, and documentation.

Tools and Software

Figma
Storybook
Confluence
Jira
Azure DevOps (ADO)
UserTesting
Maze

Design Process

1. Understanding User and Business Needs

To ensure we were solving the right problems, we started by gathering insights from key stakeholders and store managers.

This involved:

Interviews with store managers to understand pain points in the existing checkout process.
Mapping out the AS-IS process.
Competitive analysis to identify industry best practices (Checkout).
Ideation workshops to map out the ideal experience, drawing from both web-based models (e.g., Amazon) and physical checkout models (e.g., Walmart).

We synthesized this information to define the most critical user needs and business goals.

2. Define and Ideate

With insights in hand, we began ideating and designing wireframes to address user pain points while maintaining some aspects of the existing system. The key goals were:

Keep existing navigation (for consistency and familiarity).
Streamline key features such as discounts, payment methods, and error handling.
Simplify user flows by focusing on the most essential actions.

We crated a roadmap and prioritized the work into three main steps of the checkout process:

1. Review Cart – Allow users to view in detail the selected services.

2. Select Payment Method – Streamline the payment method options and add contact information.

3. Complete Transaction – Provide a confirmation screen with the option to print the invoice.

Several wireframes were designed to map out the main checkout screens and flows. We had feedback sessions with key stakeholders.

Once the wireframes were aligned with stakeholder feedback, we moved to design the mid and high-fidelity screens.

While finalizing the user flows for each step, we were simultaneously designing, writing user stories, and developing the design system components with the front-end team.

3. Prototype and Test

I created the research plan and then we created interactive prototypes for both tablet and web versions of the checkout flow. These prototypes allowed us to:

Test the core features, interactions, and key user flows for the first release.
Validate the design with users (store employees) through a usability testing.

Through this user research, we gathered valuable feedback and made adjustments to improve usability, particularly around complex areas like discounts and error messages. Some minor adjustments were made to the discounts and the complete transaction screen.

4. Iterate and Finalize

Based on feedback from initial tests, we iterated some screens and added the latest requirements. We conducted additional user research with both in-store users (those interacting directly with the system) and customers (who observe the screen while waiting for services to be performed in the store).

This allowed us to:

Finalize and validate the overall user flows.
Ensure that the design met the needs of both store managers and customers.
Identify any final tweaks before development.

5. Handoff and Collaboration

Once the designs were validated, I collaborated closely with the product managers, development team, and design team to ensure proper documentation (interactions and flows based on user stories) and seamless implementation.

Key Learnings

Working with multiple stakeholders and managing several projects simultaneously for Valvoline helped me refine my design process and approach to different outcomes.

The experience of working on both the redesign of the Checkout App and the Design System at the same time was particularly valuable and it was even more to do it with my talented peer. It allowed me to demonstrate and improve various skills, from UX facilitation and defending design decisions to understanding the development implications for each component of the design system.

Although there is still room for improvement in the Checkout App, it was rewarding to lay the groundwork for future iterations, especially since this was just the first release.

I thoroughly enjoyed applying my project management, research, teamwork and visual design skills— the latter being supported by my talented visual design peer.

Demo

First Checkout iteration

Second Checkout iteration