Building a white-label app for a multinational retail company can be a game-changer in today's competitive e-commerce landscape. In this article, we'll explore the innovative approach taken by AH, Gall & Gall, Etos to create a strong omnichannel strategy and boost customer loyalty.

As an integral part of any successful e-commerce venture, building a white-label app is crucial for reaching more customers while reducing development efforts. The key lies in creating a personalized experience that sets your brand apart from the competition.

In the world of retail, where 80% of functional eCommerce apps share common features, offering a unique and engaging user experience becomes even more vital. By leveraging white-label solutions, retailers can focus on their core business while leaving technical aspects to experts.

What is White Labeling?

White labeling is the process of rebranding a single product for multiple companies to sell as their own. This approach allows each company to concentrate on its marketing and branding efforts without worrying about the technical aspects.

To make white-label products work efficiently, it's essential to have a design system that ensures consistency and avoids redundancy across various pages and channels. A well-designed system should be flexible, brandable, accessible, and scalable.

Setting Up the Project

When building a white-label app, identifying user needs and discussing business requirements is crucial for kickstarting the project effectively. Benchmarking other eCommerce apps helps in prioritizing tasks and setting up a research roadmap to ensure smooth progress.

Challenges and Opportunities

As with any complex project, there are challenges that arise:

Silos between Brands and Departments

Our approach: Introduce a systemic way of working, assign roles, meet every week

Maintaining Design Quality and Development Pace

Our approach: Document as many decisions as possible to keep track of improvements

Balancing User Research and Quick Decisions

Our approach: Set up a research roadmap, and plan activities for every new feature

Designing the Backbone of the Apps

Simple wireframes guided our direction. With a rough project roadmap, we started on user stories while development set up the platform.

Theming Framework – Building to Scale Up

The system is based on design tokens to function. Design tokens represent small, repeated design decisions that make up a design system's visual style. Tokens replace static values with self-explanatory names.

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

Components – The Building Blocks

We designed unstyled components, ready to be themed through tokens, starting with the smallest (buttons, labels, lists, ...) up to the more complex ones (product cards, banners, menus, ...). All components were documented, from anatomy, usage, variants, states, motion, properties, and accessibility.

Workflows / Features

Focusing on core functionalities from a White Label perspective, we avoided brand-specific distractions. This increased our speed, consistency, and clarity in communicating stories to the development team.

Documentation – The Anchor That Holds It Together

Thorough documentation is crucial for a design system. Every decision, component names, versions, parameters, tokens, and behaviors were recorded in Figma files and in the storybook, fostering a perfect sync between UX & Tech.

The Storybook – Where Designers and Engineers Meet

We ensured team alignment with a UI gallery showcasing each foundation and component dynamically, documenting their design and code names, parameters, and behaviors.

Multi-Platform, Multi-Device Support

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

Impact and Lessons Learned

In eight months, we built a white-label system from scratch, created 8 apps (2 platforms x 2 brands x 2 devices), launched, tested, and improved 10 major features. We learned to:

  • Fully document and version each component of the system
  • Take the role of 'system guardian' to ensure consistency and maintainability
  • Manage a roadmap of research and features

What's Next?

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