Aqua Cure are Europe’s largest manufacturer of in-line filters. They are the master distributor for many other major filter manufacturers. Their aim is to be a one-stop-shop for water treatment supplies by removing the challenges involved with dealing with multiple suppliers. They have a team of trained experts who are able to help guide people through the buying process.

Aqua Cure wanted their website to sell their full range of products to encourage customers to order online. With a responsive design, they wanted a user-friendly buying experience across all devices and screen sizes.

Their back office system stores all the product information and stock levels. Some customers have unique pricing that needed to be reflected on the website once logged in.

Magento is our eCommerce platform of choice. It’s a fully fledged content management system with the ability for us to extend and add bespoke functionality. We created a two way data integration that continuously updates products, stock and pricing. At the checkout, prices and stock levels are rechecked to make sure the order is up-to-date.

The website had to be easy to use on all devices. Over several meetings with the Aqua Cure team, we discussed the content architecture and hierarchy. From these discussions we formed detailed wireframes for mobile, tablet and desktop screen sizes. These wireframes were first sketched, then detailed versions created in a design application.

wireframe

We also created a working prototype of the website. This allowed us to test the tiered pricing and data integration with their back office system. We liaised with their team to make sure we were able to retrieve all the correct information using their API.

Once we had completed the prototype and wireframes, we worked with their design team to create the look and feel.

During the past year we’ve been developing a lightweight front end pattern library for our websites. This system allows us to break designs down into smaller, reusable components. These smaller components are then assembled to form pages. For example, a product listing page would contain a header, navigation, footer, product items, filters and a pagination. This process is called modular web design. By reusing smaller components of designs we’re able to keep a consistent feel throughout. All of these smaller components are collated into a library of components called a pattern library. As the website develops and changes over time we can use this library of components. For example, a new landing page can use existing components rather than designing new ones – saving time and ensuring the website remains tidy throughout it’s lifespan.

Magento has a built-in search but unfortunately it isn’t very good. It generally returns disappointing results. We have created our own search extension that is based upon Elasticsearch. Adding Elasticsearch improves search results by using autocomplete, spelling correction and alternative spelling (such as color and colour).

Working on over 100 Magento eCommerce websites, we have gained invaluable insight into user behaviour. This helps us to continuously improve the checkout process of each eCommerce website we build. The checkout includes an address lookup so customers can quickly find their information with minimal typing – especially useful on smaller screen devices such as smartphones. There are also multiple shipping options available.

You can visit Aqua Cure on your desktop, tablet and mobile.