Project Goal

Many young people told us through our research that they do not have time to go to the gym and if they try by following dance tutorials, they have to visit multiple sites to find videos they can follow or like, which is where the Dance Fitness name comes from.

We created multiple personas for our users in order to understnad their needs better and create a design that is suitable for their needs.

How might we improve conversion by supporting customers in their purchase decision?

How might we increase basket size by encouraging customers to buy new, complementary products?

Mobile prototype

Target audience

Beamly had already worked with CoverGirl to optimise their product pages and tutorial content to provide visitors to the site with clear information on each product’s packaging, texture, application and appearance on different skintones. Still, users had indicated that they still couldn’t be certain whether products would suit their style or skin tone. Users welcomed the idea of a virtual try-on service, and they were generally familiar with the concept through Snapchat filters. However, the perceived quality of try-on services was low, with users assuming that it probably wouldn’t work or would crash their device. 

Holition had previously created a similar experience but in app form, so I worked with their UX team to tailor the interface and journey to an in-browser approach, whilst our developers focused on integration and performance improvements.

Existing product information on the CoverGirl site

Key challenges or constraints

This experience would be embedded within the existing CoverGirl site, to avoid compatibility issues and the barrier of a user having to download an app. However, this also presented a performance challenge, as rather than being able to store data locally we needed to ensure that the content could be accessed quickly enough not to significantly impair the experience on slower connections. The majority of CoverGirl’s user base access the site via their mobile devices, so this was particularly important for us to get right.

To keep users engaged, we enabled the camera with a face-scanning animation before the experience had fully loaded, as this proved to be less frustrating than a loading bar. This also performed better than using a model shot, as it was clearer to the user that they would be able to see the looks on their own face. For particularly slow connections, or camera detection failures, we instead directed users to a static page where they could view the looks on models.

For an optimal experience, the user had to be facing the camera and not be standing in overly harsh or dim light. In particularly dim lighting, users weren’t recognised by the camera at all, and very bright light affected facial tracking so the overlays looked clownish and misaligned. We provided users with usage instructions as the experience loaded, to manage expectations and so they could ensure their surroundings were suitable.

Displaying the user's face rather than a model shot whilst the experience loaded kept users more engaged and loading times less noticeable.

Research study details

We optimised for iOS11+ and most modern Android smartphones, in line with CoverGirl’s visitor demographic. If the user was running an older browser or operating system, in an area with low connectivity or was experiencing camera issues, we provided clear error messaging along with troubleshooting instructions and a link to the fallback experience.

Clear error messaging was provided if the experience could not be loaded, along with a link to a static page which showed the looks on models.

Initial design concepts

To allow the user to easily compare their appearance before and after, we experimented with a slider to show/hide makeup. For the MVP launch we scaled this back to a button. The most natural place for this button to sit seemed to be below the thumbnails, but this pushed the product recommendation too far down the page on most mobile screens.

We also tried adding an icon and moving this above the thumbnails, but this was still too prominent and detracted from the main call to action to shop the look. We would have liked to spend more time testing button placement as the feedback we’d received on all previous iterations was mixed, but for launch we went with the best UI fit, which was in the top right corner with the info button.

Evolution of the hide makeup interaction

CoverGirl partnered with ChannelAdvisor to provide links on each product page so users could be directed to their preferred retailer to place their order. Walmart was chosen as the preferred eCommerce partner for this project, and by providing only one option we had more control over the shopping bag and onward journey. Once a look was selected, users could add a whole look to their bag, or add individual products from multiple looks. Users could also exclude products from the look by editing the shopping bag.

We also included recommended products to provide users with an alternative if they didn't like one or more of the featured products, and to provide an onward journey if the featured products sold out.

Featured and recommended products for an onward journey

Outcome and learnings

The experience was available to the US market during Spring 2018, after which the technology and learnings were used as a starting point for another team’s work on Max Factor’s Virtual Makeup Artist web app.

We aimed to increase conversion by improving product understanding, which doubled for users shopping via the experience.

We learned that being able to virtually try on looks gave users a deeper understanding of product suitability, but for added confidence they’d have preferred a more personalised experience based on their features and style, rather than the same looks being available to all users.

The project was featured in industry press, and won a Glossy Award, for ‘Best use of New Platform by a Brand’ in 2018.