E-COMMERCE WEBSITE Case Study

SKILLS: competitive analysis, ia & site nav, wireframes, task analysis, SKETCHING

Tools: pen, paper, Axure

The Challenge

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.

Proposed solution

After research, I proposed an extension to the existing MAC loyalty program page to create, share, and shop makeup looks.

Initial Research

To begin, I wanted to explore the following client prompts by looking at their website, talking to MUAs (professional makeup artists), and visiting competitors:

What are your business goals?
Who are your stakeholders?
Who are your competitors?
What is the brand’s core message?
Who do you admire?

Interestingly, all of the major brands follow a rather similar online experience — customer service, a community, and links to social media.

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.

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

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 AH-ha Moment

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.

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. This was confirmed through interviews.

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

outcomes and deliverables

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.

*Completed Face Chart with ability to purchase directly from the design or share with friends*

Both users gave me feedback to improve the usability of the design:

make the blank face more prominent in the initial login
give initial suggestions on how to fill in the face
cross-promote tools and skincare lines so novice users know what to buy
add a subscription feature so all levels of users can try trends.

Try It YourselF

Watch the prototype in action below.