White label design system for data-driven apps
Context
The design studio I collaborate with tackles 4-6 product proof of concepts every year, most of those are data–driven and consist of data tables and data charts.Here's the catch: the short deadlines are usual requirement for these kind of projects, which means that the engineering team is constantly wrestling with various frontend libraries, making endless custom tweaks – often without a designer in sight.
Challenge
The engineering team needs a component library and Storybook to ensure development rock-solid consistency and help the tech team level up their frontend game the quality of their deliverables.Additionally, we aim to build a system with clear white-labeling rules that would help the design team quickly apply branding and perform rapid design QA, especially when deadlines are breathing down the necks.
Diving Deep
To solve this puzzle, my team went full detective mode and started by analyzing the agency's past projects to uncover the most commonly used patterns by the engineering team. We sat down with the engineers, diving deep into their workflow, bottlenecks, and challenges. These interviews were gold mines of insight. In essence, their main request was straightforward: "Take our preferred libraries, apply a consistent visual style, and create one coherent component library where each component has well-defined states, behaviors, and scaling rules."
Functional Patterns
After meticulously examining functional patterns from our interface inventory, we crafted a component library roadmap. Each component was carefully structured, defining its variants and design architecture with precision.
Look & Feel
I knew the design needs to walk a tightrope of balancing the neutrality with an easy way to add a bit of digital or business vibe to the interface. The visual style should:The design should provide a quick and simple way to update the color palette and incorporate brand identity elementsThe look and feel should be able to easily accommodate typeface change when neededThe interface should remain neutral enough to keep users focused on the data.
Typography
My research revealed something interesting: most clients requesting proof-of-concept designs were either SaaS companies or traditional enterprises diving into digital transformation. The typography needed to strike a delicate balance – professional yet approachable. Enter Inter: the safest choice that balances business with digital and ensure legibility. Additionally to that, I used a combination of 2 icons packs - sharp functional icons by Materials and more playful outlined decorative icon, so that the interface could flexibly shift between corporate and digital vibe depending on how the typeface changes.
White labeling
The white-labeling rules include 4 ready-to-use color palettes for immediate application. This section of the design system documentation also draws from preliminary research into the agency's clients' brands and industries.I developed four ready-to-use color palettes, carefully tested to reflect the diverse brand landscapes of the target projects. This allowed instant adaptability for the majority of use cases.
Grid & Scalability
The grid system and breakpoint decision came from the intensive workshop with business stakeholders. These revealed that the primary use case for this type of project is pitching product concepts on high-resolution monitors.This insight led us to a need the design system to scale up to 4K monitor resolution in addition to the default desktop resolution.
The Handoff
Every design decision was meticulously documented in Figma variables and component tokens so that the engineers could easily grab and use them in code. This wasn't a one-and-done deal – it's an ongoing collaboration, so we continuously refine the tokens and other details with the engineering team.
Let’s get your project started!
If you have a business request but are not sure what exactly is needed from a design perspective, contact me—I'll help evaluate it and find a custom design solution.
schedule a call
