The design of a white label app is based on a modular principle, combining several components within the basic app. A reusable component is the key to building a scalable digital product.
Essential to keep in mind when designing for the white label app is scalability of user interface and scalable design systems. It makes the product easy to maintain, flexible and extensible, when required.
Components, smaller parts used throughout the entire application, make up scalable user interfaces(s). These can be anything from the straightforward components such as text styles, buttons, cards, and icons to more complex ones like input fields, switches, radio, and checkbox lists, and even a login page. These are used throughout the entire digital ecosystem, not just within a single product.
The components that facilitate reusability are played out when scaling the architectures. Without the trouble of making it one at a time, the modifications can be made and applied to all the components. As a result, a component’s design and the code will be easier to maintain as changes can be made in a single location, and errors can be fixed more quickly without worries about additional regression problems.
This approach makes user experience uniform, and UI predictable and logical. As the components inherit from one another, so do their behaviors, enabling consistency among designers, speedier development among developers, and quicker adoption of behaviors by the end users.
The size and customizability of the component must be considered in order to maximize its reusability. The component is more reusable the more adaptable it is. The secret to reuse, then, is to construct smaller components. The likelihood of the component reusability and serviceability in numerous circumstances during the construction of the larger component increases with its size.
As more components are built, it might be worthwhile to developers to maintain a component library. The extensive component library will ensure that when there are new requirements coming in, the components would be the natural choice in extending the code, speeding up and optimizing development even on an extensive code base.
The OBLO client applications are designed to be easily rebranded. The application uses 12 base colors to be applied to wire screens to get a fully branded application.
We have had to be quite specific about how we manage the colors on our user interface. Rebranding an app is more difficult than simply changing the colors, as anyone who has done so can attest. There are numerous situations where this strategy fails.
Over the course of several months, we have introduced and tested dozens of unique color tokens. When used with specific UI elements, these tokens give us complete control over accessibility and the outcome.
The OBLO apps could be rebranded by simply changing the color values on the API after applying our color tokens. This increases the process by five times, improves the outcomes, and guarantees accessibility.