Jiffy Lube - Recommended For You

Overview

Design Process

Discover

Define

Ideate

Design

Deliver

Takeaways

\ Overview

Jiffy Lube, a leading car maintenance company, set out to deliver more personalized services for drivers. In 2019, AKQA defined a customer-centric vision for tailored car care. Five years later, that vision became reality with the launch of Jiffy Lube’s first personalized recommendation feature—using vehicle data and inspection insights to surface the right maintenance services quickly and clearly.

Jiffy Lube, a leading car maintenance company, set out to deliver more personalized services for drivers. In 2019, AKQA defined a customer-centric vision for tailored car care. Five years later, that vision became reality with the launch of Jiffy Lube’s first personalized recommendation feature—using vehicle data and inspection insights to surface the right maintenance services quickly and clearly.

Agency

Agency

AKQA

AKQA

Role

Role

UX Designer

UX Designer

Date

Date

Dec. 2023 - Present

Dec. 2023 - Present

\ Design Process

  1. DISCOVER

User Journey

  1. DEFINE

The Problem

  1. IDEATE

Recommendations

UX Focus

  1. DESIGN

Design Reference

Iterative Design

  1. DELIVER

Interaction

Wireframes

Annotation

\ Discover

User Journey

From a good start to a bad end...

From a good start to a bad end...

The most popular service at Jiffy Lube is the oil change. When customers bring their vehicles to a Jiffy Lube store for this service, they receive a comprehensive inspection. While Jiffy Lube’s intention is to provide thorough care, presenting too much information during the in-store experience can overwhelm customers.

Source: www.bugcomic.com

\ Define

The Problem

Disconnected communications and limited consumer confidence - a missed opportunity for all.

Disconnected communications and limited consumer confidence - a missed opportunity for all.

Consumer

CONSUMER

I want my car to run well

I want my car to run well

I want my car to run well

I feel like I am being put on the spot

I feel like I am being put on the spot

I feel like I am being put on the spot

I need some time to fully understand

I need some time to fully understand

I need some time to fully understand

I can’t afford all of this

I can’t afford all of this

I can’t afford all of this

I’ll think about it another time

I’ll think about it another time

I’ll think about it another time

This is too much information in a few minutes time

This is too much information in a few minutes time

This is too much information in a few minutes time

JIFFY LUBE

JIFFY LUBE

We want your car to run for a long time

We want your car to run for a long time

We want your car to run for a long time

I am giving you real-time information as I see it

I am giving you real-time information as I see it

I am giving you real-time information as I see it

We have online resources to help you understand

We have online resources to help you understand

We have online resources to help you understand

You don’t need to do these all at once

You don’t need to do these all at once

You don’t need to do these all at once

The issues will not fix themselves

The issues will not fix themselves

The issues will not fix themselves

This is the only time we are face to face

This is the only time we are face to face

This is the only time we are face to face

\ Ideate

Recommendations

Connecting content, educating seamlessly and elevating service can positively increase brand trust, retention and spend

Connecting content, educating seamlessly and elevating service can positively increase brand trust, retention and spend

pre

Low Effort

Create awareness and provide insight into upcoming needs

Remind consumers of needs

Create an ever-present module for glossary access

Create a “what you can expect” graphic or “steps” module

Send email updates

Medium Effort

Enhance existing content to explain safety related service needs

High Effort

Create ability to estimate, to add to cart, pre-check-out online, schedule appointment

Provide personalized recommended services

DURING

Low Effort

Pre-printed QR code on receipts

Add a prompt or graphic on receipts, the estimate summary and on the home page

Medium Effort

Print upcoming/deferred service recommendations on receipt with a follow-up email

High Effort

Introduce instant text notifications while consumers wait

POST

Low Effort

Direct the consumer to the FAQs/Tips in a Jiffy/Service description terms

Medium Effort

Send a follow-up text for services recommended

Connect additional safety content into estimates and reminders

High Effort

Create an option to consult when receiving service recommendations

BESPOKE

Low Effort

Create themed contents that create word of mouth, fun and human moments

Medium Effort

Provide links to value-add educational resources

High Effort

Consider an online campaign that acknowledges and make light of the current experience, while also promoting the benefits

*All UX related recommendations are in red.

UX Focus

Creating a centralized hub that can be accessed from anywhere

Creating a centralized hub that can be accessed from anywhere

\ Design

Source: Mario Kart 8 Gameplay

Design Reference

Every selection can be visualized

I drew inspiration from Mario Kart, a popular Nintendo Switch game where users can select different vehicles, tire types, and paragliders. Despite the abstract names of these parts, the game never feels overwhelming because it emphasizes visual elements over text. This approach serves as an excellent reference for handling vehicle maintenance jargon for Jiffy Lube. By focusing on clear, engaging visuals, users can understand complex information with ease.

Iterative Design
- Vehicle Lookup

Integrating User Data into the Jiffy Lube Website

The biggest technical challenge for this project was integrating users' data into the Jiffy Lube website. Fortunately, Jiffy Lube can now link a user and a vehicle through a receipt. As a result, all customers who have visited a Jiffy Lube store can provide their vehicle's VIN number or license plate to retrieve their information in the system and receive personalized recommendations.

Iterative Design
- dashbaord

Effective Presentation of Car Maintenance Information

To present car maintenance information without overwhelming users, we employed visual elements and a progressive exposure design strategy. Collaborating closely with our clients, we categorized services in two primary ways: Vehicle Location and Urgency Level, each containing several subcategories. The use of vehicle images and strategic color coding establishes a clear hierarchy, enhancing the user experience on this page.

Iterative Design
- Service

Visualize services for users

For most users, understanding services filled with technical jargon can be challenging. A practical solution is to visualize what we describe. For instance, when users are exploring services related to tires, we display tires on their vehicle. This approach allows users to better grasp the information and easily connect with what they are reading.

\ Deliver

Animation

Transition among services

To ensure a consistent user experience and keep users aware of their current location and the service they are checking, we maintain the vehicle's visual as a central element throughout the flow. This engaging approach not only enhances user-friendliness but also distinguishes our design in the current market. By incorporating fluent animation design, we ensure that our UX/UI design translates seamlessly into a real website experience. This attention to detail allows us to achieve a cohesive and intuitive interface that resonates with users.

Wireframes & Annotation I

Recommended for You dedicated pages with user flow

Recommended for You dedicated pages with user flow

These wireframes illustrate the functionality of the new "Recommended for You" feature, detailing the vehicle lookup process, dashboard design, service page design, and addressing all possible edge cases within this flow.

These wireframes illustrate the functionality of the new "Recommended for You" feature, detailing the vehicle lookup process, dashboard design, service page design, and addressing all possible edge cases within this flow.

Wireframes & Annotation II

Recommended for You Integration Modules

Recommended for You Integration Modules

These wireframes illustrate how the new "Recommended for You" feature is seamlessly integrated into the existing Jiffy Lube website. We designed customized integration modules for all relevant pages, including the homepage, service overview page, coupon page, etc.
Each module has at least two different versions: one for authenticated users and another for unauthenticated users. For specific pages, such as the homepage and location detail page, we have also created unique integration modules to handle edge cases effectively. This approach ensures a personalized and cohesive user experience across the entire website.

These wireframes illustrate how the new "Recommended for You" feature is seamlessly integrated into the existing Jiffy Lube website. We designed customized integration modules for all relevant pages, including the homepage, service overview page, coupon page, etc.
Each module has at least two different versions: one for authenticated users and another for unauthenticated users. For specific pages, such as the homepage and location detail page, we have also created unique integration modules to handle edge cases effectively. This approach ensures a personalized and cohesive user experience across the entire website.

\ Takeaways

Collaborative Efforts Behind the Project

"Recommended for You" is a significant project involving a broad team. Besides collaborating with UX and UI designers, I worked closely with project managers, strategists, data analysts, the development team, and client partners. Throughout this process, I learned how to gather valuable input from various stakeholders and effectively contribute to different stages of the project. This collaboration ensured a well-rounded and thoroughly considered feature that enhances the user experience.

"Recommended for You" is a significant project involving a broad team. Besides collaborating with UX and UI designers, I worked closely with project managers, strategists, data analysts, the development team, and client partners. Throughout this process, I learned how to gather valuable input from various stakeholders and effectively contribute to different stages of the project. This collaboration ensured a well-rounded and thoroughly considered feature that enhances the user experience.

The Importance of Presentation

In this project, I conducted numerous internal presentations to showcase my design work and gather feedback from our team. Additionally, I presented our work to clients multiple times. While I feel confident in my internal review presentations, client meetings can be more challenging. I need more training and practice to effectively manage the presentation process, especially when interruptions and off-topic questions arise. Mastering this skill is crucial for ensuring smooth and productive client interactions.

In this project, I conducted numerous internal presentations to showcase my design work and gather feedback from our team. Additionally, I presented our work to clients multiple times. While I feel confident in my internal review presentations, client meetings can be more challenging. I need more training and practice to effectively manage the presentation process, especially when interruptions and off-topic questions arise. Mastering this skill is crucial for ensuring smooth and productive client interactions.

Navigating Endless Edge Cases...

At Jiffy Lube, we often encounter complex scenarios due to the need for users to provide vehicle information and select a preferred store. This leads to multiple cases: users providing both pieces of information, neither, or only one. Every time we designed a page, we had to account for these different user situations.
Despite our best efforts to anticipate all cases, additional edge cases emerged when the development team began implementing the designs. Even more edge cases surfaced during testing of the new feature by Jiffy Lube. As a result, it has been an ongoing process to monitor the project and continually update our designs to meet users' evolving needs.

At Jiffy Lube, we often encounter complex scenarios due to the need for users to provide vehicle information and select a preferred store. This leads to multiple cases: users providing both pieces of information, neither, or only one. Every time we designed a page, we had to account for these different user situations.
Despite our best efforts to anticipate all cases, additional edge cases emerged when the development team began implementing the designs. Even more edge cases surfaced during testing of the new feature by Jiffy Lube. As a result, it has been an ongoing process to monitor the project and continually update our designs to meet users' evolving needs.