Victoria’s Secret Model Diversity
Role
UX/UI, Strategy
Duration
3 months
Overview
This project was part of a cross-functional team effort to make the Victoria’s Secret site more inclusive. Through model diversity users might be able to make better determinations about how an item might fit or look on themselves.
This project demonstrates rapid, resource-efficient problem-solving when engineering resources are tight. The interim solution helping to better informing a future, more robust long term solution as engineering becomes available.
The challenge
Context
Victoria’s Secret is known for its Angels. It had always featured women with roughly the same proportion and little diversity. The customer base however is very diverse. Items like bras have a relatively high return rate due to size and fit issues when purchasing online and most of the determinations about how something might fit are happening on PDP.
Problem
One of the ways users are trying to understand if a product is right for them is by scrutinizing on figure imagery and looking for models they feel best reflects themselves.
We need to find a way to showcase to the customer a diverse representation of models wearing our products so the user has a visual that best relates to her unique self in terms of size, skin type and height etc.
KPIs
Primary: conversion & revenue
Secondary: less returns (measured over time)
Also tracking: customer sentiment & brand perception (qualitative)
Constraints
Engineering has little to no availability at the start of this project but we still have to move forward so think about low to no LOE for engineering solutions at the start of the project. The long term solution can include eng effort.
What research tells us
Through qualitative feedback via shop alongs we know customers browsing a PDP are trying to understand:
How will a product fit?
Is it comfortable?
What will it look like on me?
Is it a good value?
A site that reflects a diverse set of body types, race & ethnicities, ages and lifestyles allows customers to more easily visualize themselves wearing the products and creates a safe and welcoming environment that encourages brand affinity–whether through brand-generated content or user-generated content.
It is important to keep in mind that when thinking about model diversity when it comes to selling bras, both breast size and diversity of body type need to be considered.
Non VS Customer
“Inclusivity means being able to see yourself on the webpage.”
VS Customer
“I am looking at the pictures for someone that is a little bit smaller…like she is kinda a little bit smaller, but like my boobs are very small.”
Overview of competitive analysis
Brands are incorporating fit information regarding their models and in some case also offering UGC content that help a user better understand how an item might fit them.
Skims allows the user to see different models as they relate to the size selector within a modal
Curated UGC which is being incorporated into the primary purchasable image area to build out more robust model diversity (SavageX)
Model information being displayed for primary purchasable images (adidas)
Models are different when user interacts with color swatches rather than size (Girlfriend collective)
Ability to select a model (Third Love - not shown here)
Allowing customers to upload photos to their reviews (Aerie - not shown here)
Designing for quick learns
Keeping in mind at the start of this project we had little to no engineering support and limited photography to use. I turned to think about what capabilities we had available that required the least amount of effort from engineers in order to get some learns. Our most versatile feature on the PDP with the lowest level of development effort involved was the storyboard feature. I worked cross functionally with marketing design team members to get some creative assets in place for the top 10 best-selling bras utilizing existing model diversity photos shot for in-store use while mimicking the look and feel to coincide with store signage.
Qualitative Feedback
Feedback and behavior in shop alongs told us that users were skipping over this content, they felt it was an advertisement and didn’t realize it was the same bra with multiple models wearing it.
Iterating to continue learning
How might we get users to pay more attention to these additional models and not view them as just an advertisement. Marketing design was running low on bandwidth so we determined the lowest level of effort was to move from the storyboard feature and append to the end of the primary purchasable image carousel.
Qualitative Feedback
In the primary image carousel users did not look at the additional model slide as an advertisement but were also largely indifferent. Having only on model front images for 3 model sizes was not particularly useful.
Setting up the backend to enable the frontend display
In order to get consistent model data to appear in the primary purchasable image area I worked with cross-functional team members to update the fields needed within the CMS when images get uploaded to the digital asset manager. The CMS already allowed for model name, but we needed fields to capture height, and multiple size inputs as well as a process on file for those doing the uploads.
After this effort the engineers would soon free up to build a more robust solution.
A/B Testing
The first version of this A/B test started to trend down over the course of 3 days so we pivoted to reorder the images and relaunched, this improved the test results and got us to a slightly positive result proving that the image order is important to the user.
When running an unmoderated shop along we realized only ONE participant swiped through the whole carousel and saw all the models the rest stopped after 3 swipes. Half of the participants were looking for color choices for the product and were less concerned with model diversity. The other half of participants wanted to see a diverse range of models in order to determine how the product might fit them. Out of the 3 websites shown to participants in the study no one chose VS as the most diverse of the 3.
Assumptions:
Users don’t understand how many photos are in the carousel
Users want an easier way to see a model that best represents them
Some users still won’t feel represented but may still find it helpful to use a range of models to help determine their best fit.
Our models may not be diverse enough
Continue iterating
This is a small sample of iteration, there was ALOT of exploration and refinement with the UX team and crossfunctional partners. Along with prototyping and user feedback sessions.
Building a new feature
How might we showcase a more diverse set of models through an interactive feature that will allow a user to select a model closest to their body type? We took our new data and built a front end feature to take it for a spin.
A/B Testing the New Feature
Our A/B test trended down over the course of 3 days time and we had to make a quick pivot. In shop alongs we saw that users were not using the model selector, when they landed the smallest model size was selected by default and they would swipe through all the images in that size and then stop interacting with the carousel and start scrolling down the page.
We also found that we had data issues that were quite confusing to the customer, we featured images set by merchandisers which had no model information associated were overriding and showing up as the first image under each model selector, so a model who was a 36D could be the first model she saw when selecting 32B.
We also found that by allowing the selector to populate based on the model left a bad taste in some customers mouths due to lack of diversity for pages we didn’t intentionally shoot models for. A user might land on a page and see “Choose model size” only to scratch their head upon discovering 2 model selectors both caucasian women with blond hair with size 32B. The customer was left wondering, where is the diversity? and rightly so.
Revisions to escape confusion
I created a new version of the model selector that allows for a user to swipe through all the alt images seamlessly while highlighting a model size selector when the carousel hits an image with model data associated to a size in the selector. Conversely if a user wants to interact with the selector it will anchor them on tap to the first image in the carousel associated with that size. For this iteration selectors would appear based on size not model ID as they were in the first release which eliminates confusion when 2 models of the same size appear as 2 separate selectors.
A quick pivot back to a simple solution
Alas, we were not quite ready for a new feature. We needed a more robust set of models which required more on model photography and a team to upload them. Reverting back to the data display version instead of the picker allows us to grow into future solutions and iterate when the time comes.
The final solution displayed photos in a specific size order before appending flay lays at the end of the carousel.
Takeaways
The model information feature is still in use on the site today. Even with little to no resourcing there is always some improvement that can be made or a way to learn more about user behaviors. The shiny new feature may not always be the best solution for the time and you have to know when to scale back, iteration is key.
Model diversity and inclusivity is an ongoing effort that encompasses many departments to source diverse sets of models, shoot images, being inclusive also means including both larger and smaller size offerings for our products. Along with this feature I also worked on enhanced ratings and reviews which will help further the company diversity and inclusivity initiatives.
Future Enhancements
Continue to Add New Models
Where I left off it was clear we needed to continue our efforts to provide a diverse assortment of models.
Explore UGC
Explore new ways to showcase UGC increasing trust, transparency, diversity & inclusion. Some ideas: add UGC to reviews, add UGC to the PPI area, Inject fit info from reviews above ATC button.
Personalization
If the user chooses a size filter on category page, let the size follow through to the PDP and show the user relevant information and photos pertaining to that size.