ALO PRODUCT LISTING PAGE

Role - Lead Product Designer

Tools - Figma, SurveyMonkey, Usertesting.com

Year - 2022

Alo is one of the fastest growing e-commerce companies. They are a luxury Los Angeles-based wellness company with a focus on fitness, apparel, and skincare. Their annual revenue is around $250M and continues to grow every year.

Our PLP had a lot of accessibility and usability issues, so I was tasked to redesign the product tiles on the page. This was a fairly fast-paced project.

Problem

Right now, our PLP is not as functional as it could be. There is a lot of friction on the site before a customer can add to their bag.

How can we shorten the time it takes for a user to add an item to their bag?

How can we explore features that enhance the user's journey and make our site look better?

Discover

In order to learn more about how we can improve our PLP experience, I conducted a lot of qualitative research that involved of competitor/market analysis and customer surveys. I also conducted an audit of the page myself to see how it could be improved.

Old Design

Findings from audit and customer survey:

  • “Shop by Size” is redundant with Filters & Sort

  • “Shop by Size” takes up a lot of valuable real estate

  • Customers don't interchange between grid view and full view

  • There isn't much information around the product (i.e. color swatches, badging)

  • Customers want to add items from this page to this Bag

  • Product imagery is one of the most important parts of an e-commerce page, can we improve the imagery instead of having a white image against a white background?

Competitor & Market Analysis

When working in e-commerce, it's always an important part of my research partner to see what others are doing. This is to maintain a level of familiarity in your designs (the more friction, the worse) and you should always stay on-top of your game in the industry considering customers have so many options to choose from.

Prototyping

In designing, I created several explorations for different types of features I wanted to include in the redesign. These features included of: product-level badging (i.e. “new”), color swatches, sale/discount badging, Wishlist icon, Quick Add icon, Sold Out state, and Coming Soon state.

I reduced the options based off of flash feedback sessions I held in the office (ask product & engineering for their input), quick AB testing on usertesting.com, and accessibility tests.

For example, I tested some of the designs on images with white backgrounds and grey backgrounds to see if contrast would hold up. I also tested on different images to see how much of the image would be covered up by designs.

The Winner

Final Design

Key Features

  • Separating color name from product name (the brand has a huge emphasis on color drops and sometimes color names are cut off by the 2-line word limit)

  • Adding color swatches that also have the # of colors total, can be interchanged, and can also show if that color is sold out

  • Badging for “new” and “new colors”

  • Additional badging for “new arrivals”, “almost gone”, “sold out”, and more

  • Quick add button

  • Wishlist button

  • Removing “Shop by size” at top of page