.png)
Jiffy Lube
Jiffy Lube, a leading car maintenance company, aims to provide personalized services for drivers. In 2019, AKQA developed a vision for a customer-centric Jiffy Lube of the future, focusing on tailored and personalized car care.
Five years later, AKQA received approval to design the first truly personalized recommendation feature. Leveraging data, we can now integrate a comprehensive range of recommended services into the website, identified through complementary inspections. This feature enables customers to quickly look up their vehicle and retrieve all necessary maintenance recommendations to keep it in optimal condition.
Recommended For You
Agency
AKQA
Role
UX Designer
Date
Dec. 2023 - Present
Status
Under Construction
Feature Team
Christoph Friess(UX Director), Andrew Plempel(PM), Jorge Corrales(UI), Kenji Tomita(UI), Melissa Reitano(Copy Writer) + Development Team
▌DESIGN PROCESS ▌
DISCOVER
DEFINE
IDEATE
DESIGN
DELIVER
User Journey
The Problem
Recommendations
Design Reference
Interaction
UX Focus
Iterative Design
Wireframes
Annotation
▌DISCOVER ▌
User Journey
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.
CONSUMER
JIFFY LUBE
I want my car to run well
We want your car to run for a long time
I feel like I am being put on the spot
I am giving you real-time information as I see it
I need some time to fully understand
We have online resources to help you understand
I can’t afford all of this
You don’t need to do these all at once
I’ll think about it another time
This is too much information in a few minutes time
The issues will not fix themselves
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
PRE
DURING
POST
BESPOKE
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
Print upcoming/deferred service recommendations on receipt with a follow-up email
LOW EFFORT
Pre-printed QR code on receipts
Add a prompt or graphic on receipts, the estimate summary and on the home page
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
MEDIUM EFFORT
Enhance existing content to explain safety related service needs
HIGH EFFORT
Introduce instant text notifications while consumers wait
HIGH EFFORT
Create an option to consult when receiving service recommendations
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
HIGH EFFORT
Create ability to estimate, to add to cart, pre-check-out online, schedule appointment
Provide personalized recommended services
*All UX related recommendations are in red.
UX Focus
Creating a centralized hub that can be accessed from anywhere
▌DESIGN ▌
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.
Source: Mario Kart 8 Gameplay
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
- Dashboard
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
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
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.
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.
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.