Order Summary Optimization on Checkout

Role

Product Designer, leading the design iteration and testing

Time

4 weeks |

July 2023

Methods

Competitive Analysis

Data Analytics

Research Insights

Prototyping

Visual Design

Usability Testing

Tools

Figma

Usertesting.com

Airtable

Team

Product Designer, Design Lead, PM

OVERVIEW

Problem

The order summary on the checkout page is plagued by usability issues leading to confusion and cart abandonment, resulting in lower conversion rates.

Solution

A clearer and more concise summary that offers essential information upfront while minimizing distractions during the purchasing experience.

Outcome

75%

user satisfaction

2-3x

smoother checkout process

The redesign was validated and preferred by 8 out of 9 users. I recommended further iterations based on insights and provided next steps to our team director, earning their approval for implementation.


At the end of my internship, I was offered a return full-time role as a Product Designer 🥳

⚡️ Design Preview

EXISTING

PROPOSED

Title and Item Total

Product Card UI + Quantity

Service Add-ons cost grouping

Highlighting total cost & savings

Services under parent product

SETTING THE SCENE

What is an

Order Summary?

It enables customers to check for accuracy and verify that all information is correct prior to order submission.

Where does it fit in?

Wayfair currently presents its order summary alongside shipping and payment details, defaulting to a collapsed view that displays only the total price. Upon expansion, the summary reveals comprehensive product details.

On expansion

CHECKOUT PAGE

PROBLEM DISCOVERY

Challenges & Competitive Research

DISCOVERING CUSTOMER PAIN POINTS

Through discovery, data analytics, and with the support of the user research team, I identified specific issues causing confusion and frustration in the customer experience

5

7

3

2

4

1

  1. Total item count includes add-ons causing confusion


  2. Item count readability issue


  3. Dead/Rage clicks on Product Image Thumbnails


  4. Non-clickable product names


  5. Disconnect between parent product and its add-on


  6. Confusing flow and UI of card


  7. Lack of clarity in price breakdown


  8. *Promo code input absent

    (hidden under payment methods)

HOW WILL WE DEFINE SUCCESS?

Positive User Feedback

and Increased Satisfaction

Decrease in Checkout Exit Rates


Monitoring Order Modifications after Purchase

COMPETITIVE RESEARCH

In addition to examining best practices proven to enhance reviewing orders, I conducted an analysis of over 15 e-commerce websites, focusing on their order summaries to identify the most frequently used and noteworthy elements that worked.

What I looked for during the analysis

  • How were order summaries bring treated terms of visibility?

  • What was the extent of information shown?

  • What were the user actions that were allowed?

  • How were add-ons/services treated?

  • How were costs broken down?

Analyzing Current Practices and Trends

Best Practices - Takeaways from Analysis and Research

2

1

3

4

5

⭐️ Order Summaries are designed to be skimmed through ⭐️


New information is not introduced at this stage of the process. (Must be disclosed in the cart).


Most websites do not provide a direct link back to the product page from checkout. This could be due to "jobs to be done in checkout vs cart."


Add-ons to a product are not considered under total item count to avoid confusion.


The ability to remove a product at checkout is divided.

7

6

8

9

10

Promo code input field in the summary will align with standard conventions and expectations.


Quantity for each product must be explicitly stated.


Add-on Services are clearly nested under the parent product.


While emphasis must be placed on the total price, there should be a breakdown available for users requiring it.


Savings highlighted for emphasis and encouragement.

PROBLEM STATEMENT

How might we optimize the order summary to ensure clarity, meet users' needs, and simplify their checkout experience?

DESIGN EXPLORATIONS

  1. Expanding the Order Summary

Cart Summary

Cart Summary

X

Expanding Order Summary as a drawer.

Follows pattern of Cart Preview when browsing.


PROS

  • Larger area for product image and description

  • Avoids clutter on the collapsed version making it minimal



CONS

  • May lead user away from checkout process contributing to exit rates.

  • Technically harder to implement, may not be MVP


This option was ruled out based on a team decision.

  1. Ability to preview Product details

Opens in New Window

Cart Summary

Product Details

Product details open up in a drawer


PROS

  • Addresses dead clicks on product names.

  • Allows preview without taking user away from page



CONS

  • Ability to view product details at the checkout stage is usually not granted according to market research.

  • Any updates to product (size, color, etc) through the drawer would require backend integration.


⚠️ This option needed more discovery and impact study from PM and Dev – Shelved for next quarter.

  1. Collapsed State

🧠 Reducing Cognitive Load

EXISTING

Maximum of 6 product icons displayed

EXPLORATION

Add maximum number of icons and indicate more with “+1,+2...”

Move item count to title for clarity

Limit icons to 3

Indicate more products with “+1, +2...” variation

Eliminate product icons to reduce distraction

Change “Cart” to “Order Summary” to reflect conventional naming standard

READ MORE: Design Explorations

HYPOTHESIS

If we prioritize essential information, offer clarity and minimize distractions through progressive disclosure in the order summary, then users will feel more confident in placing their orders, avoiding confusion and the need to revisit their carts.

USABILITY TESTING

To test my designs, I created a research plan to evaluate how users were engaging with the redesigned Order Summary in comparison to the current experience. I received approval from the user research team and carried out a balanced comparison A/B test on Usertesting.com.

GOALS

  • What are users looking to do?

  • Impressions on product listing

  • How do they engage?



SCENARIO

You've selected products and services on Wayfair.com and added them to your Cart. You've filled in all your payment and shipping details. Now, you're ready to complete your purchase.

TASKS

  • How would you use this order summary as part of your shopping process? What are your initial impressions of it?

  • Where would you expect to click to see more information?

  • Which pieces of information are the most and least useful?

  • If there was one thing you could change about this section, what would it be?

  • On a scale of 1-5, how helpful did you find the information in this section to make you feel confident in checking out?

Glimpses of the Research Plan and Testing

Preview of the prototype we tested

8/9 participants expressed increased confidence in placing their orders after reviewing the redesign compared to the existing version.

What users preferred in the A/B testing

Current (1)

Redesign (8)

READ MORE: Highlights & Takeaways of User Test

IN SUMMARY


An order summary serves as a quick-check point for users to review their purchases. Unlike the cart, users value clarity and prefer additional information to reveal itself (on expansion) only if absolutely necessary.

The following were what users found most useful in the summary:

  • Price

  • Product Name and Image

  • Quantity

  • Add-on Services Cost Breakdown

  • Add-on Services Grouping

  • Removing Items

DESIGN OUTCOME

(Presented to the Lower Funnel Team with Further Recommendations)

EXISTING

PROPOSED

Title and Item Total

Product Card UI + Quantity

Service Add-ons cost grouping

Highlighting total cost & savings

Services under parent product

IMPACT AND NEXT STEPS

An improved order summary experience would positively impact the overall efficiency and user satisfaction of the checkout process while aligning with:

Smoother checkout transactions

Reduced exit rates

Decreased instances of order modifications

With room for development and testing, certain elements required further exploration and input from stakeholders. I compiled my findings and discussed areas that could benefit from additional exploration and enhanced clarity with my team.

Glimpse of Next Steps and Recommendations

FEEDBACK

"Abby consistently places the user's needs at the forefront of her designs, investing time to comprehend insights that ensure her creations are not only visually appealing but also intuitive, and purpose-driven. This resulted in a winning user tested redesign."

Devika Gupta
Lead Product Designer, Wayfair

REFLECTION

My Biggest

Challenge

Striking a balance between business value and user needs. I invested time in engaging with the Product Team to understand business decisions shaping the Checkout page. Through prioritizing user advocacy, I deepened my understanding of the product and business strategy integral to the Cart and Checkout processes in an e-commerce website.

A Key Learning

Understanding the multiple ownerships for features on a single page and finding ways to get them all to align to a single strategy. I developed effective communication strategies to collaborate, offer recommendations, seek advice on design work, and address current user pain points across diverse teams including product, design system, financial and content writing.

With More Time

I Would

Dive even deeper into the groundwork laid by past research and testing on the feature conducted years ago. Also, exploring additional edge cases could bring valuable insights and improvements to the implementation.

© Aadba Rasheed 2024