BÉIS Product Display Page

Re-designing a purchase decision-making page for product.

TIMELINE:
2 months

TEAM:
BÉIS E-Commerce team and developers

MY ROLE:
Senior UX/UI Designer

TOOLS:
Figma, Asana, Hotjar, Nosto

THE NEED:

Leveling up our PDP page to include more educational components, display better product breadth, and prioritize highly engaged components to the top.

Our PDP experience wasn’t optimized to show the many functions and features of our smart, yet fashion-forward products. Our goal was to reimagine our PDP, by combining smart logic and efficient design for a more user friendly, clean and conversion-focused experience.

01. THE PROBLEM + GOALS

02. DISCOVERY

RESEARCH INSIGHTS:

  1. Video Engagement: While our story video demonstrates high engagement, only a small percentage of users reach this section of the page.

  2. Icon Interaction: Icons generate significant engagement; however, they are positioned further down the page, resulting in missed opportunities for visibility.

  3. Image Carousel Friction: The image carousel on mobile devices presents a friction point for users, as the scrolling experience is not smooth. Hotjar heatmaps show that users frequently click the arrow icons multiple times on desktop, indicating a less than smooth navigation experience.

  4. Limited Size Options: Our PDP currently only displays size options for roller products, which limits user choice for other products. This restriction also hampers user discovery and awareness of other size options, as customers may only find them by browsing our PLPs.

  5. Low Engagement Areas with Conversion Potential:

    • Description/Specifications/Details: These important sections are underutilized, indicating potential for improved engagement.

    • Reviews: While we have quality reviews that could assist users in their buying decisions, few users reach the bottom of the page to interact with them or engage with the review icon.

    • Breadcrumb Navigation: Users frequently utilize breadcrumbs to navigate back or explore other collection pages, highlighting their importance in enhancing user experience. However, we lack a robust linking strategy that could further facilitate this navigation.

COMPONENT VARIATION EXPLORATION:

We conducted a competitive analysis across adjacent industries and identified common patterns in widely-used components. This research revealed opportunities to incorporate our unique BÉIS aesthetic while identifying elements to streamline from our current experience. These insights provided a solid foundation for developing our initial wireframes.

03. REDESIGN

INITIAL WIREFRAMES:

For first round wireframes, I normally begin with only focusing on mobile. With 80% of our traffic coming from a mobile device and by working with restricted real estate, the team can prioritize what to pack on a page. I also chose to start wireframing a PDP that would have the highest amount of features and content to work with so that every need is addressed.

Based on our findings, there were several components that we wanted to introduce or revise.

  1. Updating our pagination on our image carousel for a more sleek scroll.

  2. Introduction of our size selector so consumers can explore the sizes available to our products. Before, they can only see different sizes on the collection page.

  3. We also wanted to revamp our Compare Sizes component. A business hurdle we were trying to mitigate was the volume of returns because consumers felt that the product they purchased was too big or too small. By creating its own section on the page, users are able to see how each product sizes are in relation to each other.

  4. Our walkthrough videos perform very well on organic and paid social along with the video in the story section below the fold. These videos give a first glance and educate the users on our newest products. Because of our desire to merge educational with commerce elements, a new See It In Action mimicking an Instagram Story was the perfect component to add.

2ND AND 3RD WIREFRAMES:

After discussing as a team which variations we’d like to move forward with and what we’d want to continue iterating, the 2nd and 3rd stages of wireframes concentrated on further revising mobile and translating it to a desktop experience.

  1. Size Selector: We opted to show a grid of all of the sizes available rather than a dropdown. This makes it easier for the user to move between PDPs.

  2. Compare Sizes: We decided to keep it simple with a graphic of a model and all of the sizes the product is available in to show scale.

  3. UI: We kept everything to a slider format for anything that involves a carousel.

  4. Desktop Product Images: We altered our slideshow-styled image carousel to a grid of images to allow users to see all images and videos up front.

  5. We also re-imagined how our PDPs would look when a product is Out of Stock or is made to Pre-Order.

FINAL WIREFRAMES:

In the final iteration, I showcased what the PDP would look like among products who have medium-sized and small-sized content, such as our Weekender bag and our Sport Sling crossbody across both desktop and mobile screens.

We finalized how the page would lay out in terms of flow and UI.

Annotations were accompanied with these wireframes for development handover.

04. LIVE PDP

Desktop

Mobile

RESULTS

We’ve seen great metrics after our new PDP went live for a month:

  • Overall Add to Cart (ATC) rate increased by 14%​

  • Conversion rate (CVR) on page increased WoW​

  • Longer engagement on page with a 12% increase scroll depth​

  • An 89% decrease in rage clicks​

  • An 8% decrease in drop-off rate​

  • High engagement with our 5 Star Functions and See It In Action sections.

Our metrics seem to hold steady with the increase month over month as we’ve been monitoring it for a 90 day period.

While we made huge improvements from this iteration, we'd like to continue to iterate and test for better optimization: breadcrumb linking, description & specs dropdown in our Phase 2 soon to come.​

​