Whitelabel Design System
Duration
2 months
My role
Lead Designer
Completed
2024
Technology
Figma
Background
I created a whitelabel design system for Microsoft Power Apps as a response to key challenges our team was facing. Many of our developers had limited design experience, making it difficult to ensure a consistent and high-quality user interface across projects. Additionally, the out-of-the-box elements in Power Apps didn’t fully adhere to best practices, which left gaps in our design standards. By developing this design system, I introduced a comprehensive set of customizable components that enabled our team to build with consistency and efficiency.
The impact was transformative: developers could now confidently work within a framework that met accessibility and design standards, which significantly cut down development time. This approach not only improved our product quality but also allowed us to deliver polished, user-centric experiences faster, ultimately benefiting both our team and the end users.
How it works
The design system is built in two places — one version in Figma, that handles all visual design and acts as one-source-of-truth, and one version built in Microsoft Power App, that can be downloaded and re-uploaded into a new project, allowing the developer to use and configure all the components. The components in the two files are identical. In this case study, I will be focusing on the Figma version.
The file is built like a classic design system. The pages are divided into three categories – Best practice, Foundations and Components.
“Best Practice” contains the general usage guidelines, such as how to download the .ms-file, explainers on terminology, change logs, version history and who to contact for maintenance or expansion.
“Foundations” contains the elements that all components are built upon — colors, typography, spacing etc. “Foundations” is what controls the branding of the elements. Everything in “Foundations” are set as styles or variables, meaning that if one changes the color in the “Colors” page in “Foundations”, the change will reflect on all components in the design system — making it super easy to quickly customize to the individual brand.
Lastly, “Components” contains all the elements/components. Currently, the list includes alerts, avatars, buttons, cards, checkboxes, combo boxes, input fields, list items, navigation, pop-ups, spinners, tabs and toggles.
The terminology used in Figma matches Microsoft Power Apps, to reduce confusion when working in both files — meaning that a classic “multiple select dropdown” has been renamed to “combo box”, to match MSPA terminology.
Components
All components in the design system are designed and built to handle many different needs, states and error scenarios. The components are built using variables, so that when designing with them, they’re easily adjustable via toggles in the right hand menu — so instead of having 16 different “input fields” in the Assets, there’s only one that is customizable. In this scenario, the user is able to toggle on/off labels, hints and placeholders, to create the specific input field needed.
On, for example, a button, there is also just one asset. The asset can be switched between Primary, Secondary or Tertirary button, all of which has different Active/Disabled states.
Documentation
To ensure consistency between design and development, all components are heavily documented. Each component is documented in “Anatomy” (above example, left and middle) where each component is broken down and its’ design described. For colors and fonts, the anatomy descriptions uses Tokens linked to the Foundations of the design system.
Documented is also “Variants” (above example, right) where usage of each variant/style/state of the component is explained and described, to help non-design-users choose the right component.
Lastly, “Best Practice” is documented (not pictured), that gives advice on which scenarios to use the specific component, and what other components to use if the specific one doesn’t fit.
Launch
The design system was finished and tested in February of 2024.