White Label App Design System

Design System | Mobile | 2 months

Project Overview

Brightloom is a technology company powering other restaurants’ digital ordering experiences by providing white-label kiosk apps and mobile apps. I worked on-and-off for two years on a rebrandable, scaleable, and accessible design system.

My Contributions

Initiated and led the design system
Worked with engineers to build the UI library
Deployed design system to clients

Challenges

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build a variety of applications. As a design system for restaurant white-label apps, it needs to be highly rebrandable, accessible, and flexible.

Rebrandable

Accessible

Flexible

Restaurants should be able to bring their own branding to the system instead of compromising to fit within the system.

To support consumer-facing apps, the design system is compliant with WCAG AA standards before and after rollouts.

The design system can support different restaurants’ menu structures and customization models through configuration rather than re-engineering.

Framework

Instead of jumping into identifying every component in our current apps, I decided to take a step back to think about the entire framework and figure out a way to build a robust and scalable system.

Following the atomic design methodology, I decided to break the system down into three levels: Elements, Components, and Patterns.

Elements

Components

Patterns

Separating the system into 3 layers helped me isolate each restaurants’ unique branding from other concerns. This way, I won’t have to start from scratch every time a new restaurant buys our apps, nor will I produce individual components that are too rigid and compromise restaurants’ branding.

Elements

Elements lay the foundation for the entire design system. This layer includes colors, typefaces, grids, and spacing. Using a title as an example, its color, font size, font weight, line height and spacing come from the elements system. This way, I can prevent inconsistencies in final designs.

Color

Typeface

Spacing

Color system, not palette

Colors not only define the look and feel of the entire interface but also communicate visual affordance to users. I wanted to create a color system that allows every restaurant to apply their own color palette instead of just one or two colors. Hence, the primary color palette is made of colors with clear and actionable meanings.

Primary color palette

Primary
show restaurant branding and indicates actionable component like buttons and links

Destructive
communicate an error or a destructive action

Warning
convey information that may require special attention from the user as it may affect their decision making

Messaging
display important information and maintain information hierarchy

Restaurants’ branding colors will be applied to the primary color palette during rollouts. However, most restaurants’ branding style guides have colors that express the branding in marketing materials but aren’t intended to be used for UI elements. I set up a color contrast test to make sure the rebranded app will be WCAG AA complaint.

When branding colors didn’t meet the requirements, I worked with designers from the client to tweak the hue, saturation, and brightness to come up with a new color which has a better contrast ratio but is still in the same family as the old one.

Components

Components are made of elements and perform a well-defined function in the application. In my definition, a component can be a button, page title, etc. For example, when a primary CTA button shows up on the screen, it guides users to the desired action.

Components

Build components with elements

Using buttons as an example

Buttons allow users to make choices and take actions with a single tap. When there is only one preferred actionable target on the page, use the primary button style. If there are multiple actionable targets, using primary buttons can be confusing and overwhelming.

Secondary buttons are used when there is more than one actionable target on the screen, such as an item list view showing 2+ items and the interface cannot predict which item is the most common choice.

Primary buttons
‍
When the entire page is mostly about confirming pickup time, the confirm action uses the primary button style

Secondary buttons

There are multiple items in the same page and there's no single clear choice. Use the secondary button style to leave users breathing room.

Unlike other components, buttons have more rebranding concerns. For example, some restaurants want rounded corners and some prefer the modern feeling of sharp corners. I made sure our system could be configured to support the most common needs.

Patterns

Patterns are well-assembled components to support certain features, which promotes logic and consistency across all the products.

Patterns or modules are an especially useful concept for a white-label app. When facing different restaurant menus and customization models, instead of redesigning the entire item detail interface from scratch, we can just change some configuration and keep the rest of the app the same.

This way, the design system can not only support a more agile product development process for designers but also support more rapid restaurant onboarding for engineers.