Streamlining Online Shopping

How can we streamline information delivery for a clearer and more concise shopping experience, ultimately enhancing shopability? Our aim was to boost customer retention by improving the online shopping journey with the end goal of increasing conversion and minimizing returns from online sales.

Date

Feb 2023— Ongoing

Type of Project

UX Design

Role

UX Designer | 3 Designers | Manager | Developer

OVERVIEW

CHALLENGE

Problem Statement: How can we educate our customer about product details, fabrication and fit and increase trust in our brand and reduce returns?

Create opportunities for informative detailed photography, clear sizing information and improved hierarchy of product reviews.


goals

01

Improve Photography Style and Layout
Enhance photo carousel experience, showcasing fit and fabrication details through informative photography style including on figure and laydwon overhead shots of product.

02

Informed Customer Product Details
Ensure a clear information hierarchy of product details in order of relevance to the customer to facilitate informed size choices.

03

Provide Clear Customer Insights
‍‍Optimize the layout of product reviews, recognizing the significant reliance customers place on peer feedback

DATA

CHALLENGE

​Instead of asking "How can we reduce returns?" --> ask "How can we get consumers to keep more of their purchases?" ​

Customer Insight

01

Every year a percentage of sales/purchases are returned. We have a goal to reduce this number by 15% by 2024.

02

The size and fit of an item is the most common reason for a return next to fabrication and detail.

03

Emphasizing the importance of the sustainability impact we can have by reducing transportation/packaging cost due to returns and diverting waste from landfills.

PAIN POINT #1

Photography Layout

In a standard carousel, critical issues include restricted visibility of product images, mandatory sequential navigation, and insufficient mobile optimization. These factors can contribute to overlooked content and the potential loss of important product information.

Introduce brick layout; an inspirational way to showcase imagery that can potentially address all key issues mentioned above. Moving forward with shooting minimum 6 product placement photos, or even number as default. Including a flat shot of the product allows customers to zoom in on fabrication

Examples

RESULTS

A/b Testing

01

Increase prominence of photography throughout experience. Photography sells. On-figure/ model photography and detail shots help sell the fabrication of the item. Implement this photography style change to both versions

02

Develop two versions of the product page: the control (A) being the original layout and the variant (B) the new brick layout. Ensure that only one variable is changed between the two versions to accurately measure its impact.

03

Outcome could be measured with hotspot mapping or conversion (with product data taken into consideration)

Results

01

Enhanced Product Visualization
‍A brick layout allows for larger and more detailed product images, providing customers with a clearer view of the item.High-quality, detailed visuals help customers better understand the product, leading to increased confidence in their purchase decisions.

02

Increased Engagement:
‍A visually appealing brick layout encourages customers to spend more time on the website. Higher engagement can lead to increased exploration of products and, subsequently, higher chances of making a purchase.

02

Mobile Optimization
Brick layouts are often responsive and work well on mobile devices, providing a seamless experience across various screen sizes. With the increasing use of mobile devices for online shopping, a mobile-friendly layout can capture a larger audience.

PAIN POINT #2

Clear UI

01

In the example at the right you can see that we offer size 24—35 and inseam options. Based on a size choice, certain inseams are not available/manufactured. When this occurred, the particular inseam was crossed out, indicating to the customer that we were out of stock of that inseam and size combo rather than completely not available.

Example

KEY TAKEAWAYS

UPDATES on product page

01

Visual Indicators for Unavailability vs Out of Stock
‍Introduce visual indicators such as strikethroughs or color-coded labels for out-of-stock inseams.Clearly communicate to customers that the specific inseam for their chosen size is temporarily unavailable.

02

Responsive Sizing Chart
‍Redesign the sizing chart to be responsive to user selections.Provide a seamless experience where customers can easily switch between sizes and see corresponding available inseams.

03

Contextual Availability Messages
‍Include contextual availability messages near the size and inseam options.For instance, display messages like "Limited Stock" or "Out of Stock" to set customer expectations.

Results

01

Improved Conversion Rates
Monitor the conversion rates on product pages. Expected Outcome: An increase in conversion rates as customers experience clearer communication about size and inseam availability, leading to more confident purchasing decisions.

03

Reduced Cart Abandonment Rates:
‍A decrease in cart abandonment rates as customers encounter fewer obstacles related to sizing confusion, leading to a smoother checkout experience.

03

Reduced Return Rates
Track the rate of returns for products related to sizing issues. A decrease in return rates as customers are better informed about available size-inseam combinations, reducing the likelihood of receiving an incorrect or undesirable product.