The models on your site say a lot about who your product is for. You don’t want to inadvertently alienate shoppers because they don’t see themselves represented in your product photos.

In our research for the 5th Edition of our Ecommerce User Experience report series, we noticed increased variety in the types of models used to display and feature products across the web. Many sites have made clear efforts to be inclusive in their choice of models.

When models were diverse, shoppers noticed. Many study participants were happy to see models of different sizes, ages, and races on ecommerce sites.

Diversity Across Site Photography
A customer on Vrai.com was shopping for a diamond engagement ring. She thought that the racial diversity of the models on the site was especially refreshing for bridal products:

“Oh, and this has somebody actually wearing it as well. So that’s actually really nice. It’s also nice that they included a diversity element, especially with, like, the current social movements towards showing more diversity within brands like that as well. Because a lot of times when I’ve seen, like, engagements or wedding sites, they’ll just show, like, a traditional, maybe blonde-hair, blue-eyed woman with an engagement ring. But here they’re showing someone that looks like me, which is important.”

vrai diamonds diverse models
Vrai.com used diverse models of different races, which made one shopper feel included.
girlfriend collective modal windows diverse bodies
The newsletter signup modal on the girlfriend collective’s site featured a mix of models of different sizes and races. The first screen (top) rotated through several images of products on different types of models, while the second screen (bottom) featured just one model.
Allowing Shoppers to Select Their Model
Ecommerce sites selling clothing and beauty products tended to use diverse models to showcase their products — a trend that did not go unnoticed by our study participants.

Several of these sites went beyond just showing diverse models in site photography — they allowed shoppers to choose the model on which to view the products. Makeup shades can appear very different on different skin tones and clothing fits quite differently across body types. When users could adjust the model, they commented positively and took advantage of this option.

A user shopping for jeans on GoodAmerican.com noticed that she could choose her preferred model early in the shopping journey, on the product-listing page, and again on the product-detail pages. On the product-listing page, she said:

“Oh, you can select your preferred model because they’re different sizes. That’s cool. [She looked at her options.] So, Katie is similar to me. I’ll go with Katie, I guess; she’s more similar to my size than Charlotte and Rachel.”

Good american category selection
GoodAmerican.com: The top of the product-listing page invited the user to select a preferred model for browsing jeans. It included the measurements of each model and indicated that Katie was currently selected by underlining the text View on Katie.
A different user, who noticed this option on Good American’s product-detail page, said, “I like how the sizes go up to size 24; it’s very diverse and inclusive. So that’s good. And you change the model here if you want to, which is useful for all people.”

good american model selection product page
Good American’s site allowed users to change the model by clicking the link below the model image.
Clothing retailer Madewell also offered users the option to select models by jean size and height. One user appreciated this, but she was disappointed to see that all models were tall. However, knowing their height did help her to determine how the same jeans would fit her based on her own height. She said:

“Okay. It looks like the model is 5’ 9”. I’m only 5’ 4”. So, I’m going to change [the model].”

After realizing that all the model options were 5’ 9” or 5’ 11”, she said:

“Nope, everybody’s tall, but she’s around my size at least. I like the look of these jeans, and it looks like it hits higher up on her ankle.”

madewell product page selection
Madewell allowed users to select their model so users could determine how the jeans might fit on their own bodies.
Challenges Associated with Model Selection
Walmart’s website and mobile application allowed shoppers to select a model on which to view clothing products. This model-selection feature was accessible on product-detail pages.

Walmart select model CTA and size input
Walmart mobile app: (Left) Some products included a dark blue tab prompting users to choose their model. (Right) When users tapped on Choose my model, the feature prompted them to enter their size and height in order to present models that were similar to them.
Walmart select model and see item on model
Walmart mobile app: (Left) The model-selection feature presented several models so users could select the one most similar to them. (Right) After selecting a model, the product page showed the dress on the selected model. Users had the option to edit the model using the same blue tab.
After the user selected a model, that model was used across other products within the same category (e.g., Women’s Dresses). While it was good that users were not required to reselect their model on other products, Walmart’s model-selection feature had several usability issues:

Not all products within that category were compatible with the model-selection feature. When a product was incompatible with the model-selection feature, the model-selection call to action was not present, and a different model was shown instead.
walmart after selection some work some don't
(Left) The feature saved the user’s model selection and used that model to display other products that were compatible with the feature. (Right) Unfortunately, not all products were compatible with the feature; for example, the Dokotoo Sky Blue Dress was shown on a different model.


The feature did not take into account size categories. For example, the same standard-sized model was shown wearing plus-size products that weren’t even sold in regular sizes.
walmart standard size model in plus size item
A previously selected small-sized model was shown wearing a product that didn’t even come in standard sizes.
The model-selection feature didn’t show real photos of the model wearing each piece of clothing. Instead, the clothing was superimposed over the model’s frame. This approach can be misleading and may even defeat the purpose of viewing products on different models, because the feature simply stretches and compresses the image of the clothing to fit over the model’s frame. Real pieces of clothing may not be able to take on the shapes created by this feature.
walmart side by side same dress 2 models
The same dress is shown on models of two sizes on Walmart’s site. It’s clear that the image of the dress is the same and just adjusted to fit the model, as the placement of elements in the print are in the same exact spot.
The product thumbnails on the category listing page did not show the selected model. It would be better if category page images also reflected the users model choice, so these photos could be considered while browsing options.
Where Should Model Selection Be Offered?
If your site uses a model-selection feature, that feature should be easy to discover. Thus, it should be made available both on product pages (like in the Walmart example above) and when the user lands on a product-listing page for that corresponding category (like in the Good American example above).

When Should Model Selection Be Offered?
Model selection is a process with a relatively high interaction cost — users need to either enter their measurements (like in the Walmart example above) or select among a set of models of different sizes. Therefore, they should not be forced to do it for every product. The model-selection cost is justified only if most (if not all) products within a category can be displayed on that model.

That being said, some customers may not understand that their selection will apply only within a specific product category. For instance, customers who have selected a model when shopping for dresses may expect to see the same model when shopping for pants. For that reason, it is a good idea to clearly explain to users to what items their model selection will apply.

If many of your products are, however, not available on the selected models, it is best to not use a model-selection tool and instead, where applicable, to show a product on models of different sizes and skin tones (see the next section).

Multiple Models on Product-Detail Pages
The alternative to using a model-selection feature on a site is to simply show a product on models of different sizes and skin tones. This approach is more flexible and enables sites to deal with situations where they don’t have an equal variety of models available for all products within a category. On the other hand, it also means that thumbnail photos on product-listing pages will not necessarily show people of the same color or size as your user.

For example, since our study, Good American has simplified its approach and now shows pictures of different models on each of its product pages instead of asking users to select a model.

Good American Many models many sizes
Since our original study, Good American has removed their model-selection feature and instead shows the product in every available size.
Savage X Fenty took a similar approach and allowed users to select a size below the product photos to view the product on a model of that size. Savage X Fenty was also the only site we identified that included model selection for men’s products.

Savage X Fenty Models by clothing size
Savage X Fenty’s: Users could select a size (below the product photos) to view the product on a model of that size.
Nykaa.com, a site selling makeup and beauty products, allowed shoppers to see the beauty products on varying skin tones. One study participant who was shopping for a new lipstick noticed the feature. She found it incredibly helpful in picking out the right shade for her skin tone. She said:

“They have this feature to try it on. You have to choose a skin shade. This color I like the most, but it doesn’t look that good on my particular skin color. I’ll go for a little bit darker [. . .]. Yes, that looks better on the lighter skin tone. I find this feature quite amazing. See how you can just change the skin tones and see how it looks with different colors on your skin tone.”

Nykaa try it on feature switch shades and skin tones
(Left) Nykaa.com allowed shoppers to adjust the skin tone of the digital rendering to see how the lipstick would look on different skin colors using a TRY IT ON feature. (Right) Within the TRY IT ON, not only could users adjust the various skin tones, but they could also test various shades of lipstick with these skin tones. In this screenshot we adjusted the shade of lipstick as well.
Glossier provided a similar capability. On the eyeshadow product page, users could see how the selected eyeshadow color looked on various models. However, one user found this feature confusing because the makeup was not consistently applied on each model. This caused her to think the images were featuring different shades. It wasn’t until later that she realized the same shade was shown on models with various skin tones.

Glossier shades on different models
Although the page allowed users to view the same shade on different models, the variability in the model poses and in the application of the product, in conjunction with the low visibility of the selected color, made it hard for one shopper to realize what she was viewing.
The link labeled Compare shades, just above the Add to Bag button, brought up a modal window that made the color comparison for products across skin tones much clearer. However, the user was not able to discover this feature on her own. (The implementation of the Try it on feature on Nykaa.com was more discoverable.)

Glossier change shade and skin tone
Glossier’s shade comparison tool allowed users to browse through each color across skin tones.
Conclusion

Making a purchase online is inherently more difficult than in a traditional brick-and-mortar store, especially when users are shopping for things like clothing, makeup, or other products that need to be tried on to determine fit.

Seeing products displayed on the typical fashion model leaves a lot of questions unanswered for shoppers, as these models’ proportions and skin tones are usually different from their own.

To assist shoppers in deciding whether a product will work for them, retailers need to help them relate to that product. Sites that provide a broader selection of models showcasing products across sizes and skin tones enable shoppers to make informed purchase decisions.

Features that prompt shoppers to select a specific model should persist this selection across all other products within the product category to avoid the interaction cost associated with selecting a model for every product. Selected models should also be featured in the thumbnail images on category and listing pages to support browsing. The selection tool should also clearly communicate which products their selection will be applied to.

If the majority of products within a category cannot support the model-selection feature, it’s better to simply include images of different models on product pages than to ask users to select a model which would only be available for a few products.

Because model-selection features are so valuable to shoppers, they must be easily discoverable and implemented through high-contrast buttons or icons placed in highly visible places on both the category page and the product page.

When users see products on people that look like them, they become more confident in their purchase decisions and, thus, are more likely to purchase and later return to the site.