The Brief

ToolSafe approached Twilo to help launch their online store selling tools and safety equipment. Twilo were involved from the beginning of this project, helping with the early stages of brand development and marketing approach. We were asked to help brainstorm names, design the logo and create a brand style.

Parallax Icon

The Challenge

The website architecture and layout required careful thought, as ToolSafe were dealing with a large product database, managed by live feeds from suppliers. We were required to design and build custom feed integrations, enabling the product database to be updated overnight. Alongside this, the focus of the website design was the categorisation of products and ease of navigation, with the aim of minimising the clicks required to find and reach products.

Parallax Icon

Importing Product Feeds

The importing system pulls a product from a feed, processes the data for this product and then inserts or updates this product in ToolSafe’s Database.

As we have multiple supplier feeds, each feed needed its own way of processing the data, to do this we simply created a schema that the data needed to be in to work with ToolSafe’s current database and used that to process the data coming from each suppliers feed. This means that we can add as many feeds as were required with the possibility to add more at a later date with no changes to the main code base.

Site Navigation

The main challenge in the design of an online shop with the amount of products and categories you see in a large tool database, is making sure there is a clear structure to the categories and navigation. The aim is to allow the user navigate through the vast amount of products find what they are looking for in a simple and clear manner.

We designed a custom ‘mega-menu’ which shows the top categories in a column, and hovering over these shows the large amount of sub-categories in the space to the right. Once the user has arrived at their category of interest they can use the product filtering to limit the amount of products they are seeing, and find what they are looking for.

Parallax Icon


Like what you see?

Contact Us