MAC
an unrivaled expertise in make-up artistry
During my internship at Estée Lauder on the MAC Creative team, my project involved the redesign the desktop and mobile experience (with a focus on mobile experience) of the MAC Cosmetics Brand website, particularly of its Single Product Pages (SPP). The redesign was driven by the need of MAC Cosmetics to help **best inform their customer's purchase decisions** and provide **an online shopping experience that MAC Cosmetics shoppers want to keep browsing on**. The website was launched in September 2021. The internship ran remotely for 10 weeks during Summer 2021.
THE TEAM
Creative/Design Intern
Shannon
Manager
Kristine Rodriguez, Executive Director Global Creative Operations
Senior User Experience Designer
Ting Chen
Social / Digital Team
Chealsea Taylor
The Rest of the Team
MAC Global Creative Operations Team
TOOLS
Figma, Usertesting.com, Digital Asset Management
BACKGROUND
In the REDESIGN OF THE MAC COSMETIC WEBSITE, we are particularly focusing on the redesign of the Single Product Page (SPP). The Single Product Page is a key page for consumers to make purchase decisions when landing on the MAC website. Our solution is a proposed design of the Single Product Page that provides consumers with an optimal shopping experience that best informs their purchase decision. MAC Cosmetics wants to increase the number of purchases that consumers make online. They want to improve their revenue via optimization of their Single Product Page.
As the research and UX data synthesis lead for deriving the brand redesign SPP recommendation, I took charge of the research process including competitive analysis, research report, and user personas and scenarios. Following, I proposed 3 UX design solutions of the Single Product Page followed by a complete usability testing on the design solutions, leading to a final SPP design with UX/UI recommendation to the design team.
*To preface, within MAC, designs are done by an agency called MediaMonks - my work is primarily regarding user research and proposing design recommendations and solution changes.
FURTHER CONTEXT
What challenge are they facing? Here's what MAC relayed.
After analyzing prior research conducted by MAC and its user testing results from their current redesign of the MAC Cosmetic site from MediaMonk Agency (the agency their designs are made), SPP pages lead to cognitive overload due to the long length of the SPP and therefore, leading to a longer decision making process. There are currently 7 cross selling sections. Users find themselves abandoning and not completing their make-up purchase due to indecision. In addition, users are skeptical of the product they are purchasing when they are not given the right information.
They identified two area of opportunities:
Single Product Pages, at its minimum, have these foundation components: description of their product, product images, ratings & reviews, product options & availability, and ability to add items to the cart. Two other sections are:
01
Cross Selling Sections
Cross selling sections are any sections of a product page that advertises and aims to sell other products to existing customers. There are 7 cross selling sections on the current redesign, which has resulted in an overly long SPP page. Identifying which cross selling sections are pivotal and which are unnecessary allows us to understand what information consumers want to see and how to organize our SPP so they get to what they need quicker.
02
Audit-Specific Component
Visuals and product images play a critical role in consumer’s shopping experience and highly influences their purchase decision. Knowing what component provides the most valuable insight of MAC’s product (copy, images, video, etc) will best help inform our consumer’s decision while also helping to inform our future shoots/content plans.
we hypothesize that …….
reducing the number of cross selling sections will enable users to find their information quickly and will deliver an experience that best informs and completes their purchase decision.
USER RESEARCH
Let’s understand the problem more …
Competitive Analysis
We analyzed the competitive landscape to identify trends and best area of opportunities for SPP optimization.
Research Summary
MAC customers find that Single Product Pages are in fact too long, leading to a drive off their site. This is rooted primarily in too many cross selling section sections some of which is unnecessary.
Overall, brands tend to have 1-3 cross selling modules. Understanding which should be included will also be the focus of our research and design process. This confirmed the direction of our hypothesis and in pursuit to understand whether or not reducing the number of cross selling section and being intentional in the product images we use will improve our user's MAC shopping experience on their Single Product Page. To test that hypothesis, we will explore 3 different design variations of the SPP page.
PROPOSED DESIGN SOLUTIONS
We brainstormed, focused, and proposed 3 UX solutions of the SPP page.
7 cross selling sections
3 cross selling sections
1 cross selling section
TESTING & EVALUATION
User Testing
A user testing was conducted to assess the 3 different design solutions and audit components with 5 users (female and make-up product users). A user testing script was created including screening questions, method, and test with questions (and follow-up) for each design was written to be launched on usertesting.com. Here's what we've discovered:
Here’s what we discovered:
In short, shortening the Single Product Page does have an impact. We discovered which design users preferred most:
40%
Media Monks Design
60%
3 Cross Selling Sections
40%
1 Cross Selling Section
Also, what type of cross selling sections do they want?
"Can shop from here right away and get the entire look from eye to lip. It adds value to my purchase decision because it helps me create a look and seeing it on a model makes a huge difference" - 30, Female
Users have agreed that they are highly influenced by the authenticity and realness of seeing MAC products on real people. Social media provides a glimpse into MAC make-up products on actual people that redefines beauty realness for customers that models alone can not fill. In addition, users are most inclined to purchase alternative products with recommendations from MAC artists and crafted looks of various MAC products.
How about visuals?
Majority of users emphasized their preferences for statics images than videos/animations such as swatches & smooshes and especially to see the product on people as a visual demonstration to be included.
DESIGN RECOMMENDATIONS
From our user feedback, I analyzed the findings and translated them into design recommendations and a design solution
Incorporate selective cross-selling sections
When users land on a page, they should see the information they need. Integrate 3-4 cross selling sections is sufficient enough. Cross selling section were recommended were:
Social Media Integration - Powder Kiss Social
Alternative Products to Complete Look - Get the Look
Recommendations - You May Also Be Into
Leverage Social Media as Design Motivators
Powder Kiss Social Section remains the most influential in a consumer's purchase decision. This is essential to not only selling MAC's products, but to sell themselves as a lifestyle brand. Often times, users head to social media for recommendations, a guide to whether or not they will buy a product, and most importantly, for inspiration. This will drive forward a more realistic and stronger relation between our consumers and MAC's brand. Precedence on social sections will remain in our final design.
Include diverse, inclusive image assets
Regarding audit-components, imagery should focus on inclusive images with an emphasis of product on people across a variety of skin tones and faces to **holistically represent our user base**.
FINAL DESIGN
Here’s where we landed!
As mentioned before, designs within MAC are done by an agency called MediaMonks including these designs. The designs were informed from my research provided with design recommendations. A few design changes were done from me.
a flagship experience delivering artistry in the digital space - foundational to a MAC's experience.
Get Inspired
The "Get the Look" section serves to inspire MAC consumers in crafting a look that is compatible with the current MAC product in combination with other alternative products. This serves not only upsell other MAC products, but to aid consumers in their purchase decision making process by providing recommendations from MAC artists.
Social Media for Authenticity
We included the social media integration that users are able to see MAC makeup products on actual people that extends beyond models. This will provide a more realistic and accurate representation/reflection of MAC products on people. This provides a more valuable information for consumers when informing their purchase decision - giving them what they expect to receive.
Make-Up Recommendations
Formative to the Single Product Page experience are cross selling recommendations. Recommending other make-up products are not only a familiar cross selling male-up shoppers are accustomed to seeing, but providing MAC consumers with recommendations will upsell products.
OTHER SMALL PROJECTS
MAC Foundation Finder Bot
In supporting the Digital and Social team, I helped to gather images within their Studio Fix Foundation and Studio Tech for their MAC Foundation Finder Bot project on the Digital Asset Management.
REFLECTIONS
