Made to Measure Products

E-commerce Website

Experience Design | Front-end Development


First Mats is an online retailer of industrial and commercial floor matting. The company's primary sales channel is their responsive e-commerce website where they sell to both B2B and B2C customers.

How it began?

First Mats wanted to know how the customer journey of adding a made to measure product(s) to the basket could be improved. The Sales and Marketing Director was aware that the current product page functionality was a bit clunky but wanted to know what it was specifically that was stopping the user from adding the product to the basket.

Empathy Map & User Journey


I began the process by firstly establishing how easy it was to find made to measure products on the website and captured the various routes visits could take to get there. Since purchasing standard size mats didn't appear to pose much difficulty I wanted to identify how the two journeys differed. I worked with the Marketing Director to collect Google Analytics data in an attempt to answer some of the questions that the first step had thrown up. With all the information in hand, I plotted a combined user journey and empathy map to identify where negative emotions were being experienced and at what points the interface was becoming problematic for the user.


  • High Product Page Drop Offs
  • Low Sales Figures for Made to Measure Products
  • Product Quantity Limitations
  • Filtering
  • Multiple Clicks

The issue that caused the most frustration was filtering. Filtering was concealed behind a button, so the user must firstly seek out the functionality. Secondly, once the filters are found, selected and applied to the search, the results appear as expected but once the user selects one of the products for review and returns to the results page, all the filters are reset, so the user is forced into a continuous cycle of having to re-select their options.

Wire-frame - Concept for filtering on desktop

Importance Vs Feasibility Chart


Research identified a number of different things that could be adjusted in order to improve the made to measure journey but it also highlighted some great opportunities that had not been originally considered. To help focus efforts on the most pressing matters first, and align the project with the current goals of the business, I took the directors through an exercise that would help to define the scope for this piece of work and help them plan for potential future projects.


I restructured the layout for the collections page, with a primary focus on the concealed filtering options, selector functionality and overall design. Desktop and mobile designs were created in parallel so that new and existing functionality could be considered across devices.

Product Form

The design of the product form went through several amends due to platform and theme constraints raised by the developer but we were able to reach a compromise that the users would still benefit from and that the business was happy with. I created a prototype of the product page to demonstrate what the form should look like and how it should work for made to measure products.

Quote marks graphic

“We have measured a substantial increase in orders for our made
to measure products since implementing the changes, including several
multiple item orders which just wouldn’t have been possible before.”

First Mats - Marketing and Strategy Director

500% Increase

in sales for made to measure products

300% Increase

in transactions through mobile

4% Increase

in mobile traffic

First Mats is an online retailer of premium floor mats, servicing industrial, commercial and domestic clients. The retailer focuses on providing high-quality products that help to improve safety and cleanliness for their customers. Based in Birmingham since it began trading in 2017, First Mats is now recognised as one of the largest matting specialists in the UK.

For more information, visit