The story of the JET design system so far…

Published in

Just Eat Takeaway UX

7 min readDec 8, 2022

Over the last few years, Just Eat Takeaway.com has become one of the biggest food delivery services, now operating across 20 markets globally. As the business grew, the visual language started to diverge; design patterns became unique to business functions and as tech stacks moved at a different pace, they became independent.

Just Eat Takeaway.com splits its business into multiple areas; Customer (those who eat the food), Restaurants (those who make the food), Couriers (those who deliver the food) and Operations (those who support all the other teams). Each of these areas have multiple products all serving their unique user and there was very little to connect these products into one ecosystem.

We also needed to find a way to better connect our products and platforms as each had different colours, typefaces etc. The design and development teams historically worked in silos and each of these departments needed a shared way to communicate. It was clear that we needed to find a solution. We needed a design system.

How we approached creating a design system

We started with a workshop

As we embarked on a new design system, we wanted to make sure that we created a modern visual language. We decided to start with a clean slate. Our starting point was the creation of a series of design principles. The team then created style tiles (one page that holds all the information about a design language, type, logos, and icons) based on each of the principles. We knew that the design language would be made up of parts taken from all the design principles and with this in mind, we ran a multi-disciplinary design workshop so that we could better understand how much of each principle would be required. During this workshop, we cut up all the style tiles and created a final style tile by placing different elements (type, colour etc) on the page, giving us a clear direction for the design system.

We got development involved early

One of the key differences between a design system and a visual language, pattern library, or rebrand, is the connection with development. A design system is not just design files — it’s a common language and consistent design decisions.

It was crucial for the success of a design system to start working with developers early, since they will be the ones using it every day! Engineering built the first proof of concept of the JSON. This file takes the core values of the design system foundations (type and colour) and connects them to tech stacks.

We identified individuals in development who cared about craft, systematic thinking and UI. They became supporters for the design system and sold it into their respective areas of the business.

We made it real

We brought the design system to life at an early stage by building a microsite for the wider company to explore the finer details. We used it to explain why we needed a design system and how it benefited the teams. The microsite was a great tool to share information with other teams and helped us create excitement for the initiative.

With the system gaining traction we needed a new name — something ownable. Naming a design system gives it emphasis and allows the system to be branded. We wanted a name that was catchy with a bit of playfulness. We worked with our copywriters who came up with ‘PIE — Principles for Interactions and Experiences.

We implemented tokens early on

PIE needed to be a global design system to work with all Just Eat Takeaway.com products. At this point, there were two different visual languages used but we wanted a shared system working for all of our brands. To allow this we had 4 themes within PIE: Dark and Light for the two different visual languages. We used design tokens to power the design system. Tokens aren’t tied to the logic of the language. They contain only one value and the naming isn’t context-specific. The token name is the same across brands. These can represent anything defined by design: colour as a hex value, and opacity as a number, animation ease as Bezier coordinates.

PIE has a hierarchy of tokens and this allows us to theme the UI. We have global tokens which contain the foundational building blocks. We use the global tokens to create the alias tokens; alias tokens hold design decisions, can contain one or many global tokens, semantic naming, and consistent naming across brands. The alias tokens are what we use in the product.

Alias tokens are effective when a value with a single intent will appear in multiple places. Using alias tokens allows us easy, scalable theming.

We built a culture of sharing and gathering feedback

Sharing the progress of the system was vital. We wanted to be transparent and to learn whether we were building the right thing for our designers at Just Eat Takeaway. We introduced multiple mechanisms to help share the team’s awesome work:

Monthly show and tell, where we would demo a round up of the latest components.
Bi-weekly clinic, an hour where people can ask questions and get support
Bi-weekly component round up: a doc with a breakdown of the latest components — also a resource for engineering to track any token changes.
Email newsletter: highlights of the month and any big team shout-outs.
Help Slack channel: We created a (very active) Slack channel, where team members can ask questions and get support on the spot.

We supercharged our design system

Following Just Eat’s merger with Takeaway.com, we worked on a few projects that involved updating the interface. As these projects took shape, we made sure that we used PIE to support the work. The first task was to update the new brand colour from red to orange, an important visible UI project. This gave PIE the opportunity to grow and begin its journey to being a vital part of product development.

In the second task, we aimed to bring all the products much visually closer, aligning on type, colour, shadows, radius, iconography and buttons. Within this work, we doubled-down on PIE and made sure that all the UI updates happened through the design system and tokens. This work has helped with the vision of our team:

PIE makes our products awesome and our teams more efficient.

The rebrand work allowed us to hit one KPI we defined, which was 95% of products are powered by PIE. It was important to have these metrics outlined as it allowed us to explain progress to senior stakeholders.

So what have we learnt?

Over the last few years, we have learned a great deal about how to scale and make a design system within a complex, multi-brand business.

Design systems need support from multiple people in the system. These people promote the benefits of the system and get teams excited.
Oversharing: every chance you get — talk about your system!
Create a feedback loop with your product designers and developers. They are your end-users for the system; get feedback early and often from this cohort.
Branding the design system is important as it makes it feel more tangible and gives you assets for decks etc.
Define metrics for success. Once the system has traction, it’s important to quantify how the system is benefiting the business. We used: percentage of a product using PIE, team’s using PIE and components designed and built.

The system is growing up

We have now achieved a level of maturity within the design system.

We have 2 dedicated web teams, a React and Vue.js team to support the multiple platforms.
The team now has a Product Manager who ensures the system delivers value to the business whilst liaising with other product teams and advocating for adoption.
The design team has grown to 4 dedicated designers all with their own specialities.
The Figma files have 53+ core components, multiple business area libraries, 250+ illustrations and 280+ icons for the design community to use.

So what’s next?

There are corners of the business that need the support of the design system. We have a new bespoke public website coming in Q1 2023 which will be the single source of truth for the system it will contain: foundations, components, designer guides and developer resources. The team is moving from mainly creating new components to being a strategic partner to help products and teams move more efficiently. It is going to be an exciting 2023!