Project 2: e-commerce

Tools: pen, paper, Axure

For our next project in General Assembly UXDI14, we were each assigned a business brief from a major company and three personas representing user research and testing. My company was MAC Cosmetics, a New York City-headquartered cosmetics company with over 500 stores worldwide and US$1BN turnover in sales. MAC Cosmetics was acquired by cosmetics giant Estee Lauder in 1998 and was credited in providing a 13% net increase in makeup sales for the brand. The marketplace has historically been dominated by in-person retail shopping experiences but the recent rise of “beauty influencers” on Instagram and YouTube has changed the cosmetics industry landscape.

MAC’s initial research has shown that users value feedback from friends and family, and social input and collaboration are important impacts on their purchasing decisions. Users would like a virtual platform to be able to get an idea of what the product will look like on themselves and to be able to quickly share this with their network.

Brief and Personas

For this assignment, MAC hired me to design a sister website that connects customers with products and consultants, and allows them to easily share selections with their favorite social media applications.

Initial Research

To begin, I wanted to explore the following client prompts:

· What are your business goals?

· Who are your stakeholders?

· Who are your competitors?

· What is the brand’s core message?

· Who do you admire?

Since I didn’t have direct access to the client, my first stop was the MAC website to immerse myself in the experience of the brand while comparing the site to the initial personas provided. MAC provides a historical context for the look of their brand and their core values, and it is evident that these still resonate today. For comparison, I explored the personas’ favored beauty and cosmetics brands, Dove, Sephora and Lush. Finally, I studied the websites of other cosmetics companies that are chipping into MAC’s territory of luxurious colors and inclusivity at a similar price range, such as Kat Von D Beauty and Sugarpill. Interestingly, all of these brands follow a rather similar online experience — customer service, a community, and links to social media. Therefore I looked at Zappos, which is known for their excellent virtual customer service and use of videos to highlight their products in action. This sparked an idea I wanted to test.

The Inspiration

After researching the competitive landscape, I put together a simple card sort to get feedback on the basic taxonomy I was starting to develop. I did two levels of card sort: an open sort with a novice user to see if the categories were intelligible and two closed sorts to reaffirm my findings.

Card Sorts

This work informed the initial navigation I sketched out in a series of increasingly refined wire frames.

Initial Wireframe

These initial designs satisfied the need for previewing or purchasing a product, or sharing it generically on social media, but it didn’t take the brick-and-mortar consultant concept to the virtual makeup studio. The idea came to me while watching my boyfriend play an open-world action game called Yakuza 0. One of his main characters owns a hostess bar and you can design your hostesses’ clothes, hairstyles, accessories…and makeup.

Hostess makeover

This is when I realized that MAC was leaving an important tangible resource from their in-store consultations out of their virtual shopping experience: the face chart. A face chart is a typical part of the in-person makeup experience wherein an artist paints an outline of a face with makeup products and then annotates what products they use. During interviews with makeup obsessives and a makeup artist (MUA), anecdotal evidence suggested that customers typically buy everything the MUA suggests.

I think the MAC one is really [well known]. They encourage their employees to learn techniques to make them look really good because people will walk in and buy everything on them.
— Professional Makeup Artist, interview

The Result

Once I was able to put MAC’s resources together with their customers’ needs I had the beginnings of what I call the MAC Select Face Chart. I used the existing MAC Select loyalty program and added an additional element, a design/save/share face chart. I built out an initial detailed wireframe and asked two testers to complete a task analysis wherein they designed a face chart, previewed and, ultimately, purchased a product. Both users gave me feedback to improve the usability of the design, such as making the blank face more prominent in the initial login.

I also leveraged the face charts to highlight trends and cross-promote MAC’s tools and skincare lines. This also lead me to add a subscription feature that would allow people to subscribe to early access to mini sizes of trend looks, similar to the Birchbox of small samples at an affordable, monthly price.

Try It Yourself

At this point, this is a prototype for further review but I invite you to take a look at my product. I’ve made a quick introductory video that gives a basic overview of the MAC Select Face Chart concept:

Face Chart design with links to products, trends, subscriptions

I believe this product satisfies MAC’s need to translate their personalized in-store experience to a virtual environment to satisfy the artistry, individuality, and community that has made MAC a leader in the cosmetics industry.

Have a beautiful day!