Redesigning MOO's web platform navigation

Overview

From past research on how customers name MOO products and how much they understand MOO's value proposition, several problems surfaced regarding the product's navigation & Information Architecture. That initiated the Navigation project that would be prioritized and implemented in 2018.

Some of the findings were that, the current navigation did not align with customers' mental models for making decisions about a product. Also, scanning to find an item they are looking for was hard and took more time compared to competitor websites.

Role

UI/UX, RESEARCH, UX STRATEGY

Companies
Period

June 2018 - Aug 2018

Launched

Sept - 2018

My Role

As the Digital Product Designer of the Browse Crew who looks after the part of the customer journey from the Homepage up until the product details pages, I led the UX strategy, the UX Research and the UI deliverables and the Interaction for the Navigation project.

In addition, throughout the project I worked alongside my crew's Product Manager, a Senior UX Researcher, the crew's Tech lead, the Merchandise team Manager, the Product Marketing Director, an SEO specialist and a Senior Analyst.

The full launch has been released globally in September 2018.

https://www.moo.com

The Challenge

  1. 1 - Scalability
    Old navigation did not have space for any more products which made it hard to merchandise and introduce new ones.
  2. 2 - User Experience
    Old navigation did not align with customers’ mental models, was hard to scan and interact with the menu
  3. 3 - Proposition
    Search engines and customers didn't not understand MOO's product range as products/categories were mixed together.

Challenge #1 - Scalabitlity

The first and biggest challenge was to scale the navigation in such a way that it has room for the new products that were coming up in 2019 and 2020. Because everything was under the category "All Products", Merchandising and Marketing teams were struggling to find a way to add more products in that list without making it grow longer and extending beyond the fold.

Challenge #2 - User Experience

The second challenge was to align the navigation with customers' metal models and make it easier to scan and interact with. From past research, we knew that customers think of format/category of a product first, then the size they want and then the paper and special finishes. Whereas we led by paper first and we left customers figure out the rest by themselves.

Another thing that made the navigation difficult to use was the interaction of the menu. The menu was using the double hover pattern - menu items nested horizontally in another menu -which made it also hard to scan and interact with the list items and ultimately unpredictable.

Challenge #3 - Proposition

The final challenge was to help search engines and customers understand MOO’s product range. That’s because products and categories were mixed together under one mega-category labeled as “All Products” which was not descriptive or helpful for search engines nor customers.

Building the right thing

Pre-mortem: looking ahead at risks

For this project we established a working group of people who would take on the challenge of re-designing MOO's navigation. With this group I facilitated a pre-mortem session where we looked ahead at the challenges and risks that could cause the project to fail and create a plan to navigate around them.

We identified 4 major risks:

  1. Changes in the navigation cause AOV to drop
  2. SEO ranking continues to drop
  3. The impact is subtle and we wasted resources
  4. Knee jerk reactions from stakeholders

For each risk we came up with ideas on how can we mitigate it and we dot voted the ones that we believed could be most effective. Each solution and risk was assigned an owner. I was assigned the knee jerk reactions from stakeholders and to mitigate that I created a fortnightly status update and a slack channel to act as a discussion forum for the group.

Lean strategy: setting up the milestones

Having a deadline of 2 months, we wanted to come up with a strategy plan with activities and milestones that needed to be done in order to tackle the opportunities we had identified. Our goal was to have a shippable increments approach and run A/B test experiments and learn from them.

As a result, we came up with 3 streams of work:

  1. Research to understand how customers group products and name these categories so that we increase the understanding of MOO's offering and product range for customers and search engines.
  2. Design of the new navigation menu so that we can make it easier to scan, interact with it and make it scalable for more products
  3. Work with Merchandising and Marketing teams so that we can make our navigation menu merchandisable to drive more revenue and increase conversion

Understanding how customers think

For this activity I paired with the Senior UX Research. We split our customers between internal (Marketing team) and external (people who buy from MOO) and we ran physical but also digital card sorting sessions using Optimal Workshop and Usertesting.com as tools.

We included current MOO products  but also some new that were going to be launched in 2019 and 2020 so can design a future proof navigation that will stand the test of time.

Focusing on internal customers

For the internal customers we ran an Open Card Sorting session with 6 members from Marketing and Merchandise teams. That would enable us to get an understanding of how the business sees the navigation and how that reflects to external customers.

The categories that surfaced from that session were:

  1. Business Cards - A feature product that MOO is well known for
  2. Marketing Materials - A mega category of products that are customizable and have a promotional appeal like Flyers and Postcards
  3. Stationery - A mega category of products that are customisable and can sit on your desk like Stickers, and Letterheads
  4. Accessories - Products that are not customizable like Notebooks and Envelopes
  5. Branded Merchandise - Products that have a marketing feel and are used for giveaway like Mugs, Tote bags, Gift Cards and Stickers

We observed that some products, like Stickers were placed in more than one categories. That phenomenon is very common as customers have different mental models and they think of products in more than one way.

Focusing on external customers

For the external customers we ran an Open Card Sorting session with 90 users, split by the 3 main customer segments across US and UK. That would enable us to dig deeper in how MOO customers think about the categories with no constrains and see if there is correlation with the findings from the internal card sorting.

What we observed was that in general users think of 3 main categories first before splitting them out more in different ones:

  1. Business Cards - a product that MOO is well known for
  2. Printed Products - A mega category of products that are customisable
  3. Accessories - Products that are not customisable like Envelopes and Business card holders

Then most customers would split the products in unique categories that only appeared once or twice. For that reason, we ran a Hybrid Card Sorting session with the same number of people as we did for Open Card Sort with fixed categories with the option to add new or rename the default ones.

For the fixed categories we cross referenced the ones that appeared more than 2 times in the Open Sort session with the categories that internal customers created. This way we wanted to gauge whether the fixed categories aligned with customer mental models.

We observed that the fixed categories made a lot of sense to the participants. By following up with questions and using Optimal Workshop's tools like the Similarity Matrix we identified that the participants mental models were aligned with those categories.

Leveraging SEO and Analytics Data to inform the navigation

Another angle that I wanted to tackle the problem,  was to assess the current engagement with the navigation links and also look at the search terms MOO customers are searching for in search engines. I gathered data from both the US and the UK websites so that we can make a more informed decision based on the audience.

First navigation A/B test: making a trade-off

Setting up the test

While thinking of how to run the first A/B test, we faced a very big challenge. In order to test the extended categories we identified from research we had to make changes to the Information Architecture (IA) of the website.

But this would require work from other teams to build more pages and restructure the existing ones and it would a be a big band approach instead of an incremental one. So we made a trade-off. Keep the IA the same and test having Business Cards, Printed Products and Accessories as main categories.

For this test we didn't do any design work at all. We grouped the products in those 3 categories and kept the IA intact. We wanted to see whether this test would move the needle up a notch.

Running the first A/B test

We launched the new navigation categories in the US market, which is our biggest market, so that we can get the results faster. The test was set up to run for 3 weeks until it reached it's statistical significance.

Measuring the impact

Going forward in time, the experiment was a success. Our success metrics - Conversion to Build (CtB) was increased by 1.6% and Average Order Value (AOV) was increased by 0.8%. That translated to roughly £800K  in revenue if we kept the new navigation for one year! 🙌

After the test ended, we rolled it out in the UK and then to all other locales. Our next goal was to run a second  A/B test experiment with a re-designed menu and splitting Printed Products in more categories against the new navigation that we just released.

Build the thing right

Working in parallel with the first A/B test

While the first A/B test was running for 3 weeks I was focusing on the other 2 streams of work. At this point we knew from our research the new categories and which products fall under them . Now it was time to design a new menu that would tackle the other challenges we identified:

  1. A menu that makes space for new products
  2. A menu with no tricky interactions like the double hover effect
  3. A menu that helps merchandise the navigation to increase conversion

Getting organised: The power of the design doc

As this was a big project and had multiple moving parts, I wanted to have one place where all the research is captured, along with all the design decisions and also can be shared with my PM and my team. That's why I created a Design Doc using Notion to help me reference back and keep track of the design iterations, research and decisions from meetings.

Merchandising the navigation: understanding the business needs

In e-commerce it's very common to offer more content to customers based on the category they are browsing from the menu. One of the goals of the new menu was to enable the Marketing and Merchandise teams to expose and showcase content through the navigation.

I paired with the Merchandise team Manager and the Product Marketing director to identify the opportunities that the new menu can utilize. What they described to me was a way to have a place in the new menu where they could cross-sell products and a way to promote new or featured content when a customers browses a specific category.

Thinking in systems: a modular Navigation

Understanding the current system

Before I even sketched anything on paper, I had to understand how the current navigation worked. MOO uses Magnolia CMS which operates with reusable modules that teams can use to create and edit pages.

Magnolia uses a tree view hierarchy for list items. That means a main category can be semantically labeled as a level 1 item(e.g Printed Products) which in turn has level 2 children (e.g Postcards) and level 2 items have in turn, level 3 children (e.g Luxe Postcards). The new navigation should adhere to this principle.

A new modular system

First I wanted to define the layout of the menu so that it accommodates for the main area where items like Postcards and Flyers would live as well as the area that would enable the Merchandise and Marketing teams to showcase and cross-sell specific content.

First I wanted to define the layout of the menu so that it accommodates for the main area where items like Postcards and Flyers would live as well as the area that would enable the Merchandise and Marketing teams to showcase and cross-sell specific content.

Next was thinking about the system. Just like an engineer would think of a system when writing code in an Object Oriented Language I stated thinking about:

  1. The core objects (core elements of the system)
  2. Their relationship with other objects (nested objects)
  3. Their class attributes

For the new navigation menu the core element was the Main Category Item (level 1 parent item) - it contains a group of Products (level 2 headings) that have a similar purpose. Each Product has available sizes (level 3 links)

Going deeper into the system I started thinking about the attributes and the content that an object needs to have . To sense check my thinking, I paired with one front-end and one back-end engineer from my team. We looked at the current navigation and we identified the attributes for the new navigation system.

Designing the new menu: Optimising for user experience

The new menu should have a way to showcase MOO products in a flat structure, making it easier for customers to scan and interact with as well as having enough space for new products. For that reason, what is commonly known as a mega menu was the best candidate from a design perspective.

Having the layout and the system in place, I was able to start exploring solutions and have weekly feedback sessions with the squad and Design team.

Design explorations: Iterating towards the end result

At the beginning I wasn't thinking of a pixel perfect design, but rather shaping the first draft that would act as a conversation starter with the team and identify edge cases and questions through feedback loops.

I did multiple iterations from how size links could be shown in an effective way to changing the the menu from constrained to full-width to provide more focus on the task at hand for users. For every iteration I got feedback from my squad and the Design Team in weekly critiques.

Mobile: Optimising the new menu for small screens

The challenge with smaller screens and especially mobile was that, our mobile traffic was roughly 20% in total and also if I followed the hierarchy from desktop I would lead the customers to a dead end. The reason was that after selecting a size customers can't move forward and customise it as the online creation tool is not optimised for mobile.

For that reason I decided to make a trade-off. Instead of following the web version tailor it for mobile and view the results after launching the A/B test. So I started exploring ideas for the smaller screens.

From my explorations, the idea that worked better was to use different pages in the menu, so that customers can drill down from a main category to the products that fit under it. With the help of a back button they can go to the previous page and explore more categories from there.

Establishing new patterns and final touches

Having crafted the designs I wanted to create a set of reusable components that would be added in MOO's Design System and would be consumed by other squads such as the MOO for Business.

To finalize the work, I used Principle to create some high-fidelity interactions in order to be able to communicate to the team and to the engineers how I envision the states of the elements in the navigation menu.

Also, hovering on a category, will make the other ones fade into a lighter tone. The reason is that I wanted to use the motion principle of Staging to give the  spotlight to the category that a customer focuses on.

Finalizing the feedback

After the visual and motion design for the menu was done, we regrouped again both as a team plus the working group of the project, to discuss any further details and potential blockers in order to get ready to roll out our second A/B test against the version we launched the previous month.

Second navigation A/B test: making an impact

We launched the new navigation menu in the US market, which is our biggest market, so that we can get the results faster and tested it against the test we rolled out the previous month. The test was set up to run for 3 weeks until it reached it's statistical significance.

Measuring the impact

From the first 3 days that we launched, we saw a big spike of positive results! After 3 weeks, we were excited to say that the second experiment was an even bigger success compared with the previous one. Conversion to build (CtB) was increased by 2.7% and Average Order Value (AOV) was increased by 1.85%. That increase translated to  £2.2 million in revenue if we keep the new navigation for a year! 🎉🎉🎉

Next steps

The test stoped mid September. As a next step is to switch to the new menu for the US and rolled it out in the UK and then to all other locales. We still have a lot of ideas and assumptions that we want to test and experiment with. As a group we agreed to keep iterating on the navigation and apply a fake door testing approach to validate some of our hypotheses.