MAC
an unrivaled expertise in make-up artistry
THE INTRODUCTION
MAC Cosmetics Brand . COM redesign
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
MAC BRAND VALUES
the pioneering make-up authority for all since 1984
M • A • C is grounded in enabling self-expression, embracing a creative compass that informs all language, design, expressions, and experiences while also making room for evolution.
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. We aim to address the following:
What key product information do our users seek? How can we prioritize the information architecture to make it more valuable? Are there new and innovative ways that matches the digital trends on the current market?
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 & scenarios. Following, I proposed 3 UX design solutions of the Single Product Page based on our hypothesis and findings followed by a complete usability testing on the design solutions that was eventually analyzed, 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.
IDENTIFY
What challenge are we 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), the problem the SPP page is facing falls into a core usability problem - cognitive overload due to length of the SPP being is too long leading to longer decision making. There are currently 7 cross selling sections. Users find themselves abandoning and not completing their make-up purchase due to indecision and the time it takes to look through the entire page. In addition, users are skeptical of the product they are purchasing when they are not given the right information. Consumers want to browse through make-up products with ease and trust to make an informed purchase decisions.<
Single Product Pages are core to a consumer's purchasing experience. We want an ONLINE EXPERIENCE that accompanies the IN-STORE SHOPPING EXPERIENCE, speaking directly to our consumers.
How are we going to optimize? Here's our two identified areas of opportunity:
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. Other sections included are additional features and sections (such as cross selling sections) that complement the user's shopping experience.
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 Single Product Page that would prioritize and deliver the information they need the most.
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
What is the core problem? And where exactly within SPP is there the greatest opportunity for optimization?
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 brand site. This is rooted primarily in cross selling section sections that remains in abundance and some that are unnecessary.
Cross selling sections across all brands take up majority of the site's page and its content varies depending on the product. Despite the information it provides our users, the question of whether or not they are valuable to our users needs to be further analyzed.
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 SOLUTION
We brainstormed, focused, and proposed 3 UX solutions of the SPP page. As mentioned, the designs included MediaMonk's design with 7 cross selling sections, design of just 3 cross selling sections, and a design of only 1 cross selling section that were slightly changed and iterated by me using Figma for the user testing purpose to identify the best solution.
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. The test consisted primarily of qualitative questions from users as well as some quantitative questions to assess from a metric standpoint. Here's what we've discovered:
Here’s what we’ve discovered
Shopping experience online are highly influenced by MAC's artistry, ability to inspire looks, and cultivate a sense of being seen in their core category of products.
Design Preferences
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
Our essential question - which cross selling sections do we want?
MAC shoppers are highly influenced by the authenticity and realness of seeing MAC products on actual 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 be inspired and most likely to purchase alternative products not just provided by recommendations, but also in being able to **craft a look**. It aids in their decision making process when provided with recommendations and inspirations of a combination of make-up products recommended by MAC's artists.
"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
What we've included -
Social Media Integration - Powder Kiss Social
Alternative Products to Complete Look - Get the Look
Recommendations - You May Also Be Into
We know visuals are core to the experience. How about audit components?
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 the visualized 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 similar to design #2 so there is enough visual and textual information to attract users. Cross selling section selected (Get the Look, Powder Kiss Social, You Might Also Be Into) would focus on reflective visuals of make-up product on people.
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 DELIVERABLE
Here's our visualized design solution
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.
Our three cross selling sections .......
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.
a flagship experience delivering artistry in the digital space - foundational to a MAC's experience.
MINOR PROJECT
MAC Foundation Finder Bot
In supporting the Digital and Social team, I helped to gathering images within their Studio Fix Foundation and Studio Tech for their MAC Foundation Finder Bot project on the Digital Asset Management.
MAC Redesign Content Audit - PM
In the redesign of the MAC Cosmetics website, we want to identify current assets already on the brand .com website in order to identify what image assets we do not have and need to be shot for the redesigned website. At the beginning, I worked with an intern on the Art Production team to organize meetings with the art production team to identify current image assets and editorial team to identify current copies on the site. This allowed us to understand what is already on the site and what we new assets we need
REFLECTIONS
