Product Design
Creating a better navigation experience for Canada's most trusted brand
My role
Principal UX Designer, Information Architect
Collaborators
Tiff Lau (UI Designer)
Brock Turner (Creative Director)
David Belanger (Creative Director)
Challenge
Increase top-level menu capacity for Canada's top brand. Improve outdoor equipment product findability and conversion. Update styles and improve accessiblity.
Solution
Research user patterns, stakeholder goals, product taxonomy and architecture. Consolidate the menu content into a more usable form. Work with the UI designer, product merchandising team and our developers to test and roll out improvements.
All sensitive information has been obfusticated for client confidentiality.
Background
MEC's growth has recently been eclipsed by the retail competition online and MEC is seeking to rapidly elevate their online experience to match the excellent in-store customer experience. As sole User Experience Specialist at MEC, I led our e-commerce team and the entire organization through this comprehensive project, creating agile processes as we went and working to create a more customer focused e-commerce team.
Research & Discovery phase
Gathering information on this project included gaining a deep understanding of the content across retail categories, referencing previous usability research work done on this project, a competitive analysis, stakeholder interviews and user research.
Stakeholder interviews
11 stakeholder interviews were held, including those with the VP of Sustainability, Director of Community Investment, Director of Brand Engagement, Program Manager of Business Innovation, and the E-Commerce Manager.
Interviews focused on understanding where we are trying to go as a retailer and how our departments interact with one another (online and in-store). Data around member purchase behaviour and navigation online were also emphasized.
User research & methodology
Robust user research and testing was invaluable to finding strong solutions for this project. I began by reviewing past usability research on our site experience, and my research expanded to include:
User interviews with 10+ experts and amateurs
Card sorts with 40+ participants
Analysis & tracking of user shopping data working with our team of analysts
In-store user observation for over 4 hours
Observation in our Member Services centre observing bilingual phone and chat
Prototyping in Figma
User testing with 8 participants, done rapidly with non-expert office staff
Heat mapping
Content first
The data showed that 30% of site visitors who enter at the homepage begin their shopping journey with the menu. Initially, the menu project only included a UI redesign but I identified over 178 inconsistencies and inaccurately named product selections in our content which were being mirrored and echoed across the entire site. At the end of my research over 62% of the shopping menu items, categories and subcategories were renamed or reorganized to optimize user search, SEO and reflect industry best practices in nomenclature.
MEC's menu also houses a large portion of editorial content, including expert advice, pages for sharing community program details and information regarding MEC's 22 physical stores. This content also needed to be understood and made more accessible and easily understood for users.
Research methods included interviews with activity experts and avid climbers, industry research and open and closed card sorts with avid climbers.
Information architecture
After identifying significant content improvements, we needed to address several business needs that the menu was not serving. The current structure did not allow for:
All our categories of activity.
Example: Snowsports was only shown seasonally
New business pursuits.
MEC needed to add several new areas of business for 2019.
Findability & best practices.
Increased specificity was required to increase findability of our blog and other content.
So, after documenting our current sitemap, I worked across business owners within several teams at MEC to develop a new one which allowed for more content and clarity.
Sketching navigation solutions
Iteration & UI design
After sketching, the UI designer and I wireframed several options for user interactions with the shopping content in our menu.
We explored options for easier access to the search bar, and where account functions should live and how they should perform.
Prototype & User testing
After creating a clickable prototype, we tested the mobile experience with users.
We tested the mobile prototype with 6 users, asking them to perform the simple task of finding a women's jacket. The new experience featured a customer journey simplified at the initial entry level and expanding customer options where more helpful with the category level.
Users responded positively to the greatly simplified interface, new iconography and our testing validated that overall the changes had a positive impact on the navigation function and experience.
1. Initial menu state
Starts with the new feature inviting customers to sign in and a simplified start to the shopping experience, showing just the categories.
2. Authenticated state
After login, users are greeted and welcomed into a personalized experience. Topographic lines add visual appeal.
3. Category navigation
A strong visual hierarchy allows customers to browse in sub-categories at this level and clear icons show next actions.
4. Subcategory & Product listings
This expanded state allows customers to continue to browse subcategories, while a specific product selection is open, this lets users compare and explore.
Desktop version & release
The desktop version mirrors the current experience, with a fresh UI update and new typographic direction for the brand. These visual changes were decided through an extensive approval process through our creative team.
Working in an agile environment, we plan to release two versions of the menu sequentially: phase one that mirrors the former experience and allows users to aclimatize to new the new UI and improved typography. Phase two will be a comprehensive overhaul, showing the new user journey through Shop and with all the content and category improvements. The release in phases will also allow our merchandisers time to implement while still improving the user experience incrementally as rapidly as possible.
Measuring success
Looking forward, we'll be tracking the success of these extensive navigation changes by monitoring:
Click through rate: to the product listing page and product pages
Bounce rate: on the product listing pages
Conversion: should rise overall on the entire site
Other features
I've outlined the UX research process here for the shoppable menu content, but the project also included other content and functions which are associated with the navigation. My work on this project also included: My account: login, most used account functions and interactions; the 'Inspire' menu: dividing this content into user-focused groups and renaming the content; The new MEC style guide: we defined the new visual style and function for the entire site
Project timeline & implementation
Initiated in July 2018, this was a high-priority project spanning through October including code releases. This rapid timeline was achieved through incredible focus and support from our entire team, and was not without bumps in the road.
Overall, establishing strategic buy-in early from directors and team leadership was essential to progress. More blockers and challenges were found in the process of sharing and implementing UX best practices to an organization still very young in its user experience journey. Building strong relationships across teams was key to final implementation success.