White Label App
Shaype Accelerator App
Shaype is a Banking as a Service platform that allows businesses to quickly launch high quality digital retail banking experiences. The platform API provides a range of unique embedded finance solutions, and to help clients deliver MVP’s to market faster, the demand for a white label / accelerator app grew as we scaled.
I was responsible for the conception and development of the white label app setup and design system, which became part of the core framework for how brand specific versions of the banking solutions were rolled out.
DEC 2021 – JAN 2022
IOS & ANDROID
DESIGN APPROACH
The Shaype Accelerator App was built with an inherited design system, that could be modified with customised design properties from clients brand, and instantly deployed throughout the interface design of the product.
DESIGN SYSTEM SETUP
The UI library and exportable design system was built in Figma.
It was setup with Foundations as the base, that then informed the Components and smaller UI elements, that were composed into Patterns in which actions are performed by the user.
Foundations
The Foundations are the base of the design system, and is informed by a Brand Identity.
These include, but are not limited to: logos, branded items, colour scheme, typography and grids.
Components
Components include all smaller UI elements that are used to build the product. The design features are dictated by the set Foundations.
Examples include: buttons, form inputs, selects, text areas, check boxes, toggles, images and icons.
Patterns
Patterns are larger building blocks composed with elements taken from Components and Foundations.
These are typically used throughout the product to keep consistency for modals in which actions are performed.
DESIGN DECISIONS
The white label app was based off Shaype’s retail bank app, Hay. To protect IP and keep the Hay experience unique the branded elements such as brand colours, brand voice/language, iconography and imagery had to be replaced with more neutral language, placeholder indicators, and interchangeable brand colours and icons.
ORIGINAL SCREEN
WHITE LABEL VERSION
CONCLUSION
After the White Label UI library and design system was setup and packaged, it was handed over to the development team to build before delivered to the first client. The comprehensive nature of the design system build allowed for an efficient fast-tracked app development.
