L'Oréal Groupe
L'Oréal Groupe
Information Architecture Redesign
About
L'Oréal leads top cosmetics brands as a parent company, providing confidence boosting beauty products within every niche in the industry. From skincare to hair care to makeup, L’Oréal brands are for every audience. Its website is a hub that hosts information about L’Oréal Groupe’s mission, practices, innovation, and more.
Current Website
The website serves as a central hub, providing valuable information about L'Oréal Groupe's mission, practices, and innovation.
While the website navigation is relatively straightforward, an effort was made to streamline it further. By condensing the main categories and reducing the number of subcategories, essential content could be prioritized to enhance the overall user experience. This approach ensures that all significant topics are covered without cluttering the drop-down menus, resulting in a more optimized and user-friendly website.
My Role
-
Streamlined website IA with content inventory, affinity diagramming, and search log analysis
​
-
Used Optimal Workshop for card sorting, Tree Tests, and Chalkmark tests.
​
-
Identified task success and abandonment rates.
​
-
Analyzed user feedback and test data iteratively.
My Takeaways
1. Performing a Content Inventory is an important first step in designing a website or application, as it helps to identify the existing content and structure of the site.
​
2. Optimal Workshop is a useful tool for performing Card Sorts, Tree Testing, and Chalkmark Testing to analyze user data and identify issues related to navigation.
​
3. Renaming and merging categories help to improve the ease of user navigation.
​
4. Failures are also an integral part of the process. Although they are daunting, learning to identify how we can work towards a solution is important.
Shortcomings of the Website
Shortcomings of the Website
How did the IA Redesign help?
How did the IA Redesign help?
-
4 level menu items​
​
-
Confusing category names ​​
-
Reduced menu items​ to 3 levels
​
-
Renamed categories for better understanding
​
-
Designed "Sort & Filter" pop up to filter everything at once
​
-
Designed a carousal for cohesive and fast navigation
-
For careers, difficulty in applying all filters at once
​
-
Complex and time consuming navigation to search for relevant data
Identifying Intended Target Tasks
Since the L’Oréal website is strictly about the business’s information, it is likely everyday consumers are not intended to be the target users. The website’s current content leads visitors to complete one of two actions:
​
-
Business Interactions
​
-
Learning about L’Oréal
Visualize target audience as Personas
Goal
-
To condense the data and streamline website navigation to easily perform tasks.
​
-
Restructe web page content to for a more cohesive structure for learning.
Process
Content Inventory
It was found that within the main categories, subcategories are further reduced down to sub-subcategories.
While all the content holds importance, the many topics clutter the drop down menus when content can be combined.
Content Inventory helped to target repetitive menu items and content that could be combined together.
By removing redundant items and allowing one to absorb another, we the categories were condensed down from 123 to 62.
Card Sort
Open Pilot Card Sort
Created 14 Categories using 62 cards
Next, due to overlapping cards the categories were further reduced to 7
Closed Card Sort 1
Added the "I don't Know" Category for testing, to allow participants room to not make forced choices if they did not understand a topic.
.png)
Findings
​1. Participants confused “Foundation L’Oréal” with foundation, a makeup product.
​
2. The difference between “Safety” and “Responsibility” was not clear, so participants placed similar cards into these categories.
For example “Fighting Climate Change” was put into both, when it was intended to be an environmental “Responsibility.”
Result matrix for card sort 1
Changes Implemented for Card Sort 2
Next step was to rename categories and cards for better clarification.
1. Change “Responsibility” to “Social Responsibility” to evoke thoughts of responsibilities companies have to society, such as running initiatives for the environment.
2. Tried to test a different title for “Foundation L’Oréal” for better context.
Reintegrated more cards from the initial deck of 62 for testing to better flesh out the 28 cards that consisted of mostly general information.
Increased the number of cards from 28 to 41
Hybrid Card Sort 2
.png)
Findings
1. One participant created a category called “Business and Finance,” though most of their cards were placed into “About” by all other participants.
2. Specifically named cards, like “Modiface,” from the Pilot Card Sort ultimately ended up in “I don’t know.” Such cards were not helpful as the participants didn’t understand the context,
3.“Managing Water Sustainably,” was frequently placed under “Social Responsibility.” This helped us to flesh out content more specifically, but more intentionally, as not to clutter navigation. Still, participants were sorting similar cards between “Social Responsibility” and “Safety.”
4. “Foundation L'Oréal” was kept the same, it would be better understood in the context of where it is placed, which is “Social Responsibility".
Result Matrix for Card Sort 2
Site Map
The current L’Oréal Groupe website has 4 layers of menu items.
The layers of the menu items were reduced from 4 to 3.
Defining User Tasks
Task 1
You are a professional makeup artist (MUA) that wants to explore other professional brands to expand your makeup kit. Where would you go to find such brands? (Learning Task)
Task 2
You believe makeup is a great way to express yourself. You feel that working with L'Oréal would be an opportunity to introduce creativity into your work. Where would look to apply for a job with L'Oréal? (Business Interaction Task)
Task 3
Caring for the environment is important to you, and you'd like the products you use to do the same. Where would you go to learn about L'Oréal's commitments to the environment?
Tree Testing
Pilot Tree Test
Only Task 1 and Task 2 were tested to get started
.png)
Task 1 Analytics
Task 2 Analytics
Tree Test 1
Included Pre Study Questions
It was important to see the participant’s relationship with personal/cosmetics products.
Knowing this gives context to why the studies may not be as accurate as if the tests were given to the target audience.
All of the three tasks were tested.
.png)
Task 1 Analytics
Task 2 Analytics
Task 3 Analytics
Pre Study Results
1. Out of 11 participants, the majority shopped for their own personal products, one did not.
2. Shopping ranged from once or twice a week to every six months.
3. These participants are just average consumers. Knowing this, reflected that most of the participants are familiar with the brand’s subject content.
Pre Study Analytics
Changes for Tree Test 2
1. Adjusted category name; changed “Safety Standards” to “Production Safety Measures” to clearly state it concerns production.
2. Revised Task 3 to clearly state purpose of task.
-
Task 3 Prompt: Caring for the environment is important to you, and you'd like the products you use to do the same. Where would you go to learn about L'Oréal's commitments to the environment? (Learning Task)
3. Additionally, revised Task 2 ; thought the question was leading, due to the word “opportunity” being in there, since that was the location of the answer. Changed to the phrase, “a good space” to test its success as a task.
-
Task 2 Prompt: You believe makeup is a great way to express yourself. You feel that working with L'Oréal would be a good space to introduce creativity into your work. Where would look to apply for a job with L'Oréal? (Business Interaction Task)
Tree Test 2
The same pre study questions from Tree Test 1 were included.
Task 1 Analytics
Task 2 Analytics
Task 3 Analytics
Wireframe Iterations
Task 1
Task one was considered to be fairly simple as it had a success rate of 100% throughout all the tests.
​
Therefore, no design recommendations are suggested.
The screens were made responsive for mobile users.
Task 2
The search bar invites visitors to find specific job openings.
It then directs them to a new window of openings.
​
User needs to open individual filters to sort.
Current website:
Design recommendation:
-
Implemented simple "Sort" and “Filter” pop up menus to allow users to view postings based on the date of posting, if it’s on-site, remote, and more.
​
-
Allows for the filters to be shown all at once.
Task 3
Currently, due to L’Oréal’s current navigational structure of four levels, it takes time to navigate to between them; therefore, learning about content may feel disjointed.
Current website:
Design recommendation:
-
Added a carousel at the top of the page, this will help users to quickly navigate between different content pages.
Chalkmark Test
The aim was to see users’ first assumptions to how a task might work.
Tested Task 2 (Business Interaction Task).
Task Prompt
You believe working with L'Oréal would be an opportunity to introduce creativity into your work. Where would look search for job openings?
.png)
Improvements & Suggestions
-
Increase the participant pool and number of iterations based on feedback.
​
-
To yield better results for the task 3, the categories could be refined and tested in the tree tests.
​
-
Furthermore, interactive digital prototypes could be created, and insights from the chalkmark testing could be analyzed to improve the usability of the website.
Tools
