Redesign of Toolstop’s Menu

11 min readDec 20, 2020

Overview

Toolstop is an enterprise commercial business that supplies tradespeople and the general public with tools from the best brands with competitive prices and fast-delivery. It is the businesses B2C facing platform.

The task was to redesign Toolstop’s menu. Why was the project kickstarted?

First - It lacked any for of usability best practice and was never designed with a human centred approach. Our customers needs were not considered in the implementation of the menu until I was employed. The menu design was provided by an external company, so they had no insight as to what the customers needs where.

Secondly - as the menu was developed externally, the in-house developers did not have a great understanding of how it functioned. Following this it was largely made from CSS, which provided some problems. Our optimisation software VWO cannot record data from CSS hover properties, so we could not collect screen-recordings from user sessions. If the menu was developed in-house by our developers this would allow the company complete control over an extremely key component of the website.

Thirdly - the biggest reason comes from a stability issue. The night before Black Friday Toolstop’s menu file corrupted, this was an external issue belonging to the providers of the menu. Our whole menu and site was rendered useless the night of the largest peak trading day. Luckily, our developers copied another file from a sandbox site, If they did not, the company would have lost a large amount of money.

I personally raised the first two issues to stakeholders but there was more pressing business needs. When the menu file corrupted the stakeholders pushed for the project to go ahead.

Problem statement

There were many issues to address in regards to the redesign of the menu. These issues fell under two categories: Usability and Conversion/SEO.

Usability

After a study of the menu I raised these concerns as usability issues;

The menu was alphabetically sorted but by row and not column. This goes against usabilities best practices as the menu’s columns should be read alphabetically left to right. This increased the amount of time for a user to find an item, IF they realised that the category was sorted alphabetically by rows. Though user feedback I knew that there was a chance that the user would not even understand this.
The menu had 3 layers to navigate down to to find the right category, Ontop of this there was duplicate top level categories with only a varient of Cordless and Corded. And there was no hierarchy to the Hand Tools dropdown. Each category sat on the same level as each other, providing an issue with navigation for a user. There had to be categorisation on all sub categories to allow a user to find the item they are looking for.
Brands, Equipment and Hand Tools did not follow the same design pattern as Power Tools and Accessories. There was 3 different variations of design in the menu. This goes against the design consistency best practice, the user has to learn how to navigate 3 different menu options rather than just one.

Hand Tools has over 60 categories showing at once. After researching best practice states a maximum between 6–7 sub-categories should be displayed at once. Anything more and a user will start to get lost. Currently there was 10 times the maximum. This was a major usability concern.

Conversion/SEO

Having categories with almost identical names doubles the amount of work in regards to keyword rankings (Corded Angle Grinders/ Corless Angle Grinders)

Using Google Analytics we noticed our menu was providing an average of £4000 less in sales per day. This provided scope to there being an usability issue in our menu. As less people were successfully finding their searched items.

Users and audience

Toolstop’s user group predominantly consisted of 80% 18–60 year old males and 20% females with the age range 18–60 who specialise in the manufacturing and construction trade, merchants who provided tools to locals aswell as DIY shoppers. This provided a wide range in regards to users. I decided it would be best to design with a generic understanding of best practices when it came to menu design. A few considerations were larger text and higher contrasting font/background for the visually impared, condensed categories for users who struggle with large volume of text, allowing them to find the categories easily.

Roles and responsibilities

We had limited resources to allocate to large-scale projects such as this one. The project consisted of 4 members. Myself as the sole UI/UX Designer. The marketing manager, one developer and our project lead. We split the timeline up to allow for iterations. Myself and marketing worked from the start to create the menu which included efficient and effective content. The project lead had some insight but only from a distance. The developer was consulted when we had to understand or revise our scope in what could be achievable for functionality.

As the sole UI/UX designer in the company and on this project, it was my responsibility to:

gather user research to identify areas that require improvement and establish user needs
develop high and low fidelity wireframes to generate ideas aswell as the bounderies of what could be achieved by developers.
communicate with project lead to identify business priorities
collaborate with marketing manager to provide the best user experience. We had to consider each header category and what sub-category followed.

Scope and constraints (Design and SEO)

Menu Redesign & Information Architecture Upgrade

Goals:

to Simplify menu and detach stakeholders concept of the menu representing the complete category structure
Reduce menu items where possible
Highlight most popular categories
Remove duplication issues, e.g. cordless vs corded at such a high level in the structure
Improve search engine visibility
Improved usability, e.g. see all screwdrivers as well as being able to drill down into insulated screwdrivers
Eliminate ‘Equipment’ category

Key Performance Idicators

Improved click-through from menu. We’re not tracking menu clicks just now, so we need to either look at setting this up or relying on viewing VWO recordings.
Improved SEO to level 2 category pages — aim to get more organic traffic to power-tools/angle-grinders than is current visiting power-tools/corded-power-tools/angle-grinders + power-tools/cordless-power-tools/cordless-angle-grinders

Risks

Current high-click menu items — indeed to keep these visible
Damage to existing rankings — review these, move and redirect

Process and what you did

Research of Best Practices

Limit the number of menu items to 7
Fewer items in your navigation are good for searching engines
Grouping items into chunks of five makes your navigation much easier for visitors to read and scan. Short term memory holds only 7 items plus or minus 2. This is from the famous psychological paper published by George Miller in 1956
Avoid long lists
The more items in your navigation the more difficult the information is to remember and process for your visitors
Avoid a drop-down with more than two levels. This is a mistake in terms of usability. User will lose focus of the menu whenever the mouse pointer moves away from it
Hover is better than Click menu
Delay the deactivation of a hover
Add a hover effect to menu options
Clean Typography
Readable List
Add border above and below list items
If you don’t put enough spacing between list items the menu can look cluttered and will become difficult to use
Hover effect on list items
Having dropdown wide so it is easy to keep the mouse in focus

User Research

We had issues gathering quantative and qualatitive data from the get go. Our menu was largely made from CSS. This meant that we could not record screen-recordings of our users sessions, as a result of this we could not get a great understanding of browsing behaviour. Once our project goes live we can then conduct user-testing to iterate the design and consistently improve upon it.

I moved on to consider how other tool providers designed their menus, ones that catered to the same target audiance as Toolstop.

Toolstop Competitors B&Q (*left*). ITS (right)

Screwfix. One of the only tool providers who catered to their users. I found our designs should align more with theirs

Some tool traders menus felt very conveluted and hard to navigate

After researching into how other business in the trade retailing industry posed there menus. I realised that there was a large proportion of these business who did not provide or cater for their users. I took key elements from B&Q and Screwfix’s menus in regards to best practices and started sketching.

Wireframe Sketches

I started by creating a wireframe template that I could quickly sketch onto to get a similar resembalence to toolstop’s site:

I conducted a 12 minute 12 sketches to kickstart my design process. I wanted visually get my ideas out on the page, it allowed space to the good and bad ideas. Once they were in front of me I understood what ideas would be heading in the right direction and what would not.

Considering our userbase I did not want to do anything that would be considered experimental or progressive. I needed to provide a simplified design that allowed for categories to be found and explored.

From here I took notes and picked what ones I felt were worth developing. I started by developing the ‘Power Tools’ category. As this was the first and most popular category I wanted to conisder the design structure to this header category. It was the businesses highest profit submenu, I discovered at this stage that it made sense to provide shortened headers for a user to understand what kind of tool will be provided in the category.

I moved onto ‘Hand Tools’ when I had an idea on how to start developing ‘Power Tools’. Firstly I wanted to sort ‘Hand Tools’ categories alphabetically in columns. This allowed me to understand what categories existed and where they could belong in relation to others.

Iteration process

Once I drew out some of my ideas I moved onto my high-fidelity wireframes. I wanted to visualise how hand tools and power tools would look with a design that resembled the website.

Hand tools sub-categories sorganised alphabetically in columns

Afer displaying the ‘Hand Tools’ categories in order by Column i recognised I was stepping in the right direction but there was still far too much information on the menu. It had to be condensed to provided a superior user experience than it current provided.

I attempted to organise the categories alphabetically and highlight each alphabetical group by having containers around each letter group. This still provided far too much information and did not improve the ability of a user to find the category they were looking for. One step i took was to at this point decide the font size and spacing of each category belonging to the menu. There had to be enough spacing around each one, this reduced the chance a user would accidently choose the wrong category

I worked with Marketing to come up with categories that suited the sub-categories. This allowed a user to know what group they are in and if it related to the tool they needed. (Woodworking/Metalworking/Plumbing Tools etc)

We decided it would be best to condense the names as much as we could to reduce the amount of information we needed to present aswell as free space in the menu. Stakeholders wanted to provide a larger list of categories for our best sellers. We stored these categories under ‘Essentials’ as they were tools that ever tradesperson would use on a job.

Once we completed ‘Hand Tools’ the other designs followed suit

After we condensed all these categories I moved onto Brands. I gathered the top 50 selling brands, sorted them alphabetically and placed them with the same consideration as the rest of the site. I created 3 rows of 7 and provided a link to the brands page. I also provided thumbnail logos of the top 4 sellers of toolstop to allow the user see a top selling brand and click it to go to that brands page.

Once we had an idea of how our header categories were designed I decided to move away from the conventional tab design. After we did more research we realised that having a hover menu would not work with our testing needs. We needed a menu that was clickable. So my designs changed to suit this. This provided my final designs.

Final Designs

Link to the prototype

https://xd.adobe.com/view/44910c11-7695-41dd-bd24-9e9b17163b83-11c2/?fullscreen

Outcomes and Lessons

Afer developing the menu the project has been put on hold for christmas. We will conduct some user-testing when the prototype is developed in our sandbox site. Which is something im really looking forward to.

The new menu has been recieved well amongst internal users and stakeholders. Becuase this is an on-going project, I imagine there will be more iteration to come, as their always should be with design. A key technique I found that helped during this project was creating templates for my wireframing early on. It allowed me to quickly sketch an idea which helped my decision making process. One other technique was the 12 minute 12 sketches. I enjoyed allowing myself to give time to ideas I knew that might not progress but I could then visually make that call.

Thanks for reading

Declan