Farfetch

Amplifying Sustainability Messaging

Amplifying Sustainability Messaging

Lead on the redesign of the Positively Farfetch section of the website to coincide with the global rebrand. Applying Art Direction and UX processes to amplify Farfetch’s Sustainable credentials.

Role

Design Lead

Timeframe

3 weeks

Team

1 Copywriter

2 Stakeholders

Context

Farfetch is one of the leading players in luxury fashion, providing customers with an unrivalled selection of products from both its global boutique network and brand partners. One of its key brand strategies is to become “the platform for good in luxury fashion” promoting sustainable shopping habits. They announced the ambitious target of selling 100% ‘conscious’ products by 2030. To drive this initiative, the sub-brand ‘Positively Farfetch’ was created.

The Challenge

With the stakeholders of the project being the Sustainability Team and the Chief Brand Officer, the challenge was to redesign the Positively Farfetch section of the website with the following objectives:

🔍
Discover

Make it easier for customers to discover products labelled as ‘conscious’. Research had shown that 20% of products on the Farfetch website had no visibility to customers due to the volumes of products on offer.

🔍
Discover

Make it easier for customers to discover products labelled as ‘conscious’. Research had shown that 20% of products on the Farfetch website had no visibility to customers due to the volumes of products on offer.

🔍
Discover

Make it easier for customers to discover products labelled as ‘conscious’. Research had shown that 20% of products on the Farfetch website had no visibility to customers due to the volumes of products on offer.

💬
Communicate

Amplify Farfetch’s sustainability credentials by demonstrating how Farfetch is achieving this.

💬
Communicate

Amplify Farfetch’s sustainability credentials by demonstrating how Farfetch is achieving this.

💬
Communicate

Amplify Farfetch’s sustainability credentials by demonstrating how Farfetch is achieving this.

📈
Drive sales

Through inspiration and engagement, encourage customers to think, choose and act positively with Farfetch.

📈
Drive sales

Through inspiration and engagement, encourage customers to think, choose and act positively with Farfetch.

📈
Drive sales

Through inspiration and engagement, encourage customers to think, choose and act positively with Farfetch.

The Design Process

The Design Process

My role at Farfetch sat on the brand team where I took care of the design and visual identity across various touchpoints on the website and app. I was briefed by the Sustainability team at Farfetch to take design lead on redesigning the experience of the Positively Farfetch page and all sub-pages. The updates needed to be ready in line with the launch of Farfetch’s new brand identity and campaign since an increase in traffic was expected to all the press it would encourage.

Research

Research

Kick-off meeting to identify key stakeholders and define responsibilities. As design lead, my first step was to assess the existing Postively Farfetch pages to establish the key issues.

Key issues identified

LOW TRAFFIC

Content was split into separate menswear and womenswear but both receiving very little traffic

LOW ENGAGEMENT

The editorialised content received very little engagement – users were not clicking/scrolling to the end of the carousel modules

LOW IMPACT

Research showed that shoppers were more driven by fashion, with sustainability being a lesser consideration

Ideation

To initiated a brainstorming session with the Fashion Editor to define the key messages we wanted to communicate. Taking this content. I put together user flow diagrams to understand the customer’s journey to accessing the content.

Design

The pages were to be built within the existing CMS system which was formed of the recently updated content module bible. This limited the design scope available, but also encouraged me to be creative with the tools and visuals I had at hand. The new brand guidelines also helped shape the layout choices based on typography constraints of the modules.

Following the new brand guidelines

DEFINE INITIAL LAYOUTS

Taking the initial wireframe and creating the layouts in Sketch.

IMAGE CURATION

Searching through Farfetch’s bank of seasonal imagery and working with the fashion team to ensure the selection is in line with merchandising targets.

TEXT PLACEMENT

Reconnect with editorial team to fit the text into the designs and adjusting where necessary.

Built within the Farfetch CMS, formed of modular blocks of content based on the ‘module bible’

Art Direction & Image Curation

Being within the Brand Marketing department, I was very familiar with the asset bank and usage of all of the imagery available. I curated the imagery on the page, ensuring to source assets that not only complemented one another but had inventory to fulfil the commercial objective, confirming with the Visual Merchandising teams that there was good stock depth.

Iterate

With the first version of the pages ready, I presented the layouts in a group meeting to key stakeholders.

The overall user journey was well received along with the curation of imagery. However feedback was that more context was needed within the copy. Due to the fixed nature of the content modules, it was not possible to add any line breaks or additional copy fields.

Additionally, the newly created module bible coincided with the new brand guidelines that limited the usage of the display typography to be used just once on the page.

Above

Typography hierarchy from the new brand guidelines.

Cross-functional compromise

With all stakeholders present, it was decided to compromise on these guidelines in order to improve the user experience and fulfil objectives. To do this, I implemented a “hack” on the modules, using a heading module with the image removed stacked on top of the 3 post module. The result was clearly headlined sections, improving the messaging.

Above

The initial version of the 3-post module presented. Only a headline can be added in the "heading" style font. The issue here was that it lacked impact and was no additional room for contextual copy.

Above

The "hacked" version using a headline module (image removed) above the 3-post module (heading removed). This allowed an additional line of text along with a more prominent headline for sectioning content.

Results

Results

The updated Positively Farfetch section of the website was launched in line with the rebrand and comms being sent out. This included the main landing page communicating Farfetch’s overall strategy and goals, along with the 2 sub-pages dedicated to Climate Conscious Delivery and detailing how items are labeled as “Conscious”.

Annotations

  1. Secondary titles to highlight the pillars of Positively Farfetch. Communicate

  2. Links to the main categories immediate visible. Discover, Drive sales

  3. Swiping function on mobile to vary the pace

  4. Content moves to 2 columns to allow for more text to add context. Communicate

  5. CTA buttons to add prominence to the services. Discover

  6. Further information pages to direct customers to learn more. Communicate

Rebekah Neal Design 2024

Rebekah Neal Design 2024