Save Cars

Adding the ability to save cars on DriveTime.com so customers can go back to their favorite finds.

DriveTime • 2022

Project Overview
Role

UX/UI Design

Team

1 UX manager, 1 product analyst, 1 UX designer, 1 content specialist, 1 graphic designer

Tools

Adobe XD, Miro, Zeplin

Challenge

When browsing cars on Drivetime.com, customers do not have a way to save which cars they liked and want to come back to.

Solution

Provide a visible and straightforward way for customers to save cars they are interested in and can get back to.

Project Background

Many of DriveTime’s competitors — and e-commerce experiences more broadly — offer a way for users to save items, typically through a bookmark or heart icon. At the time, DriveTime lacked this functionality. Users could browse a large inventory of vehicles but had no way to save options they were interested in and return to them later.

To address this, we launched an experiment introducing a “Save Cars” feature on the Vehicle Search Results (VSR) page. The goal was to improve the shopping experience by making it more interactive, while also capturing data on customer interest by vehicle type.

The initial rollout focused on mobile, with plans to expand to tablet and desktop if the feature proved successful.

Our hypothesis:

By providing a way for customers to save the cars they are interested in, we will:

  • Increase repeat views of a VDP within a session

  • Increase customers sending their terms to the dealership

  • Increase session to lead (for pre-GA2)

  • Ultimately increase session to sale (STS)

As the primary designer on this project, I worked on introducing a new interaction on DriveTime’s website, along with a dedicated page for users to view their saved vehicles.

Chapter I

Research

Competitor Research

While the ask seemed simple, this feature impacted several shared components across the site. I took time to research how other websites approached saving or favoriting items — what worked well and what to avoid. A key decision was determining the right interaction and icon. Should this feel like “saving” or “favoriting”? Would a heart, bookmark, or another pattern make the most sense for our users?

Some of my takeaways were:

  • The heart icon felt like the right choice. It’s a familiar pattern that also carries a positive emotional cue — users are saving vehicles that stand out to them. Tapping the heart aligns with that moment of interest: “I LOVE this car."

  • Simple animations were something I felt should really be a part of this experience to make tapping the heart interactive.

  • We will need some type of toast notification for immediate feedback and to confirm the user's action.

  • Some websites used this feature as an incentive to sign up or login. While we didn’t have an account creation feature integrated into our website yet, I wondered if limiting the users to the amount of cars they can save could be another way to encourage them to get approved.

Competitor Research

Chapter II

Riff

Brainstorming & Initial Ideas

In the early stages of this project, I created a table of initial concepts as a space to explore ideas freely. Some concepts could coexist, while others were mutually exclusive. Each idea included pros and cons, along with questions that came up during the process. I also collaborated with a content specialist to brainstorm supporting copy.

These concepts were then presented to Product to align on direction — outlining potential components, pages, and considerations so I could move forward with a clear set of priorities.

Initial Concepts


As a team, we decided to move forward with these concepts:

  • Add a heart icon to the header navigation for visibility

  • Add a heart icon to the vehicle card component

  • Add a heart icon to the Vehicle Details Page (VDP)

  • Design a toast notification when a user is saving/removing a car

  • Create a “Garage” page where saved cars will be stored (pre & post-approval experience)

  • For this initial round, users can save an unlimited amount of cars regardless if they’re in the pre or post-approval experience

Userflowing the experience

Mapping out the experience as a user flow helped identify all the new elements, views, and how they would connect. I created three versions (small, medium, and large) with each adding an additional layer of complexity.

User Flows

Hi-Fi Variations

Low-fidelity comps weren’t necessary for this feature, so I moved directly into high-fidelity — exploring placement of the heart on vehicle cards and defining the new “Garage” page.

These new views also required content and illustration support. I collaborated with our content specialist and graphic designer to develop pre and post-approval states for the Garage experience.

Heart Animation

Based on my research, we implemented a CSS animation (sourced from CodePen) to support the interaction. A subtle animation added just enough feedback to enhance the experience without overcomplicating it.

Header Redesign

Introducing the heart icon created an opportunity to revisit the header layout. I moved the hamburger menu to the right to improve reachability, making it easier to access with one hand — especially for right-handed users on mobile.

Chapter III

Refine

The Final Designs

After a few rounds of review, I presented the designs to Leadership and received approval to move into handoff. A prototype was included to demonstrate how the toast notification should behave and how users would navigate to the “Garage” page.

Some of the final decisions that had been made over functionality were: 

  • The customer does not have to create a login to access this functionality

  • The saved cars and the garage experience will be available to the customer as long as they are on the same device and the same browser (without clearing cookies/cache)

  • This is a mobile-only experience

  • The traffic will be split 50/50 between control and the save cars variation

Toast Notification Prototype

Chapter IV

Reflect

Experiment Results 🧪

Save Cars had no impact on global metrics other than a minor lift in return user sessions.

While there was no movement on global KPIs, the team felt that due to the great signal of intent that was provided by Save Cars (STS was 3.3% for those that saved cars compared to a global STS of .3%) we should implement and expand on the Save Cars functionality in future experiments.

This new experience also provided rich demand data from DriveTime's customers — a huge win.

Next Steps

Next steps include expanding the Save Cars experience to desktop.

What I Learned

  1. User flowing brings out the details that can otherwise be missed. The original ask sounded simple, but user flowing became an essential part of this feature because of all the moving pieces involved, including other experiments that were running at the time.

  2. Developers need more than just static visuals. Two major parts of functionality came up in this project, and it was a good reminder that as designers it’s important to think through all the tiny details of how something should be animating after an interaction rather than falling under the assumption that the developer just knows.

  3. Disproving the original hypothesis doesn’t mean the new experience was a failure. This experiment didn’t exactly do much for us in the sense that numbers were drastically shifted around, however it didn’t have a negative impact on our metrics either. The decision was still made to implement this feature because it still added value and further supports future plans to the site – such as giving users an incensive to create an account.

✨ Bonus

When this experiment became live, I designed for other mediums where this new feature would be introduced to our customers:

Tax Season Email

View Prototype →
Prototyped in Adobe XD

Instagram Post

View Instagram Post →
Prototyped in Adobe XD

← Back to All Works

← Back to All Works

← Back to All Works
©

2026

Elizabeth Ardelt