Urban Decay has introduced a mobile-optimized shopping guide designed to simplify the process of finding the right shade of foundation.

The educational guide is meant to provide an intuitive online user experience that offers many of the same benefits as interacting with an experienced sales person inside a store for online beauty shoppers. It was built using HTML5 technology and is optimized for both smartphones and tablets to take leverage the brand?s growing mobile traffic.

?We designed the Web piece with JavaScript and HTML5 so that it would be a great experience on tablets and accessible on smartphones,? said Mark Moskal, chief experience officer at LiveAreaLabs, Seattle, WA.

?Twenty percent of more of Urban Decay?s traffic is coming from those devices and that number is climbing,? he said.

?The shopping guide also allows clerks to walk through a tablet based experience to help customers make a decision in stores.?

Urban Decay worked with LiveAreaLabs to introduce the Naked Skin Shade Finder and digital campaign supporting the launch of Naked Skin liquid foundation.

Urban Decay Cosmetics is the largest independently owned color cosmetic company in the United States.

In-store element
The first phase of the project involved getting the shopping guide launched with the goal of enabling users to quickly and easily find the right shade of Naked Skin foundation, which is the latest addition to Urban Decay?s Naked line.

LiveAreaLabs reports that users are spending an average of four minutes on the shopping guide site in the first week that it was available.

In phase two, Urban Decay and LiveAreaLabs will focus on getting tablets into the hands of stores selling the cosmetics line so store associates can help customers find the right shade using the shopping guide in store.

?The in-store element is important,? Mr. Moskal said. ?It allows brands like Urban Decay an opportunity to differentiate themselves from the sea of choices that is out there and provide a consistent brand as well as educational experience in the store.

?This enables Urban Decay to have its brand presented in the way that it wants and provides customers with the tools to make a confident, informed purchasing decision even when they are in the store,? he said.

?It is a great way to use a digital shopping experience to enhance the in-store experience.?

In the tablet user experience, users can click or scroll through an animation that illustrates the weightlessness of the product.

Users can then choose an option that lets then indicates their current brand, product and shade to find the Naked Skin equivalent.

Users can also find their shade among images of different women?s faces representing the 18 different shades of foundation. A matching swatch underneath these images describes the shade when a user scrolls over it.

There is also an option for choosing warm or cool shades.

Another section helps users achieve their desired finished look by inputting their skin type, what level of coverage they desire and what finish they want. Other products are then recommended to complete the look, such as a mattifying gel.

Integrated shopping
The shopping guide includes an integrated shopping experience so users do not have to leave the guide to make a purchase.

The new shopping guide is promoted on the Urban Decay Web site homepage, on the brand?s Facebook page and via email.

Desktop display ads for Naked Skin let users determine their shade from within the ad unit.

The shopping guide was built within the Urban Decay ecommerce Web site running on the Demandware platform.  

?This is a great alternative and a helpful way to go through a shopping process,? Mr. Moskal said. ?Whether someone is in a home environment, shopping in a store environment or shopping on the go, this can help them make a decision on the spot.?

Final Take
Chantal Tode is associate editor on Mobile Marketer, New York