Building a white label app for a
multinational retail company.

Overview

In the retail industry, competition is fierce due to the thin margins. By offering a personalized experience, companies can send more relevant content to customers, while improving their loyalty. On the other side, eCommerce Apps already 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.

In numbers

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.

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.

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.

➊ 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.

➋ 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).

➌ 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.

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.

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.

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.

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