Redesigning MOO's e-commerce web platform navigation

OVERVIEW

Navigation acts as a signpost to help people find information and navigate between pages. In 2017, a research project was carried out to get a better understanding of how customers name products and how much they understand MOO's value proposition. From the analysis, several problems were identified with the way MOO's navigation & IA worked which 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

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 Challenges

1 - Scalability
Old navigation did not have space for any more products which made it hard to merchandise and introduce new ones.

2 - User Experience
Old navigation did not align with customers’ mental models, was hard to scan and interact with the menu

3 - Proposition
Search engines and customers didn't not understand MOO's product range as products/categories were mixed together.

Challenge #1 - Scalability

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. That's because MOO's products were hidden under the category "All Products" were customers would get lost, loose track of some of the list items and ultimately, Merchandising and Marketing teams struggling to find a way to add more products in that list without making it grow longer and extending below 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. What we knew from past research was that customers think of format/category of a product first, then the size they want and then about 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. We had observed over and over again that customers struggled with what is being called a double hover interaction menu, menu items nested horizontally in another menu which made it also hard to scan and interact with the list items.

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 the them.

We identified 4 major risks:

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. One example was that we can mitigate knee jerk reactions from stakeholders if we had a fortnightly status update and a slack channel to act as a discussion forum regarding the project.

Lean strategy: setting up the milestones

With the working group, we had one and half hour session in which we wanted to come up with a 2 month strategy plan with activities and milestones that needed to be done in order to tackle the opportunities we had identified and have a final prototype to run an A/B test experiment and learn from it.

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

We wanted to approach this project with a shippable increments mentality that would bring incremented value to the customers and the business rather than a big bang release. As the first stream of work was the most essential for the entire project, we agreed that we could run an A/B test and measure the outcome.

Our strategy was that, we can launch a first A/B test and while it's running, we could be working on the other 2 streams in parallel and run a final A/B test against the first one.

Understanding how our customers think

When you want to uncover how people group things, card sorting and tree testing are your best friends. For this activity I paired with a Senior UX Research in order to design the research plans and divide and conquer the work. We split the work between internal (Marketing team) and external (people who buy from MOO) customers and we ran physical but also digital card sorting sessions using Optimal Workshop and Usertesting.com as tools.

All our sessions included the current products that MOO offers but also some new products 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 where users have a bucket of items (e.g MOO products) and can create and name categories as they see fit. 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:

One very interesting thing that happened was 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.

In general users think of 3 main categories:

Then users would split Printed Products in many different categories. In some cases those were aligned with what Marketing and Merchandise teams came up with e.g Marketing Materials, Business Cards and Accessories but most of the time customers created 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. The difference here is that users have a bucket of items (e.g MOO products) but put items in fixed categories with the option to add new categories 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.

The results that we got back were very positive. The fixed categories made a lot of sense to customers and aligned with their mental models on how those products should be grouped. We were able to validate that in two ways:

First, by qual insights. We prompted users to talk about those categories and how they compare with other vendors they've used in the past.

Secondly, we used the tools available in Optimal Workshop such as the Standardisation Grid and the Similarity Matrix. We were able to see the percentage of participants who agree with each card pairing and the number of times a pair of cards were grouped together.

Leveraging SEO and Analytics Data to inform the navigation

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

What we uncovered was that a lot of the links in the navigation were either used from a very small percentage of customers or not at all. That meant that we were exposing information that wasn't relevant to a lot of our customers. Also, the SEO data we collected from the keyword search terms helped us to cross reference the work we did with the Card Sorting sessions and refine the categories where it was needed.

At this point we had information about the categories and their content from internal stakeholders, external stakeholders and SEO search terms which enabled us to have a clear picture of the navigation links the US and the UK websites should have and run our first A/B test experiment.

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

Setting up the test

From our Open Card Sorting research with MOO customers, we observed that people think of 3 major categories first. Products that can be identified as Printed Products, products that are Accessories and Business Cards as their own category.

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. This would require work from other teams to build more pages and change the structure of existing ones. 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.

If the test turned out to be a success then we would keep this new version, if not we would revert to the old navigation and continue working in the other 2 streams of work in order to tackle the rest of the challenges that we identified like scaling the menu to fit more products and make easier to interact with.

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:

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.

It turned out to be a very useful tool for my PM as well as she would use the design doc to go through the updates with the stakeholders and write up the notes from meetings directly in the doc. It also helped engineers understand my process and follow along  throughout the progress of the project.

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 utilise. What they described to me was a way to have a place in the new menu where they could cross-sell products e.g Business Card holders in the Business Card category. Also, a way to promote new or featured content when a customers browses a specific category e.g New A6 Flyers in Marketing Materials

Thinking in systems: a modular Navigation

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. The old navigation menu was built in the CMS and for that reason the new menu had to be the same.

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

I approached the new menu having in mind the big picture and how it works first and then I started thinking about specific interactions and visual design. That helped me establish a framework early, have everyone in the team on the same page, and focus my design efforts on the most important areas.

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.

The idea was that every time the Merchandise team wants to add an item they can do so in the CMS by selecting  which column it will be placed. For example if the team wants to cross-sell an item they would place it in the merchandisable column. I paired with a back end engineer to make sure that this functionality is feasible so that I am not designing without having in mind the constrains of the CMS.

Next was thinking about the system. A system is described as an interconnected set of objects that is coherently organised in a way that achieves something.

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

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 objects and their attributes. The content that an object needs to have is defined by it's attributes. 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.

Having designed the system, I used it as a guide to create high level reusable components that would help me articulate my thoughts better in my visual design explorations in the later stage.

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 that will be released in Q1 of 2019. 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, with the help of the engineers figured out early, as well as the high-level components, made the visual design process a lot easier as I was able to start exploring solutions and have weekly feedback sessions with the 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.

Even from the first feedback session a lot of questions emerged from the team. One question was around the level 3 links ( Product sizes). Displaying all sizes might work for the current version but in the future where more products will be added, menu height is going to be an issue. Also, every level 2 heading is a link that leads to a product page. Some products however, have only one size and by having "View X product" plus the link on top of them would lead to confusion as it's duplicate content.

That's where I was faced with a challenge. Should the level 2 headings be always a link? Or they can can be either a label or a link. And if that's the case would the chevrons act as an affordance that one is clickable and the other is not? From a quick desk research, a lot of e-commerce websites get it wrong as they have one style for both occasions making hard for customers to guess which one is a link and which one is not. After some discussions with the team, we agreed to have every level 2 heading as a link. That would remove the duplicate content below it and the chevrons can be used in in a subtle way, maybe by applying motion on hover to give an extra affordance of interactivity.

From my desk research, I observed that often times the mega menu is displayed in full width which enables customers to focus on the task, which is to scan and find the product they are looking for. That's where started exploring ways I can enhance the focus of the menu. Going full width was one option, but I figured I could create a sense of focus with the top categories as well.

Mobile: Optimising the new menu for small screens

Working on the desktop version of the new menu was one thing. Throughout my explorations I was considering the mobile menu in every step. The old menu was using accordions to display the second level items under the main categories (e.g Under "All products" an accordion showed Postcards, Flyers etc) and didn't go any deeper to papers or sizes.

The challenge here was that, from our research we knew that customers think of the the category first, then the product they are looking for and then the size. As a result the mobile view of the menu  should accommodate for the product sizes as well.

On the mobile site however, customers can't customise their products and when they are about to they are welcomed with a handover screen where they can pick up their selections from their desktop devices as the online creation tool is not optimised for small screens. And that's why the old menu wasn't showing any level 3 items.

For that reason we decided to make a trade-off. We agreed that instead of introducing too many new parameters for the new A/B test, or even go with a fake door testing approach, to keep the logic the same and lay the foundation for the next iteration of the mobile navigation menu.

From my exploration, the idea that seemed to work for laying the foundation of a future iteration  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.

Final touches: Using motion as a delighter

Using Principle I was able 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. For the hover state of the Products I kept the chevron as an extra affordance.

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.

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.