Ashley Wade

Home

Case Studies

Web Refresh

We should strive for a unified brand and experience across all our products, ensuring consistency in look, feel, and core interactions, while respecting the strengths and conventions of each platform.

Business Background

Delivery Hero is a multinational online food ordering and delivery company. My team supported 3 major brands across 15 countries.

My Role: Design Manager

My Responsibilities: Project planning and coordination, design strategy development, resource management, facilitating collaboration between cross functional teams, design review, stakeholder communication & quality assurance

My Role: Design Manager

Europe

East Asia

Turkey

Web orders 2023

50 million reasons to care about web

Web orders bring in only 6% of total orders, but thats still €50 million GMV a month.

It wasn't easy to persuade our colleagues to care about the web experience. 94% of our orders come from our apps, therefore web development projects have been regularly deprioritized by our leadership, product and design teams for years.

As a result, the web UX fell out of step with the app experience both from a feature perspective but also from a branding an UX perspective.

We needed to educate people in our organization about the role web plays in discoverability, acquisition and the value of revitalizing the UX in our web ordering funnel.

Web orders bring in only 6% of total orders, but thats still €50 million GMV a month.

As a result, the web UX fell out of step with the app experience both from a feature perspective but also from a branding an UX perspective.

We needed to educate people in our organization about the role web plays in discoverability, acquisition and the value of revitalizing the UX in our web ordering funnel.

About Text

race image

Project Overview

Web Refresh Goals:

• Create a solid baseline and framework for how to design on web

• The website should look and feel cohesive with our apps

• The website should meet AA accessibility guidelines

• Everything we design and build should be responsive and reusable

Web Refresh Goals:

• Create a solid baseline and framework for how to design on web

• The website should look and feel cohesive with our apps

• The website should meet AA accessibility guidelines

• Everything we design and build should be responsive and reusable

Timeline:

9 Months

Timeline:

9 Months

Collaborators:
14 Squads

Coverage:
67 Features

Design system:
24 new components

Before Refresh

Here's an example of one of the most complex pages from the project, the vendor page. We wanted the refreshed designs to include solutions for low hanging UX issues, app feature parity, UI component cleanup and accessibility issues.

After Refresh

The Vendor Team had their own agenda, they wanted to experiment with the header according to some UXR findings they had. We offered to support their A/B test by creating the variations with our refreshed UI guidelines. By dovetailing the two projects, we were able to build a strong relationship with the squad and accomplish our project goals.

Rollout Approach

crawl - walk - run - fly

Foundations

BENTO INFRA

New grid & breakpoints

Animation capacity

z index tokens

Building blocks

BENTO CX

Design & build new responsive web components

Guidelines & documentation

Ownership

SQUADS

Squads design and build new features and updates utilsing the web libraries & templates

Adoption

WEB FOUNDATIONS & SQUADS

Restaurants listing page

Chain listings page

Vendor details page

Home page

Cart

Post order

Checkout

Growth

Location

...

Foundations

We established styles and a grid system as the first step in order to create a shared visual framework to guide layout, alignment, spacing and hierachy decisions across all teams.

Foundations

Foundations

Building Blocks

Adoption

Foundations

Foundations

The design system team partnered with us to create a set of responsive components for the web.

Foundations

Foundations

Building Blocks

Adoption

We established styles and a grid system as the first step in order to create a shared visual framework to guide layout, alignment, spacing and hierachy decisions across all teams.

Foundations

First step was a grid system and styles in order to create a shared visual framework.

Foundations

The design system team partnered with us to create a set of responsive components for the web.

Foundations

Foundations

Building Blocks

Adoption

Foundations

We established styles and a grid system as the first step in order to create a shared visual framework to guide layout, alignment, spacing and hierachy decisions across all teams.

Foundations

Foundations

Building Blocks

Adoption

Team Structure

This project required collaboration from designers from 14 different squads. How does one collaborate with that many designers and come to a cohesive result?

Web Domain: Vision, Grid system & Navigation

Design System: Foundational tokens & UI Components

Feature Squads: Adoption across their real estate

This project required collaboration from designers from 14 different squads. How does one collaborate with that many designers and come to a cohesive result?

Web Domain: Vision, Grid system & Navigation

Design System: Tokens & UI Components

Feature Squads: Adoption across their real estate

Web Domain

Foundations

Customer Experience

Design system

Infra

Customer Experience

Squads

Home

Listings

Checkout

Post Order

Growth

Ratings

Location

Cart

Design System

Foundations

Customer Experience

Web Domain

Foundations

Customer Experience

Squads

Home

Cart

Checkout

Post Order

Listings

Growth

Ratings

Location

About Text

race image

Team Structure

Managing the adoption

Some squads needed more support to get this done, others needed more hands-on control of the implementation. We developed 3 adoption models to suite the various needs of the organization. The adoption buckets were based on "risk". We defined "risk" as: the potential for order loss if a bug were to be introduced. So for example: filters & sorting would be considered low risk but location input would be high risk.

Low Risk Features

Web domain team completed the refresh on behalf of the feature squad (full autonomy).

Example: filters & sorting

Medium Risk Features

Web domain team & the feature squad divided the work and collaborated closely.

Example: dish cards

High Risk Features

The feature squad used our libraries and guidance to complete the web refresh.

Example: checkout

Design Guidance

We hosted onboarding meetings with each designer to walk them through a comprehensive figma file, which included grid templates, page templates, linked web component library and examples of refreshed screens done by other squads.

Principles

Vision - Look & feel

Refresh designs should feel like a natural extension of the app experience.

Accessibility

Accessibility is a top priority, so don't forget to spec the focus order, function and label for each UI component. If your designs are currently using very small text, take this as an opportunity to increase the font size.

Responsive Layout

We are delivering a responsive site, so make sure your design is functional for multiple widths. Utilize the new layout templates & grids in the bento web library.

DS Web Library

The web library is not as mature as the bento mobile library. Core components you rely on in the app may not yet be built for web. Please flag these ASAP.