Research / UX / UI / Interaction for a Client Runthrough
Timeline: Ongoing Team: Nelmer De La Cruz Product: Adobe XD Prototype
“There are no rules in makeup”
Harnessing the energy of the brand and the passionate people we interviewed, we created a AR prototype for MAC. The goal: to marry the realities of an authentic e-commerce experience with the expectations of users who want to play without rules and restraints
Overall Context
When it comes to people who wear makeup, you cannot generalize into one or two flattened personas; anyone can wear makeup and the reasons behind applying even a simple black eyeliner are fluid and highly subjective.
As Nielsen puts it in the 2018 Future of Beauty Report, “There is no one beauty shopper.” It is also important to note that wearing makeup — be it skin tone or neon green — is less related to confidence, vanity, conformity or belonging than some might think. For most, it is a form a self-care and for many, a creative and even artistic expression of Self.
This is how we are approaching Makeup during this design sprint.
(By the way, if you didn’t already know, the biggest makeup trend in 2019 is gender fluidity.)
http://coveteur.com/2019/02/21/men-wearing-makeup-2019-beauty-trend/ More from Ziggy here.
This idea of makeup as a form of expression is by no means new. But culturally and technologically, the beauty industry must embrace/is embracing the “no rules” approach as social boundaries are broken, social media influences the path-to-purchase and buyers across industries begin to trust and expect VR offerings.
Armed with what we feel is a grounding contextual view of the modernizing makeup industry, Touchlab’s design team kicked off a more hands-on discovery process by conducting a contextual inquiry and investigation through many of Manhattan’s makeup stores.
Why? In order to get off of our laptops and challenge any preconceived assumptions about makeup shoppers IRL. 🕵🏻♀️ 🕵🏻
Contextual Inquiry
Left: Sephora’s virtual try on installation. Right: An example of MAC’s in-store product organization.
As we made our way around 6 different makeup stores, four interactions stick out:
Quiet 20-somethings experiment with every bright-blue lipstick in the store. The makeup artists were kind and attentive, but let everyone play around with bold blues and shiny reds unbothered. Everyone was rubbing makeup on, wiping it off, checking themselves out, asking questions- a positive retail environment.
A seasoned makeup artist explains his goals for his popular youtube channel; to target people who are “going somewhere” and do memorable street makeovers to match their expectations around that experience.
An older woman’s experience at an in-store virtual installation is somewhat marred by a technical misunderstanding of her beautiful wrinkles. Despite the inaccuracies, she expressed how fun it was to play and stayed for over 15 minutes.
Two girls hesitate at the door of a store that seems a bit, well, “stuffy.” No one is playing or even talking. They leave almost immediately. 😬
Trying on different shades on your hands is commonplace in stores. Virtual try-on certainly solves this pain point. Or is it a pain point?a
Amongst the perfumed chaos of the wildly different retail environments, we do detect an overarching trend: all kinds of people want to play and experiment with fun makeup, no matter their intention to buy.
A note about MAC: The virtual artists at MAC are seasoned and professional. MAC embodies the inclusive trajectory of the makeup industry and the playfulness and artistry of cosmetics. There are NO rules at MAC.
A dedicated MAC makeup artist explains his experiences working with other companies and why he prefers to work with MAC.
Product Audits
We moved into user testing and product audits of the more popular virtual makeup apps, the goal: to test not only the usability of these virtual experiences but also people’s reactions to retail-oriented flows versus more playful user flows.
Examples of our testing sessions during which we asked users to complete 3 tasks. Users were consistent in having trouble completing retail transactions and finding the virtual try-on feature.
We tested the most popular apps in both the App Store and Google Play. The garnered reactions were emotionally loaded. Most users reacted negatively to the commerce-oriented product organization seen in at least half of the tested apps by expressing confusion or even anger.
Some quotes include:
“I don’t even know what this picture means. How do I even get to the try-on? I feel like it’s trying to just sell me *things*.”
“Where are my lipstick colors even going after I try them?”
“Wait! I wanted to see the whole look!”
However, we observed that users had the most fun when playing with colors as a form of self-expression:
“I’m going to go with… this color — “Dangerous” — because that’s how I feel.”
“Dang, I look good. 👩🎤
Scoping In
Surfacing from our deep immersion into virtual-try on make-up apps proved rather difficult for us designers; we are both now addicted to makeup apps and were getting pretty good at selfies. 🤳🤳🤳👩🎨 👨🎨
Touchlab Designers conducting product audits WHILE looking really, really pretty. If we do say so ourselves.
It was time to start taking our data and synthesizing it into actionable points of departure. Harnessing the passion of the makeup-wearers we interviewed and observed, we constructed a persona spectrum.
“Instead of defining one character, persona spectrums focus our attention on a range of customer motivations, contexts, abilities, and circumstances.” — Margeret P. for Microsoft Design (More here)
We know from our process that customer motivations for trying on makeup virtually vary greatly, but an overarching motivation might best be called “play”- with an underlying asterisk: ***”play” without the blight of glaring technical virtual misunderstandings for which a modern user has little tolerance.
Brainstorming at the office. #nomakeup #nofilter
From user testing sessions, we gathered that users of virtual try-on experiences want:
A balance of “Play” and “Pay” (Allowing product exploration and experimentation without forcing a sale OR forgetting the product completely)
A means for creative expression with makeup
A variety of products to try
Accuracy in the virtual try-on experience
Users of virtual try-on experiences need:
Easy control of the camera view with one hand/thumb
Proper architecture and timing of e-commerce product areas during the play to pay funnel.
A well-lit camera view, flexible enough for a myriad of environments
A natural multi-platform user experience
Face Recognition for all. (An idealistic thought summarily strangled by feasibility, but an undeniable underlying need, nonetheless.)
After an expedited definition process, we arrived at our project goal: to marry an authentic e-commerce experience with as many needs and wants of our users as we could feasibly achieve.
Ideation Time
With our guiding principles in mind, we ask ourselves: How do we harness existing powerful API libraries and a powerful cultural affinity towards dramatic and playful makeup to create a delightful and inclusive e-commerce experience?
~Low Fidelity Ideation Techniques~ AKA Paper
For the ideation process, we considered both constraint and context, respectively restricting and accrediting potential features down the road.
Constraints become especially important here when dealing with a camera/VR experience:
For instance, design-wise, we must consider the one-handed “thumb zone.” and commonplace user experiences and, related, expectations around popular camera-oriented apps.
More about Scott Hurff’s thumb zone here. Note this is for the Right Handed Folk.
Feasibility-wise, we must remember our time constraint 👮🏼♀️, the availability and robustness of cosmetic API libraries as well as the feasibility of both true inclusivity in virtual makeup application as well as potentially tweaking or fixing inaccuracies in virtual makeup application
Some of the contextual circumstances that we considered include:
Human-Physical limitations, temporary or permanent. (We are, after all, asking the user to take a selfie and therefore should absolutely keep the one-handed experience in mind.)
A vast range of environmental lighting and how that might influence virtual quality and accuracy
Users with the inability to deeply focus on the task at hand- be it temporarily (playing on the phone while walking, a new mom with a lot going on, limited connectivity), or permanently due to disability.
Prototyping
Treating the little time we had as a design sprint, we quickly iterated on user-centric ideas and highlighted feasible features that demonstrated our core user motivations.
Task flow for creating a MAC Look from scratch:
One key purpose of the prototype was to test out a hypothesis architecture and when to introduce the product line within a playful app.
In order to narrow scope in time for the impending client runthrough, we chose to focus on lips and brows.
Lip Architecture:
Choose color (narrowing down)
Choose Finish / Product Line (introducing retail elements)
Choose Intensity (allowing manipulation and playfulnesss)
Brow Architecture:
Choose Applicator type (narrowing down)
Choose Color (introducing retail elements)
Choose Style (allowing manipulation and playfulness)
Our screen progressions, flows and feature prioritization sessions happened quickly on whiteboards and in notebooks.
In order to compete with the apps that we had tested, we decided to test a snapchat-like experience that was entirely camera focused.
We chose to do so because:
MAC’s (relatively) straightforward product line can be abstracted from a retail experience
Riffing off of Sephora, Mac has an extensive range of colors to appeal to playfulness. We wanted to give users access to colors ASAP, just like they have in the store.
Within the time frame, we decided that it was smarter to speak to the client about the virtual-try-on experience rather than optimizing a mobile retail experience just like everyone else.
With no time to spare, we quickly had a mid-fidelity prototype working (no pixel pushing!) through rapid prototyping with Adobe XD.
Next Steps:
As we are given client feedback and potentially seal the deal, we can commit more time to ideation and user testing.