Redesign of Toyota SmartPath, an online car buying platform ​

Payment Options

The previous SmartPath checkout experience, pictured below, was a crowded mix of ‘Payment Options’, ‘Cost Summary’ and ‘Estimate Payments’. The layout left users unsure of where to click with no clear checkout process.

Initial Outline of Changes

The team proceeded to break out each section into a singular step.

The individual ‘Finance’ and ‘Lease’ tabs were the biggest task for ‘Payment Options’. A major focus was bringing more space to the options but also improving readability and differences of each offer. I created a few designs (pictured below) utilizing heavier, bolded numbers to bring focus to details.

Final Designs

The ‘Payment’ tab utilized the general direction behind the bolded numbers but ultimately had to reduce sizing on the lease length on behalf of legal needs.

‘Credit score’, ‘cash down’ and ‘annual mileage’ were also added with a focus on padding in the fields to match ‘lease’ and ‘finance’ tabs.  

Overall, the look is much more minimal, sharp and easier to scan. There are 4 steps with a clear CTA to direct the user to the next step. The team felt it was a huge improvement and users responded very well during testing to the new layout.

Cost Summary

This section summaries the lease offer, cost and totals but could use a little space, especially if the user decides to expand any of the line items. It’s a lot of information to convey for a single column on the page. The CTA does feel natural in the bottom right but with the heavy, bolded black lease offers it gets lost within the hierarchy.

Review and Feedback

In accordance with the ‘Payment Options’, the design team also separated the ‘Cost Summary’ for readability and comprehension.

Pictured below on the left was the original revision made by the team and on the right is an additional revision I created. I separated Pricing and Financing to bring more clarity to the category of each line item. On the left, the CTA was located below the pricing (not pictured). I tried to keep the experience on the left condensed to encourage the CTA and next steps for the user.

Final Designs for 'Review' Tab

The team took direction from both revisions above and ultimately kept the multiple cost totals but also the compressed layout. ‘Cost Summary’ needed to identify all the individual line items for legal purposes and could not be simplified to my previous revision. ‘Apply for Credit’ became a larger feature but fit nicely on the page after utilizing styles from the ‘Payment’ tab.

Price Bar

Since the team broke down the buying process to specific steps, the platform needed a price bar and status. It was important to document and save each piece of information the user chose during the process.

The price bar also added a little bit more validity to the experience. With each payment decision, the price bar automatically updated. And, as the user completely each step, the steps would include a status next to them.

Final Designs

The product shipped shortly after my contract with the team finished. The redesign was a huge success and major win for the SmartPath team. It was delivered on time and within budget for Toyota.

My contract was a great opportunity to identify value within a larger design team. Entering halfway through a project is a challenging and rewarding. It’s integral to not slow down the team dynamic but also understand where you help achieve deadlines, refresh old designs and ultimately help deliver the final product.