Farfetch
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:
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.
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.
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
Secondary titles to highlight the pillars of Positively Farfetch. Communicate
Links to the main categories immediate visible. Discover, Drive sales
Swiping function on mobile to vary the pace
Content moves to 2 columns to allow for more text to add context. Communicate
CTA buttons to add prominence to the services. Discover
Further information pages to direct customers to learn more. Communicate
Page facilitated a space for hosting the Positively Farfetch brand campaign to drive further traffic. Following successful completion, I was briefed by Sustainability team to work on additional pages for Positively Farfetch:
1. Farfetch Fix - a restoration service
2. Farfetch Donate – a charitable resell service.
For the latter, I also art directed a still life shoot to populate the page and use for marketing collateral.
