Ashley Wade

Home

Case Studies

Bento Design System

The design system powering amazing ordering experiences.

Ensuring UI quality and consistency while increasing development speed.

Supporting many brands across East Asia
and Europe

Used by 54 cross functional squads. Contains 65 reusable components.

Supporting many brands across East Asia
and Europe

Used by 54 cross functional squads.

Contains 65 reusable components.

Text appear

damejidlo

foodpanda

foodora

Mjam

Foodora

foodpanda

Foodora

Why did we need a better design system?

Localization

Local business and marketing teams demanded more localization options in order to enhance the user experience for their respective markets.

Team Scaling

Our headquarter offices in Berlin and Singapore rapidly scaled up from 11 squads to 27 squads in a matter of months. As such, ensuring UI consistency became a major focus area.

UI Refresh

We wanted to execute a major UI refresh across all screens and we needed an efficient way to rollout this exciting new look and feel.

Localization

Local business and marketing teams demanded more localization options in order to enhance the user experience for their respective markets.

Team Scaling

Our headquarter offices in Berlin and Singapore rapidly scaled up from 11 squads to 27 squads in a matter of months. As such, ensuring UI consistency became a major focus area.

UI Refresh

We wanted to execute a major UI refresh across all screens and we needed an efficient way to rollout this exciting new look and feel.

Text appear

My role

Sr. UX Designer

I volunteered as one of four senior designers to build our new design system. I found myself facilitating agile ceremonies and design reviews while dedicating the rest of my capacity to UI component design. As development progressed, I recognized that long-term success required a dedicated squad to maintain and evolve the system.

I was one of four senior designers to join the project team to build our new design system. I found myself facilitating agile ceremonies and design reviews while dedicating the rest of my capacity to UI component design. As development progressed, I recognized that long-term success required a dedicated squad to maintain and evolve the system.

Design Manager

I pitched this need to leadership, and after securing approval, I stepped into the role of Design Manager, which was a hybrid product and design position. I hired a Sr. Product designer and a Sr. Motion designer. My engineering counterpart expanded the team with three engineers. Together, we establish the Bento design system squad.

UI / UX Design
Design Review
Documentation Review
Project Management
Team Facilitation
Stakeholder Management
Scope Definition
Evangelizing
Process Development
Planning and Estimation
KPI Definition
Testing Strategy
Quality Assurance
Hiring
People Management
Onboarding
Team Ops

Roll-out

MAY

JUN

JUL

AUG

SEP

OCT

NOV

DEC

JAN

FEB

VISION

Design & brand leads worked to put together a refreshed visual language

DESIGN

Designers started working on token & component designs

BUILD

Android & iOS developers built components to spec

UI BRUSH UP

Squad designers redesigned outdated screens using new styles.

TOKEN UPDATES

Replaced illustrations, colors, typography, spacing, elevation & corner radius tokens

01 ADOPTION

The most commonly used components were adopted & changes were released

02 ADOPTION

The remaining components were adopted & changes were released

BENTO SQUAD

The UI Engineering squad: Roadmap, process KPIs and beyond

There were several phases of the project. Scroll down to learn more details.

Design & build

Stakeholders from across the product organization identified UI components that were commonly reused across the existing app.
Designers took a fresh look at these components and their variations in order to consolidate and apply UX best practices.
Designers refreshed all of the styles to create a more modern looking UI and created reusable symbols and style sheets in the design files.
UI engineers & designers cleaned up redundant tokens/styles and mapped changes to all instances.
App developers built working components to spec for iOS & Android.

Text appear

Quality assurance

App developers on our team added a copy of each component to a platform specific demo app so that we could test it.

The demo app was not only a great tool for QA, but also for sharing our progress with our stakeholders and for helping people understand the functionality, variations and limitations of each component.

There was of course a second wave of QA and bug fixes that took place during the adoption phase of the project. This was expected as more people began to use and scrutinize the system. More on that later...

Text appear

UI brush-up

Of course, adopting components wasn’t always as easy as swapping one for another. There were many screens in the product that had not been touched in a long time. These screens needed a wholistic redesign in order to accommodate this update.

Designers utilised the new bento libraries in the design files as they redesigned the neccessary screens. As you might imagine, redesigning neglected screens was, at times, difficult to prioritise especially in low traffic areas.

However we had an important advantage. Bento was a highly visible project with product & business sponsors. Even on teams who were so constrained that they couldn’t meet the deadline, it didn’t take long after the release, before they found a way to take care of the glaring misalignments.

Text appear

Mapping tokens to the existing UI

The foundation of any design system is the token structure. Design tokens are used in place of hard-coded values and variables in order to ensure flexibility and unity across all product experiences and/or platforms. It was necessary to have them in place before we could begin using our new components.

So the engineers went through the whole application page by page, line by line to ensure all the static values were replaced with the new tokens.

Title-LG

neutral primary

Title

neutral primary

interaction primary

Highlight

Title

neutral primary

interaction primary

Highlight

Title-LG

neutral primary

Component adoption

The design system and its resources were presented and shared with everyone and we worked with leadership to ensure the project’s prioritization.
Documentation was published and a support channel was created where anyone could write a question or make a request and we would reply quickly and help them resolve their issue.
A two phase rollout plan was created and we worked with the squads to ensure they were ready for the deadline. Everyone needed to be finished on time in order to ensure a cohesive update to the look and feel of all the screens.
Squads replaced all the components within their scope of responsibility. Any unassigned screens were taken care of by our squad.
If we ran into an issue, for example: a bento component couldn’t achieve a desired behavior, we would schedule a refinement meeting asap to discuss the details with the relevant stakeholders. In that discussion, the group would decide if the bento component would expand it’s functionality or if the specific instance was unique enough to be a squad specific component.

Text appear

Release

We have 2 week release cycles which are staggered for Android and iOS. We always have code freeze a week prior to release, giving us 5 days to test the release candidate.
We did a training refresh on QA testing/bug reporting for all of the designers and arranged blitz testing sessions.
Bug tickets were quickly triaged, prioritised and fixed by the developers. Fixes and updates where published to our slack channel.

Text appear

Measuring impact

Source: Design & Developer Experience Survey

Do you agree or disagree with the following statement?

"The bento design system allows me to go from exploration to implementation seamlessly"

Do you agree or disagree with the following statement?

"The bento design system allows me to go from exploration to implementation seamlessly"

Do you agree or disagree with the following statement?

"The bento design system allows me to go from exploration to implementation seamlessly"

Strongly agree

Somewhat agree

Somewhat disagree

Strongly disagree

100%

80%

60%

40%

20%

Q1-2022

Q4-2021

Q3-2021

1 %

13 %

63 %

23 %

11%

11 %

56 %

22 %

12%

24 %

35 %

29 %

Q1-2022

Q4-2021

Q3-2021

25%

50%

75%

100%

23 %

63 %

13 %

1 %

29 %

35 %

24%

12 %

22 %

56 %

11 %

11%

The initial launch had a lot of hype. It represented promise and potential and among our early adopters, we had a high number for promoters. However not all teams had yet adopted the system. As we pressed for mandatory adoption across all squads, the system encountered more diverse use cases and for some, there was an initial curb of creative freedom. It took us some time to find a sustainable balance between standardization and experimentation. Our goals is for the system to be empowering, not limiting. This question helps us gauge how we're doing.