More selected projects

Your Portfolio is empty. You can start adding Items throught your Wordpress admin panel!

Product Design

Creating a better navigation experience for Canada's most trusted brand

My role
Principal UX Designer, Information Architect

Tiff Lau (UI Designer)
Brock Turner (Creative Director)
David Belanger (Creative Director)


Increase top-level menu capacity for Canada's top brand. Improve outdoor equipment product findability and conversion. Update styles and improve accessiblity.


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.


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.