Chanel Redesign
Redesigned the information architecture and visual system of the Chanel
website in a more accessible and usable manner.
Problem
The website of Chanel has undeniably appealing visuals, however, users are having difficulties navigating the current Chanel website.
Goal
Re-design the information architecture and produce a version of the Chanel website that promotes navigability and an architecture that is more in line with users’ web browsing expectations, needs, and behaviour.
———— Clickable Prototype ————
New Labelling
Under the Chanel Home page, three new navigation components: Fashion, House of Chanel, and Services. The first one “Fashion” is for users who are on the website strictly for fashion product purposes. The second one “House of Chanel” is for users who have brand loyalty to Chanel and are interested in the culture and history of the brand beyond its products. The third one “Services” contains General information about Chanel, such as Career opportunities and FAQs.
Reorganized Navigation Bar
Our new design improves the website’s navigation components by refining the “Fashion” category, eliminating the Haute Couture component and relocating the Chanel News component. Showing the labels sequentially following the logical order between primary navigation and sub-navigation bar instead of presenting many labels at once. Reduce visual crowding and lower the opportunity that users to be redirected to other pages in another category.
_gif.gif)
Reorganized product subcategories
We organized the product subcategories by pulling them from the bottom of the product type page. For instance, to find a specific product type in the original website such as “messenger bag”, users had to click on Handbags, and scroll down to find its subcategory including “messenger bag”. To ease this process, we brought all the product subcategories to the drop-down menu under the parent product (handbags) category.
Design Process
Empathize
Questionnaire
Usability Test
Ideate
IA Schematic Diagram
Iterate
Tree Test
Define
IA Analysis
Card Sorting
Redesign
Low Fidelity Diagram
Mid Fidelity Diagram
Emphathize
The Goal：
1, Understand users' needs when they use the Chanel website.
2, Uncover common users’ pain points when navigating the Chanel website.
Questionnaire
20
participants
A majority of participants have experience viewing a fashion brand website before, and most of them used fashion brand websites for shopping.
Usability Tests
participants
3
There are three parts in our usability test: a free exploration time for users to explore the website, assigned tasks, and a post-task interview.
Main Findings:
-
Repetitive Naming: Causes sufficient difficulty for users who would like to browse information from the menu.
-
Lack of connection: Between the main menu and directories. Not able to navigate back to the overarching directory once move to another page.
-
Non-intuitive IA: Users demonstrated a level of difficulty navigating the website because the structure of the IA is chaotic.
Define
Card-sorting
37
participants
Conducted a card-sorting exercise with think-aloud to uncover how users organize current labels and categories on the menu of Chanel.
Interview
participants
3
The follow-up interview is to understand users' intentions, reasonings and decisions behind the card sorting exercise.
Key Insights:
-
Users had the most trouble sorting "Latest Fashion Shows", "In Boutiques", and "The Literary Rendezous at Rue Cambon".
-
Repetitive Labels: Cruise 2022/23 appears under two categories.
-
Misleading Categories: In boutique category mixes lookbooks with products.
-
Participants are hard to define labels depicted in French, and a lot of name-specific labels do not have a proper English translation.
Ideate
Before IA Schematic Diagram:
After IA Schematic Diagram:
-
We made slight changes to the naming of the category, most of the improvements will be completed by combining and rearranging categories and labels.
-
In the original “In Boutiques” category, all subcategories that are collections with lookbooks will be taken out and organized into a new subcategory "Seasonal Collections”.
-
"House of Chanel” will contain all information and news about Chanel's brand and culture. Users who browse this category is more likely to be familiar with fashion or French terms, so we added labels with French terms under this category.
Redesign
Low-Fidelity Prototype
Based on our redesigned IA schema, we created two sketches to show the workflows of how users operate the redesigned Chanel website and perform certain tasks within the website.
Storyboard 1: Search for the materials of a Chanel messenger bag
Storyboard 2: Search for the history of Chanel
Iterate
Tree Test
To obtain more details about user preferences and behavioural patterns on our redesigned information architecture of the Chanel website, we conducted tree tests based on a few tasks.
Success Rate
78%
Directness Rate
32%
Main Findings:
-
The website of Chanel also acts as an advertisement for their products, brands and cultures.
-
Low directness caused by clicking and redirecting to various pages might also give users an opportunity to learn more about Chanel, and incentivize consumption and customer loyalty.
-
We decided to keep the french language title as it is to maintain the original branding of the Chanel website.
-
In order to further improve the directness rate to an optimal level, we decide to improve the navigation bar presented on the website.
Project Learned
1. Keep the user at the center during the reorganization process
Because we cannot represent users, we must depend on user feedback obtained through usability testing and card sorting to identify the key pain points with the website's current information architecture. By collecting these data, we can then evaluate the effectiveness of our proposed solution by having users go through tree tests.
2. Reorganization of IA can solve
labelling issues
Our main challenge was dealing with labels that are confusing to most users, but these labels are also essential to Chanel's brand identity. We faced a dilemma: either rename these labels or retain them. However, we found a solution by placing these labels under aother category. By doing so, we can minimize users' cognitive load based on their user type, thus resolving the labelling issues.