Improvements to the IA and Navigation System of
Dyson Canada Website
OVERVIEW
In the course project of INF2170, our team is redesigning the Dyson Canada website (www.dysoncanada.ca) with improvements to the information architecture and navigation system. Dyson is an advanced technology company originally registered in the UK and operationally headquartered in Singapore since 2019. The brand is leading the industry of innovative household appliances, including but not limited to vacuum cleaners, air purifiers, bladeless fans, hand dryers, hair care products, and lighting. Dyson has expanded its business worldwide with over 65 countries, and the websites differ based on the regions. We will be only focusing on the Canadian market specifically for this project.
PROBLEM SPACE
By conducting secondary research with reviewing over 500 customer reviews, we summarized three user pain points of Dyson Canada's official website as the confusion of product spectrum, messy information display, and low performance on navigation and web features. The design outcome aims to optimize the user journey and improve the visibility and prominence of Dyson Canada’s product range. Our team will start by sorting the content list retrieved from the website, performing an open card sorting, developing user task flows, and then presenting a more logical and user-friendly information architecture and navigation system design.
ROLE
UX Designer & Researcher
Card Sorting and Tree Testing;
Task Flow Design;
Prototyping;
Usability Test and Evaluation
December 2023
CARD SORTING MAIN FINDINGS
1. New Global Navigation
The original global navigation was excessively complex, with numerous elements that could benefit from hierarchical organization or removal. An overwhelming array of choices often confuses users, making it challenging for them to locate information effectively. Following our restructuring, we streamlined the content of the original global navigation, reducing the number of elements from 33 to 17.
The original global navigation was excessively complex, with numerous elements that could benefit from hierarchical organization or removal. An overwhelming array of choices often confuses users, making it challenging for them to locate information effectively. Following our restructuring, we streamlined the content of the original global navigation, reducing the number of elements from 33 to 17.
2. New Product Detail Page
Each product category previously comprised at least three layers, with some sections extending to four. This structure necessitated numerous taps to access review content, leading to decreased visibility and user confidence in successfully reaching their destination. Navigation on the site became time-consuming, and users faced challenges in recovering from incorrect paths. In response, we consolidated all product details and reviews onto a single page. This approach minimizes unnecessary structural depth, simplifying the user experience and reducing confusion.
Each product category previously comprised at least three layers, with some sections extending to four. This structure necessitated numerous taps to access review content, leading to decreased visibility and user confidence in successfully reaching their destination. Navigation on the site became time-consuming, and users faced challenges in recovering from incorrect paths. In response, we consolidated all product details and reviews onto a single page. This approach minimizes unnecessary structural depth, simplifying the user experience and reducing confusion.
h
USER TASK FLOW DESIGN
We have redesigned four major task flows for Dyson Canada website audiences to ensure a smooth and intuitive user experience.
w
MEDIUM-FIDELITY PROTOTYPE
Reflecting on our analysis, it's evident that exploratory browsing is a key user behavior on the Dyson Canada website, often by individuals unfamiliar with our extensive product range. To cater to this insight, we've meticulously crafted our primary navigation to enhance user discovery and engagement in the following manner:
Mega Menu Enhancements: Innovating Beyond Original Menus
Utilizing IA insights derived from user testing, we have restructured the extensive, flat data in our menu into a vertical-layered, multi-tiered format. We replaced the conventional hamburger-style menus with hover-activated dropdowns, integrating the previously separate two-tiered navigation bars into a unified system. This redesign emphasizes Level 2 categories, which contain crucial information, enhancing user engagement and click-through rates through facilitated exploratory browsing. The mega menu's user-centric design permits independent navigation across different tabs.
Utilizing IA insights derived from user testing, we have restructured the extensive, flat data in our menu into a vertical-layered, multi-tiered format. We replaced the conventional hamburger-style menus with hover-activated dropdowns, integrating the previously separate two-tiered navigation bars into a unified system. This redesign emphasizes Level 2 categories, which contain crucial information, enhancing user engagement and click-through rates through facilitated exploratory browsing. The mega menu's user-centric design permits independent navigation across different tabs.
Optimized Taskbar: Transition to Intuitive Navigation
We have transformed the main navigation by replacing text links with intuitive icons representing key services like search, language selection, shopping cart, and account management on the top right. Hovering over an icon reveals its label, serving as a helpful reminder for users.
We have transformed the main navigation by replacing text links with intuitive icons representing key services like search, language selection, shopping cart, and account management on the top right. Hovering over an icon reveals its label, serving as a helpful reminder for users.
Appearance and Usability: Embracing Minimalism
Our design ethos is centered around a dark, minimalist aesthetic. We use lines for delineation, minimize filler content, and prioritize imagery. Interaction with dropdown menus triggers a bold effect, enhancing UI navigation clarity.
Our design ethos is centered around a dark, minimalist aesthetic. We use lines for delineation, minimize filler content, and prioritize imagery. Interaction with dropdown menus triggers a bold effect, enhancing UI navigation clarity.
Local Navigation System: Focused Vertical Orientation
Our vertical navigation system is tailored for content-rich pages, promoting in-session exploration and efficient link traversal.
Our vertical navigation system is tailored for content-rich pages, promoting in-session exploration and efficient link traversal.
Strategic In-Page Linking: Elevating User Experience
In-page links are strategically utilized to foster content exploration, facilitate scrolling, and segment long pages into digestible sections.
In-page links are strategically utilized to foster content exploration, facilitate scrolling, and segment long pages into digestible sections.
Product Comparison: Clarifying Product Choices
Responding to user feedback about product discovery challenges on Dyson Canada's website, we developed a comprehensive product comparison feature. This feature is deployed across three levels: the specific product page (Level 3) showcases comparisons between different models or motor types within the same product; the product category page (Level 2) compares all products within a category; and the global navigation page highlights the latest two product comparisons.
Responding to user feedback about product discovery challenges on Dyson Canada's website, we developed a comprehensive product comparison feature. This feature is deployed across three levels: the specific product page (Level 3) showcases comparisons between different models or motor types within the same product; the product category page (Level 2) compares all products within a category; and the global navigation page highlights the latest two product comparisons.
Desktop Prototype: https://www.figma.com/proto/4q9y2OwJnPAriNp0guEIlF/2170-protptype?type=design&node-id=11-581&t=jhqdbq16vCrp1PIP-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=11%3A581&show-proto-sidebar=1&mode=design
Mobile Prototype: https://www.figma.com/proto/isW80zS0NsGJBh3evRzv5n/2170-mobile?type=design&node-id=55-248&t=VZYSFEVbdIL2x3V9-1&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1%3A2&mode=design