Grid & List
Changing the way a customer sees vehicles on DriveTime.com.
DriveTime
Project Overview
Role
UX/UI Design
Team
1 manager, 1 product analyst, 1 UX designer
Tools
Adobe XD, Miro, Microsoft Teams, Slack, Zeplin, FullStory
Challenge
With the way the current Vehicle Search Results (VSR) page looks on mobile, customers can see just 1-2 cars at a time in their viewport. Observing customer behavior in FullStory, it is apparent that customers are scrolling quickly through VSR so they can see a lot of cars in a short amount of time.
Solution
Create a new “compact” view that shows multiple cars in the viewport on VSR with minimal information.
Control
Grid
List
Project Background
An observation had been made in FullStory that a lot of our users were scrolling quickly through our Vehicle Search Results page, almost as an attempt to view more options in a shorter amount of time. Since a lot of what our customers focus on when browsing cars is their down payment, this also raised the concern that maybe customers aren’t seeing what they are looking for financially, even if it is available.
A single vehicle card on mobile was covering quite a bit of real estate, so it was decided by leadership that we kickoff a new experiment where we have a more compact version of this card. Our hypothesis: By showing customers more cars with terms at a time, we would increase the likelihood that customers will find cars <$1,500 down and click into VDP. This could increase our lead to sale numbers and the amount of VDP views that are occurring on mobile.
I was the UX designer assigned to this project. This feature gave me the opportunity to iterate on a smaller, more compact version of our mobile vehicle card while keeping in mind what information still needs to be displayed in the VSR view.
Results
When first launching this experiment, the traffic was divided between Control, Grid, and List. After about two months, Grid was outperforming Control (an increase of 1.4% LTS) with List just slightly underperforming (a decrease of -0.7% LTS). For the next three months, traffic was split 50/50 between Grid and List to gather more data around these two views.
In a 14-day static pool comparison, List was performing better than Grid on a lead-sale basis.
The decision was made to direct all traffic to the List variation.
What I Learned
Tap targets are important. Sometimes elements are smaller than the size of their tap target. Since these new card designs are so compact, I had to make sure the heart icons had enough space around them – even if that space is invisible. Before this feature, this was not something I was quite as aware of.
In the end, it’s about the business. In this feature I strongly advocated for having a toggle, giving the users the ability to switch between views. The toggle did not hit MVP during this round and it was later decided that we pick one view or the other. While I think a toggle would’ve been fun to have – especially to emphasize our that we give our users a personalized experience, the ultimate goal was that we increase our lead to sale numbers, so it was a reminder for myself that the business comes first.
A bad iteration can lead to the right solution. Sometimes it’s necessary to create the version you know is going to look bad because it actually ends up sparking another idea that otherwise wouldn’t have been thought of. This was a feature where the final look for pre-approval was born out of a variation that I knew wouldn’t work.