Farfetch is a global community of over 300 visionary fashion boutiques offering an inspirational shopping experience to fashion-forward consumers. As the Senior Designer on their responsive site I was responsible for designing layouts for each break-point on all key areas of the site. As the transition to the responsive site included an update of their online branding this meant ensuring that the new styles we had defined were implemented and adhered to across every page, creating a consistent, luxury experience.
logo

Farfetch

Farfetch is a global community of over 300 visionary fashion boutiques offering an inspirational shopping experience to fashion-forward consumers. As the Senior Designer on their responsive site I was responsible for designing layouts for each break-point on all key areas of the site. As the transition to the responsive site included an update of their online branding this meant ensuring that the new styles we had defined were implemented and adhered to across every page, creating a consistent, luxury experience.
‘farfetch’ logo are trade marks of Farfetch UK Limited and are registered in numerous jurisdictions around the world, All the work and screens is reserved to Farfetch

The project

I’m really proud of is the opportunity I had to redesign Farfetch’s website with an amazing team of designers / UX and developers. This project gave me the chance to innovate the visual language and apply a lot of critical thinking in the process. We had to develop new creative solutions and use different specialists. At the end we established a design pattern and a visual language that is now being used by all other platforms. It was a long and fascinating process, from which I learnt a lot.
Project Credits
Senior UI Designer
Marco Lopes (in house at Farfetch)
Head of UX & Design
Tara Fowler
Development
Farfetch

My role:

create and design assets/visual content for the Farfetch website and mobile apps
Provide direction for the team and clearly define brand guidelines
Pro-actively push the level of quality in both thinking and execution
create and design assets/visual content for the Farfetch website and mobile apps
Design online content including homepages and website features
Support the product team to improve the website and design new features
Work cohesively with other departments (i.e., marketing, editorial, product) to execute projects; keeping to deadlines
FARFETCH RWD

The Back storie

While best practices are important, they can also be a bit lackluster and many of the eCommerce experiences we reviewed were very clean and elegantly designed, but lacked any sort of immersive experience.
This presented an opportunity. One that brought innovation to the product browsing experience through thoughtful interaction and consideration of eCommerce best practices. Countless explorations were required, multiple challenges faced, but focusing our energy on an elevated user experience provided a new interface that could be used throughout the site.
Through a very collaborative effort, i helped  the Farfetch to get a fresh new redesign and relaunch its web platform with an emphasis on e-commerce and a hybrid blend of user experience and visual design.

 

Was a 6 month way through all the options, many UI kits, many pages. As before we didn’t have a responsive website site, so we all toke this big changeling to make this new website responsive, following our time schedules that were very tight.

 

As me the main designer there i toke the challenge to build a brand new visuals, from typography to grids. Like all of our projects, our goal from the start was to align with the brand foundations identify opportunities we could leverage to better express their positioning.

 

Our UI framework — it’s not a definitive guide on how a web shop should be built. It’s tailored specifically to our needs. Many of the ideas in our library are a greatest hits collection of ideas others have pioneered that we’ve adapted to a new situation. it’s a learning library.
quote_1

The research ``we don’t call it research``

Really important step in our process is to do Visual insights. This is a great workflow, because it means we can build the component as per the design to build the UI in the most appropriate way.
I wanted to really understand the design / brand. The first thing I did was sit down and go through all the designs they had before and understand the concept.

 

We printed and annotated the designs, creating a common language between design and tech. This would help us communicate better and establish consistency through our components.
By working closely with everyone I was able to define the UI structure, especially for the homepage.
Collaborating with marketing, stackholders is such an important step!
I ❤ collaboration.
before_after_research

Establishing Design Language System (DLS)

A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem.
Farfetch has experienced a lot of growth over the years. Currently our design department consists of nearly a dozen functions and outcome teams. It became clear that we needed more systematic ways to guide and leverage our collective efforts. While we recognized these challenges within the company, I believe they are symptoms of larger software industry problems.

 

So i start to gather all the old elements and refine them to a new luxury driven design, but not losing the farfetch identity, instead of relying on individual atoms, i started considering our components as elements of a living organism. They have a function and personality, are defined by a set of properties, can co-exists with others and can evolve independently.

 

Atomic_design

Creating an Atomic UI kit

Building up from Molecules to Organisms encourages creating standalone, portable and reusable components.
We’ve created a living Brand Library, a website explaining our brand, our characteristics and our beliefs. In the Library we also feature something we call a UI kit, a repository for our Atomic Design elements in Sketch. We like to think of them as identical twins living separate lives.
By limiting our UI kit to Atoms and Molecules i give the design team the freedom to explore and create their own Organisms.

Compiling the library - Design Language System (DLS)

A master file called library, which we referred to throughout the design process.
While the library was growing, we started organizing individual components into artboards containing similar items. These artboards were then organized by general category into: Navigation, Content, Image and Speciality.
elements_1
There was a strong focus in developing the design direction, first. Setting a design language that adopted Farfetch timeless qualities but translated well on the web, through any interactive touch-point.
During this process, various options were explored that showcased and sampled an online presence. The outcome was a new digital design language, focused on great typography and minimalist design, where products and photography became the site’s centerpiece.
allsizes_hp_1

The design

The idea of seamless integration is one we didn’t take lightly. I wanted to make sure that anywhere on the site, users can engage in content pushes the products, positioning, and personality of the brand. We knew that if we could do this well, we would could improve metrics across the board and more specifically—time on site, return visits and engagement.

 

The new site is designed in a way that allows the personality of the brand to come through. Refined, and beautiful and so is the design system of the new eCommerce experience. From its minimal elegance to bold typography and images, the design system is solely focused on highlighting the lifestyle of the brand.
Interactions and animations bring the site to life in a way that is delightful and easy to use, similar to how the products are designed to be functional as well as beautiful.

Homepage

The home page (as well as the entire experience) is built using various components and layout modules that can be mixed and matched to tell seasonal stories, push new products, and highlight editorial content.
full_allhomepage_hp

Telling Stories and Providing Context on the Product Listing and Product Detail Pages

When it comes to articulating a brand’s personality and story, things typically fall apart on the product listing and product detail pages. Because providing an “experience” is crucial, design the PLP and PDP pages in a manner that continues to provide context and inspiration through things like videos, popular trends, collection call-outs, and engaging imagery.
While best practices are important.

 

One that brought innovation to the product browsing experience through thoughtful interaction and consideration of eCommerce best practices. Countless explorations were required, multiple challenges faced, but focusing our energy on an elevated user experience provided a new interface that could be used throughout the site.
listing_full_desktop

Mobile

Moving from desktop down to mobile was a fairly easy transition.  At this size, the product tiles stacked and occupied the entire screen width so we were able to surface the alternate finishes without fear of a cluttered layout.  This experience is meant to focus more on the details of a few products versus browsing an entire catalog.
listing_iphone_1

Product detail page

 We designed the product page in a non-traditional manner.
Inspiration from fashion magazines and editorial layouts to craft a system for creating product page that tells each one’s unique product.
detail_page

Mobile

detail_page_mockups

Other Pages

others_pages
NEXT CASE
Ux & UI design, personal concept
Close ()