Chanel
Chanel
A redesign of the website's information architecture.
A redesign of the website's information architecture.
Project: Information Architecture, desktop web redesign
Client: Information Architecture course project
Tools: Figma, Miro, Optimal Workshop
Project: Information Architecture, desktop web redesign
Client: Information Architecture course project
Tools: Figma, Miro, Optimal Workshop
Brand
Stakeholder and Audience
Consequence
Usability tests
Card-sorting
Challenges
IA schematic diagram
Low-fidelity prototyping
Tree-test
Mid-Fidelity prototyping
The Journey
Brand
Stakeholder and Audience
Consequence
Usability tests
Card-sorting
Challenges
IA schematic diagram
Low-fidelity prototyping
Tree-test
Mid-Fidelity prototyping
The Journey
Brand
CHANEL is one of the most famous luxury fashion brands
To demonstrate its high-end fashion image, the website has clean visuals and graphics
However, it suffers from many information architecture problems
Being one of the leading fashion brands, their website's model may inspire other fashion brands to follow similar problematic IA structure
Our goal is to make Chanel's website the frontier of its kind, and hoping it would influence other fashion websites to fix similar issues for their users.
Stakeholder & Audience
Consequence
Stakeholder
Our stakeholder in this project will likely be Chanel’s company itself, as the project would normally be funded by and realized for the company’s business purposes
Audience
The intended audiences are fashion and beauty patrons who are curious about the Chanel brand, and show interest in purchasing some of their products
They are also likely to be mature working adults who generate a stable and comfortable income
They do not sell clothing such as sweatshirts, hoodies, t-shirts, pants, joggings, etc., all of which are intended for the younger audience, including young adults
They also make their intended audience clear by simply showing large pictures and videos of mature models wearing their products all over their website.
IA issues leave the user feeling lost on this website and that they are wasting their time navigating through the website
As a result, CHANEL may lose their target audience who no longer feel like navigating on their site anymore
CHANEL demonstrates how bad information architecture can lead to poor usability and subsequent loss of users
These issues can be addressed without interfering with its glamorous appearance.
Motivation
Brand
CHANEL is one of the most famous luxury fashion brands
To demonstrate its high-end fashion image, the website has clean visuals and graphics
However, it suffers from many information architecture problems
Being one of the leading fashion brands, their website's model may inspire other fashion brands to follow similar problematic IA structure
Our goal is to make Chanel's website the frontier of its kind, and hoping it would influence other fashion websites to fix similar issues for their users.
Stakeholder & Audience
Consequence
Stakeholder
Our stakeholder in this project will likely be Chanel’s company itself, as the project would normally be funded by and realized for the company’s business purposes
Audience
The intended audiences are fashion and beauty patrons who are curious about the Chanel brand, and show interest in purchasing some of their products
They are also likely to be mature working adults who generate a stable and comfortable income
They do not sell clothing such as sweatshirts, hoodies, t-shirts, pants, joggings, etc., all of which are intended for the younger audience, including young adults
They also make their intended audience clear by simply showing large pictures and videos of mature models wearing their products all over their website.
IA issues leave the user feeling lost on this website and that they are wasting their time navigating through the website
As a result, CHANEL may lose their target audience who no longer feel like navigating on their site anymore
CHANEL demonstrates how bad information architecture can lead to poor usability and subsequent loss of users
These issues can be addressed without interfering with its glamorous appearance.
Motivation
Usability Tests
We tested the current website by asking participants to complete a few tasks, and we summarized our findings:
Repetitive naming: Different categories use the same label, which prevented successful task completions
Lack of connection: Subcategories and contextual links do not match the second level categories
Non-intuitive IA: The organization of the IA is confusing to users and prevents smooth navigation flow
We also conducted a card-sorting exercise with think-aloud to gain insights on how users would organize CHANEL's current labels and categories
Users had the most trouble sorting…
Latest fashion show
In boutique
Through follow-up interviews, we learned that the issues come from the repetitive labels and misleading categories
2021/2022 Métiers d'arts appears in both categories
In boutique category mixes lookbooks with purchasable products
Additionally, CHANEL has labels with French terms and uncommon terms that confuse users about their meaning
Card-Sorting
Challenge
How can we help users navigate through this website smoothly, while working with labels that are confusing to users but are also needed to preserve CHANEL's French fashion brand identity?
Problems
Usability Tests
We tested the current website by asking participants to complete a few tasks, and we summarized our findings:
Repetitive naming: Different categories use the same label, which prevented successful task completions
Lack of connection: Subcategories and contextual links do not match the second level categories
Non-intuitive IA: The organization of the IA is confusing to users and prevents smooth navigation flow
We also conducted a card-sorting exercise with think-aloud to gain insights on how users would organize CHANEL's current labels and categories
Users had the most trouble sorting…
Latest fashion show
In boutique
Through follow-up interviews, we learned that the issues come from the repetitive label and misleading categories:
2021/2022 Métiers d'arts appears in both categories
In boutique category mixes lookbooks with purchasable products
Additionally, CHANEL has labels with French terms and uncommon terms that confuse users about their meaning
Card-Sorting
Challenge
How can we help users navigate through this website smoothly, while working with labels that are confusing to users but are also needed to preserve CHANEL's French fashion brand identity?
Problems
IA schematic diagram
Current
Unbalanced weight of label organization under these arbitrary categories
Users will naturally gravitate their attention towards "In Boutiques" to perform their main search
More labels under a category will give users the impression of a more relevant category
After
Our redesign strategy is to fully keep the labels, but to reorganize the categories and redistribute these labels
We have separated main website function into three main categories, two of them being organized for two different types of users:
Fashion: For users who are strictly on the website for CHANEL's fashion product purposes
House of Chanel: For users who have brand loyalty to Chanel and are interested in the culture and history of the brand beyond its product
This type of user tends to be more familiar with the fashion or French terms, and so we have populated this category with the labels that tend to be confusing for the regular users
Services: For both types of user
Additionally, we have surfaced additional categories that were previously not directly accessible from the level 1 structure (e.g., handbags, shoes, costume jewellery, etc.)
Low-Fidelity prototype
We drew some low-fidelity storyboards that showcase task flows on the CHANEL's redesigned IA structure
Task 1: Searching for the material information of a CHANEL messenger bag
Task 2: Searching for the history of CHANEL
Redesign
IA schematic diagram
Current
Unbalanced weight of label organization under these arbitrary categories
Users will naturally gravitate their attention towards "In Boutiques" to perform their main search
More labels under a category will give users the impression of a more relevant category
After
Our redesign strategy is to fully keep the labels, but to reorganize the categories and redistribute these labels
We have separated main website function into three main categories, two of them being organized for two different types of users:
Fashion: For users who are strictly on the website for CHANEL's fashion product purposes
House of Chanel: For users who have brand loyalty to Chanel and are interested in the culture and history of the brand beyond its product
This type of user tends to be more familiar with the fashion or French terms, and so we have populated this category with the labels that tend to be confusing for the regular users
Services: For both types of user
Additionally, we have surfaced additional categories that were previously not directly accessible from the level 1 structure (e.g., handbags, shoes, costume jewellery, etc.)
Low-Fidelity prototype
We drew some low-fidelity storyboards that showcase task flows on the CHANEL's redesigned IA structure
Task 1: Searching for the material information of a CHANEL messenger bag
Task 2: Searching for the history of CHANEL
Redesign
Tree-test
Results
Users had a high success rate ~80% when completing the tasks based on our redesigned CHANEL website structure
However, most of them navigated through other categories before finally landing on the correct navigation route
But low directness rate may not be a bad thing for CHANEL, because this website is essentially designed to advertise the brand's products and culture
Exploring other categories can lead users to learn more about CHANEL
This might be an effective way to transition user type from fashion product focused to culture and history focused of CHANEL
To test the navigation of our redesigned CHANEL website structure, we conducted tree-tests based on a few tasks
Mid-Fidelity prototype
Based on our tree-test results, we have decided to keep our redesigned structure as it is, but to perform additional improvements on the UI
Demo 1: Searching for in-store availability of a CHANEL messenger bag
Demo 2: Searching the history of CHANEL
Evaluation
Tree-test
Results
Users had a high success rate ~80% when completing the tasks based on our redesigned CHANEL website structure
However, most of them navigated through other categories before finally landing on the correct navigation route
Low directness rate may not actually be a bad thing for CHANEL, because this website is essentially for brand advertisement of its products and culture
Exploring other categories can lead users to learn more about CHANEL
This might be an effective way to transition user type from fashion product focused to culture and history of the brand beyond its products
To test the navigation of our redesigned CHANEL website structure, we conducted tree-tests based on a few tasks
Mid-Fidelity prototype
Based on our tree-test results, we have decided to keep our redesigned structure as it is, but to perform additional improvements on the UI
Demo 1: Searching for in-store availability of a CHANEL messenger bag
Demo 2: Searching the history of CHANEL
Evaluation
