The problem: TrueCar+ is an online car-buying marketplace. It was originally designed to allow customers to buy cars completely online. However, we discovered a problem: the majority of dealerships did not want to use TrueCar’s digital paperwork portal. They had customized their paperwork to their liking, and they wanted to do it their way. (We also suspected that they felt their future would include dealers being removed from the process entirely, as Tesla and Ford are moving toward doing, so they were finding ways to regain control of the process.) This resulted in dropoff, as customers reserved vehicles through TrueCar+, but then were frustrated and confused that the dealer was asking them to complete a step outside of our flow. This meant we needed to remove the paperwork step from our checkout flow, and rework copy to be very clear about what each step in the buying process entailed. We also needed to remove some steps related to paperwork, such as ID verification and insurance information. In addition, legally, we could not complete payment until paperwork was signed — which meant we also had to remove our payment step.
The solution: We redesigned our checkout and order fulfillment flow. We created steps that the customer could complete, and then view those steps as having been completed. Copy-wise, we tried to celebrate each customer achievement as much as possible, and when it wasn’t appropriate to celebrate it, we tried to make the completion process satisfying. This was a major pivot for this product.
The results:
We had significantly more orders started — they increased by 5.47%.
20.45% more users completed the Customize Payments step.
24.9% more users completed the pickup or delivery step.
This is the beginning of the flow. You’ll see that it’s designed a little differently than the later flow. We wanted to have a visual difference between the time before the customer adds the vehicle to their cart, and after they add it to their cart — to mark the importance of them making the decision to pursue buying the car.
NOTE: Some of the vehicle details may change through the flow. This is because I put this flow together using a mix of Figma mockups and live pages.
The customer needs to sign in to see actual pricing on this vehicle.
The customer registers and agrees that dealers can now contact them.
Now the customer can customize their payments.
Next, they add protection products, which will increase their monthly payment.
They then can add accessories like floor mats or splash guards. Sometimes there are no accessories available — if so, this is what the customer will see.
Then they can choose to pick up their new car, or have it delivered.
Finally, they look over their deal summary…
…and add the vehicle to their cart! Now, we move on to the checkout flow.
Because the customer is financing their car, the first step in their checkout process is to fill out an application for credit.
So now we come to the Checkout Center menu. This was the original order of the steps before we had to remove paperwork - you can see that we also had to remove ID verification and insurance information, as well as payment, since without paperwork being signed, legally payment couldn’t proceed.
This is the new checkout center menu, renamed Your Order, a la Amazon, to make it clear that the customer is ordering their vehicle. This was the Your Order page structure before I added copy.
Next, we celebrate that the customer has received lender offers — but I also make sure to include copy that allows for different circumstances, just so the customer knows all the things that might happen. This copy can’t be hidden in a tooltip or a drawer — legally, it has to be next to the lender offers, so that there’s no chance of a customer saying we tried to hide important information. Also, if a customer is not approved for a lender offer, their journey with TrueCar + ends here, unfortunately — they will need to contact their dealer to find another lender offer.
I then added copy to describe each of the checkout steps. Here, the customer has received lender offers, but hasn’t yet chosen one. That’s their next step.
And we celebrate when the customer accepts a lender offer, both visually and with copy.
Back to the Your Order page, with one more task completed. Now, onto finalizing their order details.
Order confirmation. This is somewhat of a serious step. We don’t want to be light-hearted here. This is a big purchase, and the customer needs to know exactly what they are agreeing to.
Order confirmed! The dealer sends an email to the customer approving their order. That email contains a link which will take the customer back to this page, with the Schedule Pickup/Delivery task now unlocked.
The customer now schedules pickup or delivery of their new car.
More celebration with design and copy as the customer nears completion of the flow.
Now we celebrate! All tasks are done (with options to view or change information) and the customer has finished the TrueCar+ checkout/fulfillment flow. A note on emoji use: We ran a qualitative test asking users how they felt about the use of emojis in UX flows. The results were 60% in favor of emoji use. We decided that it was an easily recognizable way to demonstrate a sense of delight, so we went with it.
The end result:
Our reenvisioning of the fulfillment and checkout flows had great results. In addition to the major wins I noted at the beginning, here are more metrics:
We had significantly more users selecting accessories — this increased by a whopping 117.18%.
1.67% more users submitted credit applications, which was a nice bonus, since credit applications hadn’t actually been a problem!