FARFETCH Conscious Luxury Trends Report

Building a subtly animated microsite to communicate sustainability trends

FARFETCH is a global fashion retail platform: selling products from luxury boutiques and brands around the world.

View the report

Data-story-telling

As National Earth Day approached, long-standing client FARFETCH came to goat with a request for a web-based, data-driven report on their brand’s conscious (or sustainable) trends. The challenge at hand was to collect data on these trends from across the FARFETCH website, and find a way to evocatively show how the brand’s consumers were steadily moving towards more eco-oriented choices. The team wanted a lively, interactive report that would capture attention and keep readers engaged beyond the figure-heavy content.

The goal was to get readers to dive deep into the facts and figures, without having them feel like they were drowning in rows and rows of data. The experience needed to feel effortless, with information flowing in a way that felt smooth and pleasant to read; more like a story than a report.

Animating the reader experience

So as the FARFETCH team gathered content and data, we worked on technical solutions that their designers could use to build a sophisticated narrative around that content. With around a month until Earth Day — the day they would launch the report — we had to come up with a central concept, experiment with functionality, work on structure and layout, build, and then test the microsite.

We broke everything down into blocks of content, presenting a variety of layout patterns for the designers to use without having to recreate each component repetitively if they needed to add more content further down the line. We then focused on animating transitions between sections of content, adding subtle motion to anything from detailed statistics to chapter changes. Collectively, the animations would give the data subtle emphasis as users scrolled through it, with constant movement that wasn’t overbearing or distracting.

A model for microsites

The objective of this project was to create a digestible piece of information that wouldn’t feel overwhelming or like a huge investment for anyone to read. Animations helped guide readers through the data density, alerting them to interactive elements they could click on to find out more and implicitly telling them what information was interesting or important to read next. Content blocks and their associated transitions meant information could be presented in staggered way, showing the user the hierarchy of its significance. Above all, the design needed to be slick — attractive to visually literate readers who care about both fashion and sustainability. In the end, the exercise became a demonstration on what temporary or small-scale websites can do: give people a lot of detail without making it feel like a chore to consume.

Kind words from the client

wearegoat have worked with me to build multiple executions for our platform. Our projects have ranged from single microsites to a bespoke content management system for enhanced product listing pages. I have always found them to be fantastically diligent in their output, incredibly insightful when planning how to execute projects and hugely responsive when moving forward with builds. They are hands down my go-to team of developers and I haven’t been able to give them a challenge that they haven’t managed to tackle.

Art Editor at leading global fashion retailer