PRODUCT DETAILS PAGE

PRODUCT DETAILS

PAGE

dolls kill / 2022

dolls kill / 2022

Redesigning the product details page to fit a sophisticated, yet on brand feel to increase conversion rates.

Redesigning the product details page to fit a sophisticated, yet on brand feel to increase conversion rates.

What's the Problem?

1

Brand inconsistencies

Going through multiple iterations of redesigns previously, the overall site is inconsistent with CTA’s fonts, photos, etc. Majority of the features didn’t match the look and feel of the brand making the pages feel disconnected from one another. Overall, messy and incohesive.

2

Little exposure to product recommendations

Product recommendations were only on the landing at the time, limiting exposure to other products that users might like. Not having product recommendations in the product details page goes as a wasted opportunity to increase sales.

3

At Dolls Kill, we were having a problem with low engagement rates with users clicking onto the product details page, but not adding anything into their cart

Low engagement and conversion rates

Research

🙂 Visit landing page

🤔 Menu exploration

🧐 Look through product listing page

😄 Select product to look through

😁 Add to cart

🤩 Checkout

Common Blockers:

Low product exposure


Sizing not available until CTA


Details not available

Hotjar

We then looked at heatmaps of the the current product details page to understand and observe which features users were interacting the most with. Seeing which features they interacted with the most in order allowed me to prioritize which areas should be focused on and exposed to the user.


Features to focus on:

size selection

product details

size guide

Description

Details

Size & Fit

View More

Darker Wavs

Angel Face Baby Tee

$64.00

$38.00

Add to Bag

Similar shirt name

Similar shirt name

Similar shirt name

Similar shirt name

If you like Angel Face Baby Tee, you might like these...

Make it an outfit with these!

Sage Autumn Revival Cropped Sweater are you ready for sweater weather? This long sleeve sweater has a cozy ribbed knit construction, a crew neckline, and a curved crop hem.

Competitive analysis

We started off by looking at competitors that matched our demographic, By doing this we were able to compare these sites with our own site to see where we lacked and that other sites excelled on. We primarily focused on how they displayed their information like fabric details, available sizes, and marketing.


Sites we compared to:

Princess Polly

ASOS

Aritzia

Zara

Defining limitations and user questions

After forming questions and concerns around what are the main goals of the user and what should not be on the page to give users the most clarity as possible. We also came out with questions to send out to users in a survey.

Increase Accessibility

Easier ability to find details, sales, etc on PDP to increase conversion rates and decrease frustration in trying to find details. Lay everything out for the user

Align Features

Cohesive page to align with all other pages and brand overall. Aligning the features will hopefully bring the brand together and create a design system

Add Product Recommendations to PDP

Adding product recommendations to PDP will allow for more products to be exposed to the shoppers. This allows for users to add more items to their cart and increase sales

LOW FIDELITY + FEEDBACK

I started to sketch out and create concepts based on the research I’ve done. During this phase, I was designing and prototyping.

I created a low fidelity to show my initial idea and get alignment from the team

Gathered feedback on what needed to be changed from a top level. I talked them through my design and how it would work functionally so eng. team could start building towards it. We also set what eng. were able and weren’t able to build.

What’s New

Clothing

Shoes

accessories

home

beauty

collabs

shoes

sale

$US

search

Free shipping to canada on orders over $75

PAIR IT WITH

ribbed autumn revival cropped sweater

current mood

$50.00

$37.50

add to bag

description

Sage Autumn Revival Cropped Sweater are you ready for sweater weather? This long sleeve sweater has a cozy ribbed knit construction, a crew neckline, and a curved crop hem.

Details

Our Doll wears S and is 5'8

Light Green

Shell 55% Acrylic 45% Cotton Hand Wash Cold

Size Guide

share

Prodcut recs

Brand

product name

$40

Brand

product name

$40

Brand

product name

$40

Size Guide

share

ribbed autumn revival cropped sweater

current mood

$50.00

$37.50

add to bag

description

Sage Autumn Revival Cropped Sweater are you ready for sweater weather? This long sleeve sweater has a cozy ribbed knit construction, a crew neckline, and a curved crop hem.

Details

Our Doll wears S and is 5'8

Light Green

Shell 55% Acrylic 45% Cotton Hand Wash Cold

Size Guide

share

Feedback

  • Marketing wanted to add a section to do promotions on certain items

  • wanted to expose more products to the details page right when users open it instead of scrolling

  • CEO wanted the ability to quick add on products rather than having users going to another product page

  • Majority of feedback was UI changes like typography, image sizes, etc.

  • Marketing wanted to add a section to do promotions on certain items


  • wanted to expose more products to the details page right when users open it instead of scrolling


  • CEO wanted the ability to quick add on products rather than having users going to another product page


  • Majority of feedback was UI changes like typography, image sizes, etc.

V1 CONCEPTS

Majority of the feedback this time were stylistic changes in range from

  • Font changes

  • Font sizing

  • White space changes


A lot of stylistic changes were iterated through from the feeback and changed or not whether it aligned with brand and if eng team was able to build it

After feedback from multiple teams, I went back on hotjar to further understand the frustrations that users were having or if there were any other differences from the happy path that I did not account for. I then iterated on my designs based on the feedback and edge cases.

FINAL SCREENS

results + outcomes

Increase in Average Orders

Product recommendations saw an increase in average order values by 12%+

Increase in Item Exposure

Easier for users to find other products presented on model which led to an increase in sales by 16%+

Increase in checkout conversion

An increase in conversion to checkout rate by 8%+ due to an easier flow through PDP

Role

UX Designer

timeline

2 month iterations

team

Worked on a team of eng, CEO, product managers, and creative director

Problem space

1

Brand Refresh

Company wanted a refresh to modernize the webpage because they wanted to move the demographic towards late teens to early adult to match their products, rather than focusing on teens

2

Little product exposure

Users were only getting exposed to the product that they clicked on, but were having a hard time finding other products shown on the model. This was a wasted opportunity to present other products as well as a pain point for users who wanted to buy a full outfit leading to a decrease in potential sales.

3

At Dolls Kill, we were having a problem with low engagement rates with users clicking onto the product details page, but not adding anything into their cart

Low engagement and conversion rates

Emotional Journey

🙂 Visit landing page

🤔 Menu exploration

🧐 Look through product listing page

😄 Select product to look through

😁 Add to cart

🤩 Checkout

Common Blockers:

Low product exposure


Sizing not available until CTA


Details not available

Wanted to focus on the size selector and fix that because that was the main pain point for users trying to add to their cart and not being able to clearly see their size


Wanted to focus on size guide + details since many users are wanting to see how their clothes would fit them and they need to know in order to add their size + details of fabric 


Users wanted to find other products that were presented on the model, but aren’t able to → I want to focus on adding product recommendations + other products presented on on the page as well

findings + focus

Hotjar

I first looked at hotjar to see where users were clicking on the most. Many users were clicking on the add to bag button, which is where the size selector is, but not actually adding anything to the cart. I wanted to focus more on the size selector and noticed many users were actually looking at the sizing detail (sizing detail, fabric detail, etc.)


I wanted to do a focus on the Add to Bag button (size selection), product detail, size guide since those were the most clicked on

Description

Details

Size & Fit

View More

Darker Wavs

Angel Face Baby Tee

$64.00

$38.00

Add to Bag

Similar shirt name

Similar shirt name

Similar shirt name

Similar shirt name

If you like Angel Face Baby Tee, you might like these...

Make it an outfit with these!

Sage Autumn Revival Cropped Sweater are you ready for sweater weather? This long sleeve sweater has a cozy ribbed knit construction, a crew neckline, and a curved crop hem.

Competitive analysis

 I did a deep dive on other sites with similar demographics to see what they did well and what they weren’t doing well


Many of the the sites had visible size selectors that would allow for users to see which sizes were available before adding to cart which would help alleviate the pain points of getting users’ hopes up that they have their size


Size guide was a lot more clear for users on other sites than ours. Our size guide is confusing for many users to use since it is just a picture and we currently do not have the model details that users can base it off of

Research

User Surveys

We sent out surveys to returning customers and new customers to their emails asking experience questions of how users felt about the site in general. We asked questions like “What is your experience like when choosing a size?” We also have an area for users to type in their advice


  • Many of the users found it hard to select which sizes to choose


  • Many found adding to cart was a pain point since they would only want to see the size and not actually add to cart - pain point cause it add frustrations


  • Users would also like to see other products on the model to make a full outfit but are not able to 

LOW FIDELITY wireframes

concept EXPLORATION + FEEDBACK LOOP

What’s New

Clothing

Shoes

accessories

home

beauty

collabs

shoes

sale

$US

search

Free shipping to canada on orders over $75

PAIR IT WITH

ribbed autumn revival cropped sweater

current mood

$50.00

$37.50

add to bag

description

Sage Autumn Revival Cropped Sweater are you ready for sweater weather? This long sleeve sweater has a cozy ribbed knit construction, a crew neckline, and a curved crop hem.

Details

Our Doll wears S and is 5'8

Light Green

Shell 55% Acrylic 45% Cotton Hand Wash Cold

Size Guide

share

Prodcut recs

Brand

product name

$40

Brand

product name

$40

Brand

product name

$40

Size Guide

share

ribbed autumn revival cropped sweater

current mood

$50.00

$37.50

add to bag

description

Sage Autumn Revival Cropped Sweater are you ready for sweater weather? This long sleeve sweater has a cozy ribbed knit construction, a crew neckline, and a curved crop hem.

Details

Our Doll wears S and is 5'8

Light Green

Shell 55% Acrylic 45% Cotton Hand Wash Cold

Size Guide

share

Feedback from VM and PM

  • Mainly UI changes


  • Marketing wanted a sections where they can add promos whenever they wanted without skewing the rest of the page 


  • Wanted to expose more products right when users opened the page


  • CEO wanted a quick add to bag for product recommendations like they have it on PLP

v1 concepts

With this iteration I still received pushback for the size selection, but for the sake of receiving feedback for the other aspects, I chose to leave it out for this iteration as I work on trying to push for exposed size selections. I wanted the focus of this iteration to be on the product recommendations and the sizing details and size guide as those are also as important 


During this time I was able to make another iteration where the size selector was not too overbearing and matched the modernization of the theme

Feedback from VM and PM

  • There were a few UI tweaks that needed to happen (switch to a new creative director)


  • Font sizing


  • Font changes


  • New changes for UI CTA and ability to add product recommendations (that were on the model) under the selector to organize it differently 

FINAL SCREENS

results + outcomes

Increase in Average Orders

Product recommendations saw an increase in average order values by 12%+

Increase in Item Exposure

Easier for users to find other products presented on model which led to an increase in sales by 16%+

Increase in checkout conversion

An increase in conversion to checkout rate by 8%+ due to an easier flow through PDP

HMW

How might we make users feel more certain about the products they choose and feel happy about it?