MEC Replatforming & Redesign

A rebrand and new ecommerce platform provides the opportunity to redesign mec.ca

Role: Sr. Manager, Product & UX

The Problem

Mountain Equipment Company (MEC) is no longer a co-op after being sold, and is under new executive leadership. The brand is suffering - customer trust has been lost.

Simultaneously, the ecommerce platform and tech stack powering MEC’s website is out of date, and inflexible. This prevented the team from making impactful changes to site experience, or responding to data / customer feedback in the moment.

The new leadership decides to rebrand and invest in a new ecommerce platform, Big Commerce, in an effort to give MEC a fresh start, regain customer trust, and move the business toward profitability.

The Challenge

Redesign and relaunch the MEC website within a 6-month timeline, transitioning to a new ecommerce platform, while also revitalizing MEC’s brand identity online to re-engage and restore trust with our customers.

 
 


Goals

  1. Rebuild Customer Trust

  2. Improve site usability and experience

  3. Speed up our software dev cycle through a modernized tech stack

  4. Refresh the brand

Approach

1. Scope of work

The new ecommerce platform came with improvements in functionality but also limitations. We first took time to understand the technical limitations of Big Commerce.

With the aggressive timeline, we decided to focus on making major improvements to the most crucial parts of the experience:

  • checkout

  • cart

  • account

  • search and product listing pages

  • transactional emails

The remainder of the site would be re-designed under the new brand guidelines with minimal changes to UX and functionality for MVP launch.

 

2. Digital Brand Guidelines

The new branding provided us with the primary color and logos, but we needed to work together with the Marketing Creative team to decide how it would come to life online.

We discussed how the logo and new green should and shouldn’t be used, and we agreed on new fonts to complement our custom display font “Mountain Sans”.

It was also important to state the spaces in which each of our teams could play freely. For example, on the web we defined a slightly more strict color palette to keep our hierarchy clean, and the focus on our products. Whereas the marketing team took more creative license throughout their campaigns.

The final output of this activity included:

  • Colour palette with intended use

  • Logo do’s and don’ts

  • Typography guidelines

 

3. Workflow Analysis

The MEC website doesn’t just serve customers, but it also supports store staff, customer service reps, and many other internal staffers across the business.

With many changes coming to the site, we needed to understand existing workflows that would be impacted. We interviewed key stakeholders to create staff workflows

The output of this activity was a prioritized list of workflows and what action would be taken to support them such as:

  • Scan in-store product to search on mec.ca

  • Search for product by SKU number

  • Link duplicate membership accounts

  • Reset member password

  • Input size chart information

 

4. User Flows & Designs

We documented all existing user flows to ensure no experiences were missed in the replatforming process. For each major flow, an audit was conducted using customer feedback and analytics to help determine any areas of improvement.

We made low-risk global design changes to bring more whitespace and lightness to the feel of the site, and to accommodate the timeline. Such as restructuring our header to make way for the new logo, moving from a dark theme to a light theme, implementing the new typography and buttons.

The major design changes included:

  • a new single-page checkout and customer sign in

  • a cart flyout that would allow customers to look at their items without going to a new page

  • Search and product listing pages

  • All transactional emails were redesigned to align with the new branding and purchase flow

Results

  • 1-page checkout and checkout conversion rate improved by 25%

  • launched new search platform, leading to 2x conversion rate for those who searched (about a third of customers)

  • Add to cart rate increased by 30% due to improved merchandising and UI

  • Deployment process went from an entire day involving multiple developers to 20 minutes involving 1-2 devs.

Challenges

  1. A lot of disruptive changes came in the new ecommerce platform back office, which had little time for UX oversight. Key workflows were missed or implemented carelessly which created a lot of frustration.

    Size charts, for example, are updated by our product information team as new and updated products go online. Instead of being placed with the relevant products, all size chart data was uploaded into one section where staffers had to scroll through thousands to find the right one.
    Learning: Had we been better connected with the backend developers who were responsible for porting over existing data, we may have caught these missed workflows.

  2. On the old ecommerce platform, the MEC website required customers to create separate "membership" and "online account" credentials, which they then had to link either online or through customer service.

    During the redesign, we believed that combining the membership and login into a single account would simplify and improve the online experience.

    Learnings:     The concept of membership was deeply ingrained with our customers, and the change did not resonate as expected. Customers with in-store memberships but no online account struggled to log in or inadvertently created duplicate memberships. I still believe it was the right direction, but with more research we could have found the right balance in the experience and messaging.