Dyson — Navigation Enhancements

Streamlining Navigation to Reduce Drop-Off Rates & Boost Engagement

The Brief

Dyson aimed to improve the user experience by addressing key objectives:

1. Enhancing Navigation: Simplify and streamline the navigation UI for ease of use.
2. Reducing Drop-Off Rates: Ensure users remain engaged throughout their journey.
3. Boosting Revenue: Create a seamless path to product discovery and conversion.

Initial usability testing revealed promising results, with participants describing the navigation as:

• Easy To Use: 90%
• Straightforward: 80%
• Time-Saving: 60%
• Effortless: 50%

Post-testing, several critical requirements emerged:

• Support for a customised category (“Featured Technology”) managed by content merchandisers.
• Scalability to accommodate future categories.
• Layout adaptability for different markets.
• Functionality for categories with more than six items.
• Refinement of the “Shop All” button, ensuring optimal UX placement.

The Solution

To address the brief, I delivered polished hi-fidelity designs for both mobile and desktop platforms:

Desktop Navigation

1. Closed Navigation: Minimal and clean design for an uncluttered interface (Fig 1.1).
2. Expanded Navigation: Showcasing categories such as “Featured Technology,” “Lighting,” and “Dyson Technology for Business” (Figs 1.2–1.4).

Fig 1.1 — Hi-fidelity Sketch designs of the desktop US navigation closed.

Fig 1.2 — Hi-fidelity Sketch design of the desktop US navigation shop (featured).

Fig 1.3 — Hi-fidelity Sketch design of the desktop US navigation shop (lighting).

Fig 1.4 — Hi-fidelity Sketch design of the desktop US navigation shop (Dyson technology for business).

Mobile Navigation

1. Tier 1: Primary navigation (hamburger menu open) with clear entry points (Fig 2.1).
2. Tier 2: Focused “Shop” category navigation (Fig 2.2).
3. Tier 3: Granular product-level navigation, e.g., vacuum cleaners (Fig 2.3).

Fig 2.1 — Hi-fidelity Sketch design of the mobile US navigation tier 1 (primary navigation — hamburger menu open).

Fig 2.3 — Hi-fidelity Sketch design of the mobile US navigation tier 2 (shop).

Fig 2.3 — Hi-fidelity Sketch design of the mobile US navigation tier 3 (vacuum cleaners).

Deliverables

To ensure seamless implementation, I provided the following:

• Documentation: Breakpoint-specific guidelines via InVision Specs.
• Prototypes: Axure files demonstrating click and hover states.
• Imagery: Optimised visuals for digital platforms.
• Copy Matrix: Translations where required for global consistency.

The Result

A/B Testing (January 2021)

Testing was conducted over four weeks in the USA (.com) and Germany (.de) markets, yielding the following results:

• +19% (+10k) shoppers visited Featured Technology pages.
• There is no significant increase in purchases of featured products (highlighting further optimisation opportunities).
• +40% increase in desktop visits.
• +10% increase in mobile visits.

Next Steps

Following the success on the desktop, Dyson initiated tests on tablet and mobile for asset-heavy UIs, focusing on:

• Featured Technology
• Tier 3 Navigation, e.g., vacuum cleaners (Fig 2.3).

The Solution (Continued)

I created additional hi-fidelity designs to address tier 3 tablet and mobile-specific needs:

Tablet Navigation

1. Featured products (Fig 3.1).
2. Hair care categories (Fig 3.2).

Fig 3.1 — Hi-fidelity Sketch design of the V2 tablet US navigation shop (featured).

Fig 3.2 — Hi-fidelity Sketch design of the V2 tablet US navigation shop (hair care).

Mobile Navigation

1. Featured products (Fig 4.1).
2. Hair care categories (Fig 4.2).

Fig 4.1 — Hi-fidelity Sketch design of the V2 mobile navigation shop (featured).

Fig 4.2 — Hi-fidelity Sketch design of the V2 mobile US navigation shop (hair care).

The Result (Continued)

A/B Testing

The Dyson insights team is analysing performance results for tablet and mobile platforms. Early indicators suggest improved engagement, supporting a broader rollout.