Header/Navigation, Vitamix (2024).
Overview
A left-over from the "lift & shift" migration, the header and navigation had not been really looked at for 5+ years.
Goals
- To better serve users on mobile devices
- Clarify product offering
- Consolidate different levels of navigation
- Flex for differences between territories and verticals
- Accommodate translations
- Easily updatable within Adobe Experience Manager
- Make use of Design System components
Work
Engaged an agency to run a card sort on the (then) current navigation. This also included user interviews.
Paired down the amount of primary links. Confusion between "What You Can Make" and "Recipes" was one example.
Taxonomy created, verified by product team, to clarify differences between internal & external naming. This followed a structure of:
- Product
- Vertical (Household, Commercial)
- Type (Blender, Attachment, etc.)
- Series
- Category (Smart System)
- Vertical (Household, Commercial)
Clickable mocks created in Sketch & InVision
Submitted mock for accessibility review by Level Access team
Multiple rounds of internal stakeholder review
HTML & CSS mocks created
Results
Even though development work had started, unfortunately I never saw it implemented.
The mobile-first designs worked well to clarify the product offerings in a scannable way. It could be easily managed with changes to the product lines.
The responsive construction helped transition between devices.
Reducing the primary links, as well as focusing on the vertical you were viewing assisted in reducing the amount of real-estate the header occupied.
Leveraging the Design System made brand consistency less of an issue when offerings changed between territories.
