Avoir Fashion – A fashion comparison destination.

The birth of the Avoir / Illustrate relationship.

Whilst there’s a number of different ways to get hold of the all-important product data, Avoir’s big challenge was in finding a way to translate it into the best experience for their shoppers.

How do we take this vast amount of information that changes daily from multiple data sources, understand which products are the same, and then display them with a useful price comparison?

And so the Avoir team began their search for a web development agency that could not only transform their existing website platform, but could help to invent a brand new comparison engine for the fashion industry.

Beginning with the end in mind.

The journey towards today’s amazing results started with research, testing and validation. At Illustrate Digital we’re known for our focus on driving towards the best end results. 

This means our most important first step on a project like this is to make sure we understand the needs of our customer and what they’re aiming to achieve. 

For Avoir, they had a clear direction and outcome they wanted to achieve: import the best products from multiple retailers and show consumers the best prices for these products.

In reality, and uncovered during our research and testing, there were considerable limitations on the data sources available for us to import the products from. There’s no standard format, no pre-written rulebook, just us, Avoir and a big idea!

During our research we looked at:

• An in depth evaluation of the types of data we would be looking to compare
• The amount of variation between the data (best and worst case scenarios) to understand the true range of formats
• The best architecture for a website with a million-plus products, built in a way that could continue to scale
• How to serve millions of products via an on-site search tool that wouldn’t slow down

Developing the Avoir Product Comparison Engine.

Typically the most complex part of any comparison tool is simplifying how the products are compared and displayed. This was even more so for Avoir, a seriously clever approach and a heap of testing would be needed to get this right.

To create the Avoir Product Comparison Engine we worked alongside data scientists from Cardiff University’s Data Innovation Accelerator and Avoir’s own data team to develop and implement algorithms that would help to match products across a variety of different formats. 

This standalone platform, developed using Python, collects and processes tens of thousands of products per day before passing them to WooCommerce to compare and display.

We can’t say too much about how this works, it’s Avoir’s secret sauce that we’re proud to have helped them develop, but you’ll have to believe us when we say it’s very clever!

The multi-platform approach allows us to reduce the strain on the customer-facing website, making sure the site performance and customer experience aren’t affected.

Scaling WooCommerce.

WooCommerce is an incredibly powerful e-commerce platform that, in the right hands and with the right infrastructure, can be made almost infinitely scalable.

The one key challenge with WooCommerce for a site of this size and scale is the database limit of up to a million products. Since the Avoir website needed way more than this one million product limit, we tested and decided to develop a multi site solution.

Multi site is a core feature of WordPress, allowing us to operate multiple websites all as part of the same network. This can be used to manage different languages, sub-brands, locations or in Avoir’s case it’s too-level categories. 

Using WordPress multi site has allowed us to house up to a million products in each of the Womens, Mens and Kids sections. 

The setup means Avoir Fashion can house three million products and beyond.

Introducing Powerful Search Functionality.

What would a fashion or retail website be without the ability to search for your favourite products? Research shows that 30% of all visitors to e-commerce sites will use a search tool to find what they’re looking for. 

When your site hosts millions of products, it can prove tricky to display useful results, catering for a range of search preferences (such as the words and spellings that different people use to describe the sake thing), without having a big impact on speed and performance.

This is where Algolia comes in. Algolia is a powerful on-site search engine that takes the brunt of the processing needed to display tens of thousands of search results quickly and accurately. 

When testing, searching for the most popular products took several seconds to load, whilst tests with Algolia brought this down to just a matter of milliseconds. A vital tool in producing the best user experience for shoppers visiting Avoir.

Launched Using the Best Hosting Infrastructure.

Avoir Fashion has the potential to be one of the most resource intensive sites we’ve ever built and deployed. Part of our focus was on engineering a solution that would perform quickly and that wouldn’t produce unnecessary cost or carbon emissions. But to draw the best gains we would also need to launch the new Avoir website using the best hosting infrastructure.

Given the multi-platform setup, we would need to consider the best option for both the Avoir Fashion Comparison Engine and the customer-facing WooCommerce site.

Looking after the WooCommerce and WordPress Multisite infrastructure is WP Engine. Performing proper due diligence on the best platform for Avoir, WP Engine and their dedicated and scalable WooCommerce setup was the top choice.

For the python-based Comparison Engine we looked to DigitalOcean to help carry out the grunt work of processing and comparing the products in the background.

This combination allows us to keep the website front-end free of any heavy processing and keeps the speed of the site absolutely optimal, giving Avoir’s audience a consistently wait-free experience.

What’s Next for Avoir Fashion and Illustrate Digital?

As a team we’re keen to build long-term relationships with our customers and to always be looking ahead to improve the website and products we’re building together. 

Relaunching the Avoir website and building the Comparison Engine was just stage one of our journey. 

Avoir has plans to corner a significant chunk of the luxury fashion sector and, as its customer base grows, Illustrate Digital is working as Avoir’s key technology partner to continually improve the product matching algorithm and better the user experience based on consumer feedback.