Éstée Lauder
— COMPANY
Zerho
— ROLE
UX Designer
— DATE
Summer 2019
As part of my summer internship with a LA-based cybersecurity start up called Zerho, I designed and prototyped a web-based makeup app for Estée Lauder with Smashbox as the beta client.
Note- these designs belong to Zerho and I was given permission to put them on my portfolio
Problem
Customers want to buy makeup online because it’s convenient. This is difficult, however, because they can’t try on makeup virtually before they buy, there are too many options to pick from, and they’re not always sure what type of makeup is best for them or how to apply it.
Opportunity
One of Estée Lauder’s main goals for this project was to create and foster a learning environment.
A virtual makeup web app would be an excellent opportunity for individualized makeup without having to go into a store and either try on a bunch of random makeup or ask a makeup artist. Features such as a virtual makeup try on, an artist recommends feature, and a celebrity makeup match feature would allow customers to shop from the convenience of their home and figure out what makeup works best for them. This will lead to higher conversion rates for online sales and increase customer satisfaction.
Final Prototype Walkthrough
Zerho’s Initial Designs
Product try on
Takeaways
• Design is outdated, clunky, and doesn't match branding
- • No differentiation with color family/shades
- • Numbered tabs indicate order makeup. Focus on education
- • Products displayed in shopping cart on same page eases check out
- • Can sort through different types of makeup (ex. Matte, Radiant)
- • Can’t search for a specific product
- • Upload image page background should be greyed out
Matching Look
Celebrity Matching Look
Takeaways
- Good and simple interaction, but visual design needs to be updated to reflect branding. Might consider adding a couple filter options for makeup looks
Market Research
Competitor Pros
• Sleek and simple designs
- • Different application areas for eyeshadow and eyeliner
- • Organization of products per # of items
- • Sephora’s product search bar
Competitor Cons
Sephora has different application options for bronzer/blush/highlight/Contour, but they are hidden 2 clicks into the application in the filter option. By not having these in the main menu, these products are less likely to be found.
As for Maybelline, it doesn’t have a compare look feature, a remove makeup feature, and the shopping cart is not as easily accessible. Sephora has a matching look feature as well (not pictured above), but it only has preset makeup looks.
Product Try On Direction
Goals
The goal of this feature is meant to be exploratory. Users should be able to search for and/or discover products and easily be able to check out. The numbered tabs encourage users to put on products in a specific order, ultimately leading to more product discovery. Once products are chosen, they appear on the right-hand side where users can add individual products to their shopping bag or the entire look all of which can be removed in multiple places. Additionally, you can also search for specific products using the search bar in each individual product category. Depending on what products you pick, there will be a section for tutorials below the shopping cart to enhance learning.
Display for Limited # of Products
For Estée Lauder, they want to be able to implement this web app for all of their brands, not just their site. With this in mind, I decided to have 2 options for product browsing based on the amount of products in stock: 1 by product and another by color.
Display by item
Color Family & Shade
Product selection organized by color family and then specific shade for categories with many different products.
Display by color
Recommend Brush
To increase sales and help give customers the tools they need to apply specific products correctly, a recommended brush is placed under the appropriate item in the shopping bag.
Recommended Brush Feature (Right side)
Compare Look
The user can save up to 4 different looks and look at them side by side. Users will be able to share their looks on social media.
Compare look feature
Application Area
In real-life makeup application, there are certain ways to create different makeup looks. By having the different application areas for eyeshadow and various techniques for eyeliner, this makes the makeup application process more realistic and lets users know what the possibilities are.
Application area feature
Matching Look Direction
Goals
Celebrities and influencers now have a lot of impact on the makeup industry and their customers. Many makeup users look up to these people for trends in makeup. This feature aims to bridge the gap between celeb makeup and purchasing the actual or closest tools they use from one of Estée Lauder’s brands.
I kept the main components similar to Zerho’s original mockup with the following feature tweak:
- Filters for different makeup looks regarding time-of-day
- This was to make it easier to search for specific looks for a celebrity for certain occasions, whether that be for everyday, nighttime, or events.
Matching Look
Artist Recommends Direction
Goals
After uploading your picture and filling out a quick questionnaire about your makeup needs and wants, the algorithm analyzes your face and gives the user personalized recommendations. I organized the navigation by parts of the face in order of how you’re supposed to apply makeup products. Each page gives you recommended products, video tutorials, and written application instructions. From the recommended products, you can go straight to virtual product try on.
When figuring out how to apply makeup, it’s not always obvious what your features are and how to apply makeup to accentuate them. With this tool, users will be getting advice essentially from a virtual makeup artist.
Artist recommends
Final Thoughts
Goals
As one of the biggest makeup brands in the world, Estée lauder needs to effectively enter the online market in a more personalized way in order to be competitive. Having an interactive web-based app with virtual makeup try on, a celebrity matching look, and an artist recommends feature would greatly increase sales and customer retention. Personalized care will make customers feel valued and, in theory, lead to less returns because trial and error is decreased in obtaining products.
Looking Ahead
The spec for this web app also includes a magic mirror feature where there is a live video feed and it will tell you how to apply and correct the users’ makeup application in real-time. Additionally, the favorite products feature has yet to be designed.