UX Audit | Website Redesign

CHANEL Atelier Beauté

Role

Product Designer

Year

2022

Industry

Fashion & Beauty

In 2022, shortly after the launch of the Atelier Beauté CHANEL app, work began on redesigning the website to ensure brand consistency and align digital experiences, allowing customers to explore and engage effortlessly.

I was assigned as the sole product designer to lead the redesign process and conduct the UX audit that progressed from discovery to design ready for development.

In 2022, shortly after the launch of the Atelier Beauté CHANEL app, work began on redesigning the website to ensure brand consistency and align digital experiences, allowing customers to explore and engage effortlessly.

I was assigned as the sole product designer to lead the redesign process and conduct the UX audit that progressed from discovery to design ready for development.

Objective

The project's goal was to perform a UX audit based on the Baymard Guidelines, identify key usability pain points, and provide actionable recommendations. This provided a solid foundation for redesigning the website and enhancing the overall user experience.

Discovery

• Stakeholder interviews: Collaborated with CHANEL's team to align on goals, brand vision, and target audience needs.

• UX audit: Performed an in-depth analysis evaluating navigation, visual hierarchy, content layout, and interaction patterns to assess usability and ensure brand consistency.

• User research: Analyzed website analytics, reviewed customer feedback, and gathered insights from target users to better understand their behaviors and expectations.

UX Audit

The audit followed the Baymard Institute's Guidelines and focused on three key sections of the website: Homepage, Search, and Product Lists Page. These were prioritized based on analytics insights and stakeholder feedback.

Along with the audit findings, a thorough and detailed report was created for each section of the website, with actionable UX recommendations based on the respective guidelines.

Objective

The project's goal was to perform a UX audit based on the Baymard Guidelines, identify key usability pain points, and provide actionable recommendations. This provided a solid foundation for redesigning the website and enhancing the overall user experience.

Discovery

• Stakeholder interviews: Collaborated with CHANEL's team to align on goals, brand vision, and target audience needs.

• UX audit: Performed an in-depth analysis evaluating navigation, visual hierarchy, content layout, and interaction patterns to assess usability and ensure brand consistency.

• User research: Analyzed website analytics, reviewed customer feedback, and gathered insights from target users to better understand their behaviors and expectations.

UX Audit

The audit followed the Baymard Institute's Guidelines and focused on three key sections of the website: Homepage, Search, and Product Lists Page. These were prioritized based on analytics insights and stakeholder feedback.

Along with the audit findings, a thorough and detailed report was created for each section of the website, with actionable UX recommendations based on the respective guidelines.

Homepage: Main Findings

• Users struggled to find key content and features due to an unclear menu structure. The desktop interface adopted a mobile-first menu, which hindered usability.

• Users fail to discover vital features when they are only placed in an autorotating carousel and have a hard time interacting with it.

• Users miss shortcuts to desired destinations when links in visual elements are unclear.

• Disorganized footers can hinder users from finding information, potentially leading them to leave the site.

Homepage: UX Recommendations
Homepage: Redesign
Homepage: UX Recommendations
Homepage: Redesign

Search: Main Findings

• Users struggled to find key content due to limited search logic that did not account for synonyms, misspellings, or alternative terms.

• Predictive search suggestions (autocomplete) could include visual, context-aware results to guide users more effectively and enhance their browsing experience.

• The open search state does not provide curated suggestions that can inspire or guide users before they type their query.

• The 'No Results' page should always suggest that users reduce the specificity of their query, as well as provide users with results related to their query with search suggestions.

Search: UX Recommendations
Search: Redesign

Open state


Typing state


Search results


Search 'No results'

Search: UX Recommendations
Search: Redesign

Open state


Typing state


Search results


Search 'No results'

Product Lists: Main Findings

• Not displaying the total number of items leads to users wasting time on lists that are either too narrow or excessively broad.

• "Endless Scrolling" makes it difficult for users to access the site footer and they can be overwhelmed by the number of products loading or may overlook suitable items.

• Without breadcrumbs, users may get lost and have difficulty navigating up the hierarchy or broadening their search.

• Users need to be able to quickly tailor product lists and search results to include only the most suitable items. Without key filter types, users' ability to tailor selections is restricted.

Product Lists: UX Recommendations


Product Lists: Redesign
Product Lists: UX Recommendations


Product Lists: Redesign

Outcomes

The CHANEL Atelier Beauté website redesign project addressed key usability challenges to ensure a seamless digital experience. Deliverables included redesigned mobile and desktop interfaces, interactive Figma prototypes, and a detailed UX audit report.

These deliverables provided a solid foundation for ongoing improvements that will be phased into the experience to improve user engagement.

https://atelierbeaute.chanel.com/

Outcomes

The CHANEL Atelier Beauté website redesign project addressed key usability challenges to ensure a seamless digital experience. Deliverables included redesigned mobile and desktop interfaces, interactive Figma prototypes, and a detailed UX audit report.

These deliverables provided a solid foundation for ongoing improvements that will be phased into the experience to improve user engagement.

https://atelierbeaute.chanel.com/

Other projects