White label app hero image

Building a white label app for a
multinational retail company.

Date

July 2022 - Now


Brands

AH, Gall & Gall, Etos



Tools

Figma, Token Studio, Jira, Github

In 2022, the multinational retail company Ahold Delhaize increased the collaboration between its dutch brands to take a leap in its omnichannel strategy. By building a strong White Label eCom platform, brands can reach more customers while reducing their cost & development efforts.

🛠 Ongoing project

Our team is busy with the development of new features, usability testings, and system maintenance. Stay tuned for more details in the coming months.

Overview

In the retail industry, competition is fierce due to the thin margins. On the other side, eCommerce Apps share 80% of the same functionalities. The opportunity to reuse features is therefore huge.

In a year, our team launched two apps and introduced multiple features. As the principal designer working with a team of 12 developers, I was responsible for overseeing the operational implementation of the features and the system to ensure a consistent and unified User Experience across all the apps.

Project image

In numbers

120+

components

Fully documented & aligned with devs.

2📱

succesfully launched

From intake to growth within 1 year.

+200K

App customers

Within a year for Gall and Etos combined.

+90K€

extra revenu

For the 2 brands, 6 months after release.

Context — What is a White Label product?

White labeling is the process of rebranding a single product (or service) for multiple companies to sell as their own. This way, each company can focus on its business and marketing efforts without being concerned by the technical aspect.

To make it work efficiently, a White Label product needs a design system to ensure consistency and avoid redundancy across various pages and channels in a standardized approach.

Instead of manually changing the same element in multiple files a design system allows for automatic updates throughout the application by just changing a single instance. To have a white-label design system makes it flexible, brandable, accessible, and scalable.

Discovery — Setting up the project's playground

Although we had limited time, a basic benchmarking of other eCommerce Apps, assessing user needs, and collecting business requirements & priorities proved to be essential to set the project off right. We also scrolled through numerous design articles, Material 3 documentation, and other blogs and resources to gain additional insights into various aspects of a white-label system. This ultimately helped document our activities and learnings throughout the project.

Project image

Challenges

  • Natural silos between designers from other brands and departments
  • Maintain the development pace and the quality of the codebase
  • Make time for user research while making quick design decisions

Our approach

  • Introduce a systemic way of working, assign roles, meet every week
  • Try to document as many decisions as possible to keep track of the improvements
  • Set up a research roadmap, and plan activities for every new feature

Early sketches — The backbones of the Apps

Simple wireframes helped us investigate and decide on which direction to take. With a rough roadmap of the project in mind, we were then ready to start with the first user stories while development was busy setting up the platform.

Project image

Theming framework — Build to scale up

🤓 Let's start with the definition of a (design) token.
"Design tokens" represent the small, repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for color, with self-explanatory names.

Tokenising the UI allowed us to standardize our components and speak the same language between designers and developers. Defining and documenting these tokens/rules together was key to ensure efficiency and consistency.

Project image

➊ Foundations

To make our system scalable, we had to design and code strong foundations. These would serve as a framework to build more complex components.

Project image

➋ Components

We started with the smallest components (buttons, labels, lists, ...) and combined them to form progressively more complex components (product cards, banners, menus, ...).
By pricisely defining how each components should look like and behave, we coule eventually define the core parameters of it, while allowing some very exceptional overrides (thoroughly documented for future improvement).

Project image

➌ Workflows / Features

By thinking about features and workflows from a White Label perspective, we could focus on the core functionalities without being 'distracted' by each brand particularities. This helped us to gain speed, be consistent, and communicate clearly the stories to the development team.

Project image

Documentation — The anchor that holds it together.

We can't say enough how important documentation is for a design system. From the name of the component to its version, parameters, tokens, and behaviors, every decision was documented in the Figma files and the storybook for future reference. This is also where conversations between UX and Tech often began on building & evolving the system.

Project image

The storybook — Where designers and engineers meet

How to ensure that all team members would speak the same language? By using a UI gallery that showcases each foundation and component in a dynamic way. Their (design & code) names are documented, as well as their parameters and behaviours.

Project image

Multi platform, multi device

Thanks to the Flutter framework, solid foundations and reusable components, the apps are available for both iOS and Android, and for mobile as well as for tablet.

Project image

Impact

  • Defining a (design/white label) system from scratch
  • Created 8 apps (2 platforms/2 brands/2 devices) in 8 months
  • 10 major features launched and tracked

Learnings

  • Full documentaion and versioning of components
  • To take the role of 'system guardian' to ensure consistency and maintainability
  • To manage a roadmap of research and features

What's next now?

The Apps will continue to evolve, keeping as many common features as possible, but differentiating where impact is big, through CRO, business demand, and other usability test