Holts.com Case Study: Improve Checkout Process on Mobile

Responsible for:  Research and Design
Research Methods:  In-person interviews / Recorded Sessions (Inspectlet)
Design Methods:  Persona creation / Customer Journeymaps / Sketching / Wireframing / Prototyping
Programs Used:  Sketch / Invision

Current Design
STORY:
After launch, I felt that the continuous scroll for the checkout process seemed a bit clunky. To back this up, I talked to a few customers in the lounge at our corporate office about using the checkout process and witnessed that the customers found the checkout process on Holts.com did NOT reliably work. I asked a handful of customers to pick a product, go to checkout, and adjust their payment form before completing the sale.

PROBLEM:
​Seems to be a continuous scroll without real clear division of a true step-by-step checkout process. Customers found it hard to navigate in checkout process to make adjustments. ​
CHALLENGE:
​Streamline the checkout process. Currently users are finding the 1-page checkout process a bit unclear and cumbersome, especially with making changes to previous stages.

Why the need?

Business Objective:
  1. To convert product researchers to paying customers
  2. Avoid potential sales from happening on competitor’s sites   
  3. To increase online sales and build consumer confidence
User Objective:
  1. To clearly identify and define the different stages of the checking out process
  2. To clear up confusion when needing to make changes throughout the checkout process
I’ve created some exploratory user personas and journeymaps to gain some introspective into the kinds of customers we have based on past demographic research. 

Wireframe sketches for exploratory ideas

​Holts.com Case Study: Improve Checkout Process – Design Iteration

1st Version - wireframes

I decided to do some lo-fi wireframes in Sketch to make sure my idea was sound.

​Step 1

​Step 2

​Step 3

​Step 4

​Step 5-checkout

Pros and Cons:

Pros:
  1. Creates section and clearer division
  2. Allows users easy access to previous sections for editing
Cons:
  1. May not be clear enough. Not enough division between stages
  2. Possibly may be initially overwhelming to older demographic

Final Design

​Step 1

​Step 2

​Step 3

​Step 4

​Step 5-checkout

Pros and Cons:

Pros:
  1. Each stage is separated out clearly to avoid user confusion.
  2. Large, visible button directs user confidently to
    next stage.
  3. Top sections remain fixed to header to allow user to click on any section for editing.
Cons:
  1. Top numbered sections might not seem intuitive enough. Testing will be needed.

Conclusion

I went back to the same group of regulars in the lounge and presented to them a prototype i created quickly. Judging by their reactions and verbal feedback, this was a definite improvement. An addition to the UI asset library would be done prior to the development stage.

"I really like the option of having the sections easily accessible up to in case i make a mistake or put in the wrong address before i pull the trigger. The less scrolling i have to do to find my way, the better." - John Alexander, Holt's Cigar customer, age 60

​
​Once the site re-work comes into play, this will become the new checkout process.

​Overall, this case study was a great opportunity dive deeper into the realm of a user’s experience and I learned a great amount of what it takes to influence a user's decision strategy.