Shopping for Apparel in an Online World: UI/UX Design for Virtual Clothing Try-on

Buying clothes online is challenging. According to the National Retail Federation, the clothing industry has the second-highest return rate (after auto parts) of any other sector. Even with high-resolution images from multiple angles, there’s no substitute for a customer seeing and feeling how a dress or shirt fits their unique body.

But retailers are hoping that virtual try-on technology can soon come close, and are investing in solutions that simulate the experience of trying on clothes and accessories in real life. The global virtual fitting room market is expected to expand at a compound annual growth rate of 25% through 2028, and retail giant Walmart acquired virtual fitting-room startup Zeekit in 2021.

Although the technology is still in its early stages, it’s rapidly evolving. For virtual try-on to reduce merchandise returns, the user experience must be as seamless, accurate, and intuitive as possible. Toptal spoke with experts about emerging trends and how UI and UX design best practices can create successful experiences.

How AR and VR are Reshaping Apparel E-commerce

E-commerce has been around for more than two decades, but there’s often a disconnect between what customers see online and what arrives at their door. As Mark Cohen, Director of Retail Studies at Columbia Business School, tells Toptal, “the vast majority of merchandise that’s sold on the internet is sold via a postage-stamp-size photograph with a handful of bulleted body copy elements, which describe—in very rudimentary terms—features and benefits.”

Virtual try-on provides users with large, sharp images and clearly demonstrates how clothes will look when worn—either on the customer or someone of similar build. As the technology grows more ubiquitous, “it will enable customers to make more successful choices, to shop with more confidence, and it will also enable the retailer to present merchandise … far more accurately,” says Cohen.

Most virtual try-on technologies use augmented reality to show a garment or accessory on an image or video of a person to help them visualize how the item will look in real life. Virtual try-on is increasingly available for cosmetics, and it is especially effective for firm accessories that don’t drape or move when the wearer moves, says Toptal AR/VR designer Pushkar Patange. “Most of the use cases that you’re seeing [for virtual try-on] are on rigid things like accessories, bags, and spectacles.” A Shopify Plus case study of the handbag company Rebecca Minkoff, for example, notes that shoppers were 65% more likely to purchase after interacting with an item in AR.

Soft items, however, are a different matter. “For clothing shopping, we are talking about real-time,” says Pushkar. “So when you try on a shirt, and it’s a moving thing, the moment you turn, it should drape with you. This is incredibly hard to achieve because allowing it to drape with you would require thousands of polygons,” the geometric building blocks that make up 3D models.

Yet companies are eager to find ways to help customers get an accurate picture of what a soft garment might look like when worn. Walmart, for instance, provides a Choose My Model feature. Customers can select an item of clothing on the company’s website or app, then click on a “choose my model” button. Users can input their height, then select a model who closely matches their overall build and skin tone. When customers click on clothing, the site superimposes it on the model. The technology uses computer vision and advanced AI to analyze the apparel catalog and virtually dress the models. It’s similar to a “see it in my size” feature offered by Levi Strauss & Co., Madewell, and other retailers that allows customers to view clothing on images of models most closely resembling their size and shape–but that feature is labor intensive, requiring every item to be photographed on a model in every size.

Many companies, however, are eager to show customers how a piece of clothing might look on them specifically, especially as customers demand more personalized retail experiences. One player in this space, 3DLook, integrates into e-commerce apps and instructs customers to wear fitted clothing and take images from the front and side. The extension creates a body model and extracts dozens of measurements to show customers what clothes might look like on their bodies. According to one case study, New York-based denim brand 1822 was able to reduce returns by 30% and quadruple conversions using 3DLook’s technology.

Bringing Virtual Clothing Try-ons to Brick-and-mortar Retail

While many virtual try-on experiences aim to enhance e-commerce, some retailers are experimenting with in-store applications to help people find accurate sizes. FIT:MATCH relies on sensors in dressing rooms to scan people’s bodies and create what it calls a digital twin. (The company says retailers that use its software quadruple conversions and boost their average order value by 20%.)

After Luluemon acquired the fitness company Mirror, which offers workouts through a mirrorlike display, the athleisure company installed the devices in its retail locations. In addition to turning stores into studios by streaming workouts, the display allows people to try on items that might not be available in stores. Though the technology is similar to the one used on mobile and desktop devices, companies have the resources to deploy it with much more processing power, says Pushkar. “That’s why you see the good use cases are in the in-store virtual mirrors. … Because they can have a really high-end computer hooked to that display.” Virtual try-on devices in-store can also cast merchandise in a more favorable light. “Usually, when you try these things at home, [the lighting isn’t ideal]. But in the store, there are three spotlights on you; when you turn, they also make sure you look good.”

To Cohen, an in-store AR experience is a “halfway point” toward achieving more penetration of virtual try-ons. “The real payoff will occur when a customer can effortlessly try on things they would today in a physical space,” he says. “Eventually, the technology will give them cues as to texture and sensory response. That’s where we’re headed, and I think it’s going to happen sooner than later. Of course, it’s going to be an enormous investment on the part of all involved, but it will also be an enormous offset to the tragic burden that returns represent to retailers.”

VR Fitting Rooms

A long-term vision for virtual try-on technology is a VR fitting room, perhaps in the metaverse. Here, the customer is not simply viewing a selfie on a mobile device but can see an accurate digital representation of their body wearing realistic clothes in a virtual world. Current metaverse fitting rooms are intended for consumers to try on digital accessories for their avatars, not real-world garments. Still, some leading designers, including Gucci (which also uses AR overlay technology in partnership with Snapchat), have already been selling virtual clothes and accessories through metaverse platforms.

Virtual Try-ons Call for Extra Communication With the Consumer

Though most apps don’t require extensive instructions or walk-throughs, experts recommend offering comprehensive tutorials for AR apps since they’re an emerging and quickly changing technology.

Technologies that superimpose apparel over a person’s image work best when people position themselves in specific ways, so many virtual try-on apps provide detailed instructions. For instance, Ray-Ban’s app uses conversational language to provide feedback for an accurate fit for eyewear. As soon as the customer turns on the camera, the app draws an oval to indicate where the customer should place their head, then instructs them to move closer to or farther away from the camera. The app also tells customers to look up or tilt their heads to the left or right.

It’s also essential to learn precisely how customers will use virtual try-on, says Toptal designer Najeeb Abubakar, who recommends conducting user interviews. When he joined the virtual try-on app Shopfit, the technology was new enough that he made an extra effort to understand how people would use it. Rather than conducting group surveys, he says, “I wanted to get one-on-one answers, to get a deep understanding of what people actually want.” When conducting user research for Shopfit, he discovered that most potential customers were unacquainted with AR virtual try-on. “When I asked the question, ‘Have you come across this kind of platform before,’ most people would say, ‘No, we just shop based on our sizes.’” He said he found respondents were excited about the prospect of virtual try-on and asked, “‘How do you go about it?’”

Abubakar also recommends abundant prototyping and testing for virtual clothing try-on technology. “Don’t wait until you are done before you do the final testing. I believe getting feedback makes my product much better. Do a lot of prototyping and a lot of communication.”

Make Virtual Try-on Optional

While virtual try-on may reduce return rates, it also risks limiting sales in the first place, says Pushkar. “If you give users the time to really think, put it in the cart and make the decision later, most are probably not going to [complete the purchase]. Our goal is to make that loop between the decision to purchase really smooth and quick.”

This is especially true for less expensive items, like clothing. “If I were lying in bed and impulse buying anything, and they asked me to get up and take a picture of my body, trust me, I’m not going to do it,” says Toptal UI/UX designer Sarah Wright.

Abubakar says that’s why it’s crucial to make virtual try-on optional. While working on Shopfit, he found that while most users liked the idea of virtual try-on, some wanted to buy sizes they’d purchased in the past. “I might just know what I’m looking for,” he says. “It’s my choice if I want to use a fitting room.”

Alternate Ways to Achieve Accuracy in Sizing

A 2022 survey by the returns-processing platform Narvar finds that 45% of customers return clothing because of the wrong size or fit. The same study finds that nearly 60% of customers engage in what’s known as bracketing—buying a size up or down from their usual size, then returning items that don’t fit. Reselling clothing is often so costly that some companies may discard it instead. “Returns have always been a feature of brick-and-mortar retailing,” says Cohen, “but the e-commerce return history has been unbelievably more challenging.” Virtual try-on technology, he says, “will not eliminate returns, but I believe that once fully deployed, it will take a substantial bite out of the return challenge that exists.”

Yet even modeling clothing on an image of a customer’s body might not necessarily mean that a piece of clothing will look or feel good—or that it won't be returned, warns Abubakar. User feedback for Shopfit AI yielded a critical concern: “What if the AI is wrong?” He recommends that even apps that generate AI-based size suggestions allow people to change their size if they feel the AI was faulty. “As a user, I know how tall I am.”

And although customers may express interest in virtual try-on technology, a 2021 study by Narvar found that 88% of customers used traditional information such as product photos and descriptions, size charts, measurements, and reviews to make decisions about purchases, while only 7% regularly used an augmented reality try-on tool.

Photography is critical since 65% of customers often use product photos and descriptions, according to the 2021 Narvar study. When showing fabrics, says Wright, “drape is really important. If you’ve got a knit versus a synthetic or cotton, you can tell the quality based on the drape. If you have a synthetic material, style it in such a way as to give it a nice drape. That tends to help conversions.”

Making space for customer reviews can go a long way toward helping customers understand how a piece of clothing might fit, explains Wright. “If you allow people to comment on the garments, they’ll say if it’s true to size or if it runs a little bit big.”

One of the best ways to yield a successful fit is to use a quiz-based system that allows people to input their exact measurements, explains Wright. “I sometimes have brands pegged as using vanity sizing, so I’m going to be a size medium. But if someone’s really using standard measurement and sizing, I’m going to be a size large. It’s hard to know, especially if you’re trying a new brand.” Such quizzes often ask questions that aren’t numbers-based—for instance, whether customers prefer their clothes loose or fitted or what size they are in other brands. Yet allowing customers to input measurements has a downside, she adds. “It is hard to guide everybody because they’re going to just … input the information they want to put in.”

Virtual Clothing Try-on: Now and the Future

Cohen expects it won’t be long before customers can shop an online store the way they would a brick-and-mortar one. “They’ll be able to select merchandise from virtual fixtures. They’ll be able to hold it up against a mirror to see how it looks on them, and then if they choose, they’ll be able to take it into a fitting room and actually virtually try it on,” he says. As virtual try-on evolves, designers must continue to seek user feedback and experiment with new ways of implementing the technology in e-commerce products. Doing so will help customers find the right fit and, ultimately, improve the chances that they’ll keep the merchandise they buy.