© 2019 by Marie.

Redesigning the Checkout Experience

User Experience and UI Design

Introduction

RealTruck is revolutionizing the truck accessories industry through a focus on innovation, inspiration and unmatched service. RealTruck provides an immersive and engaging experience for truck enthusiasts through expert advice and comprehensive information on every product they sell.

Challenge

Simplify the checkout process from 6 steps to 3 and improve visual style.  These improvements might significantly reduce the completion time and reduce cart abandonment.  

My Contribution

Tools Used

My Design Process

We had 3 remote Google Hangout meetings, during which I’ve asked some questions and gathered stakeholders ideas to identify goals for the checkout redesign.

Discovery
Discovery

We identified online retailers who have their checkouts absolutely right and gathered ideas. Conducted brainstorming meetings with project stakeholders and development team to define the areas that needed improvement.

Online Research and 
Team Brainstorming
Define

From the very beginning, I designed in high fidelity to establish visual hierarchy and put relevant accents. Stakeholders were able to instantly see their vision realized and were able to judge how well it met their expectations, wants and needs.

High Fidelity Designs
Define

Provided a highly detailed dynamic version of the mockups to demonstrate various user scenarios. Prototyping made it easier for the Development team to have surety in what they are building before final production.

Prototyping

Presenting the prototype to the stakeholders to receive feedback.  Conducting user testing and evaluating users feedback at various stages helped me to discover and eliminate pain points at early stages. 

User Feedback

After a few more iterations, I designed the final screens. 
My aim was a clean, modern look that helped users checkout quickly. 

Iteration
Define

Since the site mainly targeted men, we went for a masculine, rugged-yet-clean and fresh look and feel. The result of our research revealed that men respond better to dark colors and straight, horizontal lines across the page.  

Final Design
Define

Produce design specs, gather all the assets and write documentation for the developer.

Developer Handoff

UI Design

Summary

Goal of this project is to reduce shopping cart abandonment.  The primary culprit for shopping cart abandonment is the checkout process. By improving the checkout process, sales will improve by a huge margin.   

Ways to Improve the Checkout Process:

  1. Make checkout mobile-friendly: Optimize the checkout process for mobile users.

  2. Use a progress indicator: Customers need to be informed about where they are in the process.

  3. Be generous with payment options:  Make it easy for customers to pay using the most common methods of payment. 

  4. Put security features: Need to make sure that every step of the checkout process features trust signals 

  5. Request only the essential information: Endlessly filling out forms is the bane of many online shoppers. They don’t enjoy it. In fact, generally speaking, the less you ask for, the more they will be likely to buy.

We simplified the checkout process from 6 steps to 3, and the billing form from 14 questions to only 9 in a much better and clearer visual style, as a bonus. I believe, such improvements will significantly reduce the completion time and the bounce rate of potential purchasers.