FlexyBox provides white-label solutions for business. I was helping company with multiple new SaaS products in Online ordering, Booking, and Reservation directions.
MY role n' responsibility
Team Lead, and Product Designer, responsible for System Information Architecture, white-label Design System, Wireframing, Prototyping, and User Testing.
ordering direction scope
Design a cross-platform app, for a highly customizable, white-label app, for online ordering. Design a flexible app structure to combine different units for different business needs (tears).
long term vision
Online ordering app was just one of a multiple white label apps that customer could choose from and adapt to brand.
Eventually user should be able to create and configure such apps on his own, via web interface.
A white-label app that optimizes ordering and payment process for business and improves customer experience.
One of the key features of the app was that it was a white-label product, meaning that every business could adapt the app to their brand, providing users with a seamless experience. Similar to Uber Eats, the app enabled customers to easily place orders and pay through their mobile device, while businesses could manage orders and inventory in real-time.
Additionally, the app allows restaurants adapt due to COVID-19 limitations, such as social distancing and limited capacity. The project aimed to provide small businesses with a simple and efficient solution for managing their restaurant ordering process, helping them to stay competitive in a challenging market.
Flexible information structure
One of first steps was to set a flexible information architecture, so businesses with different needs can decide if the need or not certain pages in app.
As an example, some restaurants want to allow users create an account, when some don't. The same logic applies to Promo, Settings, Profile, Memberships, etc.
Before jumping into design, we created all possible app flows in mind-map tool, to define possible combinations.
We also defined 4 navigation arias, like Nav and Tap bars, More and Home pages, as placeholders, where different flows could be placed in UI.
White label approach
Once we defined main flexible structure, layout, etc., time came to apply styles.
Since styles going to be changed from customer to customer, we had to define what and how can be customize. First step was to apply basic style which contains all the colors, images and fonts.
Next step was to go through main layouts and decide what specifically can be customized.
All white label providers usually allow to set Colors and Fonts, but we wanted to give more than that. Here I came up with idea to allow choose layout style - elevated, flat, or stroked.
Once everything was defined, we were ready to start design system that supports all variables.
In the foundation we put Atomic Design System, where organisms and templates had variations to support flat, elevated and stroked layouts.
Next layer was an extensive style guide which contains variables that inherited props from main palette, that was defined by business brand book.
Style guide had two levels, one general/system and another branded. Branded guide was inside design file.
With all that set, when we had pre-sale branded app, we duplicated design file with its local style guide, modified brand assets, and just like that in 15 min we had a newly branded app.
Accessibility issue
One of the customers had a very light yellow brand color. By rule main brand color is used for CTA elements, but this way contrast becoming so low, that it's becoming not accessible for reading in UI.
Since this process of color application to the app should be automated later on, our job was to ensure we prevent users from setting bad accessibility.
