Building Design Systems at FARFETCH
By
Luís VieiraView All Posts
Solutions finder. Was seen before riding a bike while wearing MAAP.
Top Stories
1 - Building Design Systems at FARFETCH
As a platform for luxury fashion, FARFETCH builds a wide variety of digital products such as farfetch.com, multiple e-commerce websites for our partner brands, and a large set of internal tools, applications, or even institutional websites. All of this happens in a fast-paced and ever-growing environment, as such we want to make the development of these products as efficient as possible.
However, if we look at the current state of the web platform and web development in general, we can see that a lot of duplicated work is being done by rebuilding identical components and patterns for web applications.
The web platform
The Web became the most successful application platform in history. As such, the amount of different devices and input types we have to account for when building a web application has exploded in recent years. Despite that, there's a very limited amount of built-in UI controls in the web platform, and often the ones that do exist don't provide many customization options.
These missing parts are pretty common across any kind of product you're building, think of modals, breadcrumbs, carousels, or tabs just to name a few. In the absence of a web platform version of these controls, these usually need to be built from scratch every time we start a new product. However, the variety of different browsers and devices on the web is so large that it can be overwhelming to do so in a cross-browser and fully accessible way. So often, these common UI patterns are created with compromises on accessibility or UX and can behave in slightly different ways across applications.
This leads to untold amounts of wasted effort rebuilding common patterns and controls for each web application we build, which at scale may represent a significant cost for an organization in both productivity and increased cycle times.
Design at scale
However, this is just the first challenge, user interfaces also need to be reflective of a brand, they need to showcase and be identifiable with a brand identity and values and do so consistently and coherently, which is also a hard task especially as your product grows in size and engineers. Visual consistency needs to be ensured while evolving and growing your application and teams.
To ensure productivity and alignment, a common language needs to be established between design and engineering. Teams should have the same approach to naming UI elements and a common understanding of when and how a certain element should and can be used, this ensures that communication issues and mistakes are reduced, that we can take full advantage of our best designs, and that everyone can contribute to the conversation by using a common vocabulary.
The FARFETCH design system
This is why the FARFETCH design system was born. We think of a design system as a modular set of reusable patterns, guided by clear standards and guidelines, that can be combined to build any number of applications.
- We want our developers and designers to speak the same language.
- We want to propagate inclusive practices and accessible components at scale ensuring that accessibility and inclusion are first-class citizens within our UI’s.
- We want to liberate product teams from reinventing the wheel and focus on what really matters: learning and improving digital products to meet user and business goals.
With this in mind, the design system project aims to:
- Reduce duplication by distributing common components, patterns, assets, and guidelines from a single-source
- Ensure AA accessibility compliance by providing components with clear examples and guidelines on how to achieve it
- Improve user experience and brand identity across all adopting products
- Increase developer productivity and reduce cycle times
How the system works
With these goals in mind and to be able to meet the challenges of an extensive ecosystem of web applications, we structured the system with modularity at its core, being made of 3 main building blocks: primitives, theme-utils, and core.
Primitives
This is a set of low-level UI components that come with accessibility, keyboard, and touch interactions baked in, while ensuring consistent behavior across supported browsers. We closely follow the wai-aria standards for accessibility, taking advantage of the web platform whenever possible. The focus for primitives is to automate accessibility as much as possible and provide clear guidelines when we can't, provide good foundations for focus management, and keyboard interactions, and make sure that screen readers work properly with the applications and components we build.
Theme-utils
Theming allows you to customize the system to make it your own, leveraging a systematic design approach, this layer is essentially composed of tooling for styling, making it easy to define design constraints and theming options for components. The tools and guidelines provided in this layer ensure that it's easy to achieve and maintain visual consistency at scale.
Core
Core leverages the foundations built with primitives and theming to provide a customizable set of white-label components, this is the path of least resistance to getting started with the design system, and ensures a strong foundation for teams in terms of behavior, accessibility, and design best practices, taking full advantage of the best that the design system has to offer.
Self-service model
When building a project like this in a company with such a huge variety of different products like FARFETCH, you need to think about how you support these products and enable them to leverage these strong foundations.You need to think about adoption.
How do you drive hundreds of developers and different products to start adopting a design system?
How do you ensure it doesn't become a bottleneck for daily operations, and that developers retain their autonomy, mastery, and purpose while becoming more effective?
With this in mind, we embrace a fully self-service model backed by strong documentation and support. This ensures adopters can get started at their own pace, incrementally, while retaining their internal processes and tools. Leveraging the system modularity and composability, we can make sure that we meet the needs of different teams and projects.
Different teams may have very different needs, some teams just want to ship something fast and need a set of components out of the box. Often these teams don't have many design resources and need to get something up and running quickly, so they can leverage our core offer, they just need to choose or create a theme file and they're ready to start. They can pick the components they need and define their own adoption strategy and pace.
On the other hand, some teams need full control over customization while working on products with a high change rate. We encourage these teams to adopt our primitives, theming tools, and guidelines to build their own local systems. This ensures a common foundation for our products but also that they can operate in a fully autonomous way in their daily operations.
A system of systems
This creates a rich ecosystem of many different subsystems connected by strong foundations which in turn form part of something larger. This allows us to solve problems once and extend solutions to many, while learning from local systems development. This improves our building blocks, allowing everyone to benefit from innovation happening across the company while promoting collaboration from all teams within FARFETCH.
The whole ecosystem is backed by our documentation sites, Slack channels, and domain-specific guilds, operating in an internal open-source contribution model to leverage design and development efforts from the greater FARFETCH community.
