Cover image
UX Design
10 minute read

What’s Below the Surface: A Look at UX in the Beauty Industry

Innovations in tech and shifts in consumer behavior are changing the cosmetics and skin care business. Here’s how designers in beauty UI and UX are adapting to the new trends.

Featured Experts

The acceleration of e-commerce means retail is being reimagined, and the beauty industry is experiencing some of the most sweeping changes. Pandemic-related developments like mask-wearing (unsurprisingly, eye makeup sales are up) and changes to the way people socialize have reshaped the types of beauty products consumers want and how they shop for them.

The past few years have ushered in broader societal shifts, including increased demands for authenticity and transparency around the way companies operate and what goes into their products. These values are becoming expectations throughout consumer culture, especially in the beauty industry. Toptal spoke with designers in beauty UI and UX about emerging trends and how to create experiences that appeal to e-commerce beauty shoppers.

The Growth of Beauty Technology

In 2018, L’Oreal, the world’s largest cosmetic company, announced its intention to remake itself as a beauty tech company, to create products and services that are more personalized, inclusive, responsible, and transparent. Today, technology continues to be one of the biggest stories in beauty, with companies deploying artificial intelligence (AI) and big data strategies to innovate on everything from smart makeup to 3D-printed skin.

Traditionally, shopping for beauty products meant trying on lipstick, eyeshadow, or foundation in a brick-and-mortar store. Because small variations in color or texture can make a big difference on an individual’s skin, consumers have continued to rely on physical locations for their beauty-product purchases, even as they’ve shifted to buying other goods online. E-commerce penetration for the beauty category hovers below 5%; in early 2021, online sales made up just 15% of the beauty category’s retail revenue.

But not for long. Beauty retailers are recognizing the need to deliver digital experiences on par with those in-store, and designers are creating sophisticated virtual shopping spaces to help customers envision how products will look and feel on their bodies. With new technologies emerging, e-commerce is forecast to make up 30% of beauty sales by 2026.

Virtual Try-on Blurs the Online/In-Store Experience

Among the fastest-growing trends in the beauty industry is virtual try-on (VTO), an augmented-reality experience that allows users to sample cosmetics. Typically, VTO works by having users grant an app or website access to their cameras; the app then uses algorithm-driven facial mapping to, for instance, apply virtual lipstick to a user’s lips. Several major beauty companies have found success by investing in AI or buying VTO companies outright. For example, Perfect, a leader in AI- and AR-powered beauty technology, reports that its VTO tool helped legacy cosmetics brand Clinique more than double its conversion rate. The pandemic has only accelerated the adoption of the technology, especially as brick-and-mortar stores changed hygiene protocols and scaled back their use of communal samples.

“Customers are used to going into Sephora and rubbing a bunch of stuff on their skin and determining what shade they need—or, better yet, someone else determining it for them,” says product designer Greta Harrison. Harrison worked for clean-beauty brand Beautycounter at the start of the pandemic, just as the company was preparing to roll out an expanded line of foundation, Skin Twin. “How were you going to find the twin of your skin when all of our retail locations are closed and you can’t try it on?”

Four phone screens. The far left includes steps for using the Shade Matcher. On each of the next three is a hand and under it are six circles of different skin tones. Under that is an "Add to Bag" button. The left hand shows two bars of the fair shades across the palm, showing how users will see a shade against their own skin tone. The middle and right hands each have four bars of "tan" shades across the palm.
High-fidelity prototypes of Beautycounter’s Shade Matcher. The tool allows users to sample shades by layering a translucent color over their palms and wrists. It’s considered among the most accurate ways to virtually try on a shade.

Harrison and her colleagues worked quickly to devise a virtual Shade Matcher for the Beautycounter app, which works by having users look at the inside of their wrists through their camera while the app layers virtual translucent swatches against their skin to see how well they match. Users begin by selecting their skin-tone category: fair, light, medium, tan, dark, or deep. Each category offers between three and six shade options.

Harrison moved quickly from low-fidelity drawings in Sketch to high-fidelity prototypes; from those, the team worked closely with product developers to fine-tune the shades. “There was a lot of calibration with the product development team when it came to choosing how the shades looked on the wrist and whether it was an accurate description, because physical shades do not necessarily translate perfectly to hexadecimal codes,” she says.

Also, because the technology was relatively new in 2020, it was important to educate consumers, so Harrison and her team included an interstitial about using the app in natural daylight for best results. Minimizing decision-making was also critical: “We wanted to make sure users could test colors and have everything fit on the same viewport and be able to scroll through so they could see different shades and compare them side by side,” she says. “We wanted to get customers adding items to their carts instead of waiting until stores opened back up or pop-ups started again.”

Beauty UI/UX Demands Authenticity and Realism

Accurate and realistic color matching is only the tip of the iceberg. Just as customers expect their virtual foundation to be true to life, they also demand that all aspects of the brands they use exhibit authenticity. Dunja Topalov, a Toptal designer whose clients have included beauty app startup Memine, says that today’s shoppers are seeking more natural, less filtered images of models. One marketing study found that a majority of consumers think this type of brand authenticity is more important now than before the pandemic.

Toptal designer Jess Souza, who worked for O Boticario, Brazil’s second-largest cosmetics company, says she sees a trend toward using photos of everyday people to show beauty products rather than relying on aspirational images of models—a technique that resonates with millennials and Generation Z. “People are tired of seeing incredible models and saying, ‘On her, everything will look good. How will it look on me?’” she says. “You need to show pimples, wrinkles, and scars because real people will have those issues, and you need to see how the product will work on them.”

When working with photographs of people, Topalov says, “I don’t use any additional blur effects on them, and I don’t Photoshop them. In fact, I try to use the original photo files.”

Use Design to Communicate Texture and Scent

The consumer demand for authenticity extends to products, Topalov says, with customers wanting to view close-up images of the serum or blush they’re considering. “In the past they would show more of a 3D image of a product but now we’re moving to this more natural look and feel, and showing the exact photo of the product,” she says.

A tan background with a picture of a woman who is probably around age 60. She is smiling and applying cream to her cheek with her forefinger. In her other hand is the jar of cream. To her left is the word "Imagery" and under that it says "Style and vibe of the used photos." This is a page from the style guide for the brand Memine.
In her design for beauty-app startup Memine, Dunja Topalov used minimally retouched images of models’ skin and the products themselves. Increasingly, customers want brands to offer authentic views of both products and the people who use them.

Showing texture is critical for enticing people to buy beauty products online, says Souza. “When [O Boticario] launched a new line of lipsticks, we created the page so you can zoom in, select the color, and see the texture. You can say, ‘This is shiny, or this one has a little glitter.’” Before that, she says, customers generally opted to buy in-store because it was the only opportunity to inspect those details.

Image of a red screen against a black background. In white script at the top it reads "intense." In the middle is a light pink lipstick. On the left coming out of the left border are the tips of seven lipsticks. On the right are circles showing the color and texture of eight lipstick colors.
Showing product textures is an important element of beauty UI/UX.

Communicating scent is especially challenging in a purely visual medium, Souza says, so it’s important to use visuals that will stimulate a sensory association. For instance, communicating that a perfume has notes of strawberry might mean showing images of strawberries or including a color or texture that might evoke the scent alongside a product shot.

Include Real Customer Experiences

With more customers shopping online, user-generated content such as reviews and customer photos are becoming critical. One study found that sales can soar by 65% when a review is added to a page that lacked one previously. The same study found that engagement with reviews in the beauty category jumped by 313% during the pandemic.

“Reviews are king when it comes to beauty, more so than any other product,” Harrison says. “Companies like Sephora have really excelled at this because not only can you sort products by top-reviewed, but you can also filter them by shoppers who have fair skin, dark skin, light eyes, dark eyes, et cetera.”

Souza advocates for designing space for reviews on product pages. “People can write, ‘I used this for a week. This is how my skin looks.’ Because people are going to do this on Reddit or TikTok anyway, why not have your own place for people to share and communicate and trade information about the treatment they did with your products?” She adds, “Even if people leave bad reviews, it’s good to give space for that. And the brand needs to communicate with them and solve the issue.”

Kristijan Binski, former lead UI/UX designer for skin care brand Dermalogica, recommends prioritizing social media to show customers using the company’s products. “I always like to include a very prominent section on the homepage that features the brand’s Instagram page,” he says. “Usually, it also has a grid of images from social media showing real users using the products. That is one of the best ways for a potential customer to feel inspired and motivated to purchase a product.”

Beauty App Design Calls for Transparency

Customers want to know exactly what is in the products they use, and companies are answering this call for transparency by disclosing ingredients and how they work on the skin. A Deloitte study found that 6 in 10 consumer products companies plan to make moderate to significant investments in order to increase transparency in 2022 and that lack of transparency is a key reason customers abandon brands.

Ensure Copy Communicates Transparency

Sana Yusuf says that designers often overlook the importance of microcopy, but designing for transparency means considering words carefully: “What is your top phrase? What is your headline? Is it communicating enough? Is it giving people enough of an idea of what they’re getting? How are you telling the story of this product, and by the time they reach the end of the page, is the customer confused or more confident?”

Souza recommends placing a drop-down menu on every product page to list ingredients. “You need to communicate that you’re not hiding the ingredients that are in the product,” she says. “If the company is ashamed of what’s in it, they should change the formula.” She adds that if the product has an ingredient no other brand has, it should be on a high level in the page hierarchy.

Design for Clean Beauty

The push for transparency also dovetails with growing interest in clean beauty, which refers to products that are made mostly from natural ingredients or contain safe and environmentally friendly synthetics. Demand for these products is on the rise, with the clean-beauty industry expected to grow by more than 12% between 2020 and 2027.

In her work for Ellis Day Skin Science, which focuses on using phages, or healthy bacteria, Yusuf says she was given a clear directive. “The core ideology that Ellis Day wanted to convey to their customers was transparency,” she says. “They wanted to be able to be very upfront with their customers about what they were putting into the serums.”

Yet, communicating transparency requires more than just a list of ingredients. Consumers want visual cues that evoke a feeling about what transparent brands stand for—pure, sustainable, natural products. Ellis Day’s flagship product was a clear serum, and A/B testing in Unbounce showed that customers responded best to pictures of the ocean. Yusuf incorporated water into her designs, in part to communicate the idea of cleanness and transparency. A homepage video shows people at a sink in spa-like robes, splashing their faces with water.

A screen shot from the Ellis Day Skin Science website, showing a man and a woman drying their faces with white towels. They are wearing white robes.
The Ellis Day Skin Science website uses water imagery to communicate cleanness. Water also mirrors the texture of the company’s signature serum, which is clear.

Use Simplicity to Reinforce Brand Values

Minimalism isn’t new in the beauty packaging space. Souza says the trend originated from a desire to make beauty products seem more connected with medicine. But nowadays, designers view a minimalist aesthetic—accented with bold design elements—as a way to convey transparency. For instance, Yusuf advocates for bold packaging colors to communicate directness; the lack of clutter telegraphs that the company has nothing to hide and that the product itself is not cluttered with any extra ingredients. Topalov used a similar strategy in her designs for Memine, opting for a minimalist palette of neutral colors found in nature and bright highlights that attract attention.

Inclusive Beauty Means Inclusive Design

The past few years have seen customers demand more inclusivity from beauty brands, and companies have responded by expanding their offerings to represent a wider range of skin tones. As more shades are introduced, Yusuf says there’s a greater need for companies to adopt systems like VTO to help customers find options that meet their needs.

In addition to recognizing more skin tones, the move toward inclusivity is extending to people with disabilities. Not only is accessible web design becoming the norm in beauty e-commerce, but more representations of disability are showing up in beauty advertising, and companies are designing beauty tools, such as brushes and eyeliner applicators, that are usable by people with or without disabilities.

Topalov says the shift toward inclusivity has given rise to a gender-neutral aesthetic, which steers away from colors and imagery typically associated with men or women. “We’re going more in the direction of ‘We’re not going to design branding for a male audience or a female audience but more for a type of person and personality type.’” The design, she says, is tailored more to a lifestyle, rather than an age or a gender.

Innovation and Honesty Are Transforming Beauty UX

Recent years have brought about enormous shifts in all aspects of people’s lives, including what they gravitate toward, and why, and how they buy beauty products. Consumers want to know what they are putting on their skin; they want diversity reflected; and they want to see themselves fully represented, flaws and all. As such, technology’s role in helping consumers shop for beauty products will only expand, and beauty UI/UX designers will have to continue to keep pace with evolving consumer expectations.

Understanding the basics

One technology trend in beauty app design is the virtual try-on, an augmented-reality experience that allows users to sample cosmetics. In many cases, it works by having users grant an app or website access to their cameras; the app then uses algorithm-driven facial mapping to apply virtual makeup to users’ faces.

The pandemic accelerated the growth of e-commerce. The International Trade Administration forecasts an 8% growth in retail e-commerce sales through 2024. The beauty industry is helping drive the growth, with one forecast suggesting that e-commerce will account for 30% of overall beauty sales by 2026.

Customers are demanding more inclusivity from beauty brands. One way brands are becoming more inclusive is by offering products in more shades. Beauty UX can be more inclusive by representing product users with a wide range of ages, skin tones, and body types.