Designing with Systems
How do we create clarity from complexity using systemized design?
UX/UI Design & Prototyping
Team Leadership
UX Research & Interviews
Stakeholder Alignment
Systems Thinking
Agile Project Management
Market Research & Analysis
Designing with Systems
This case study focuses on how I built a scalable design system and applied it to create a high-clarity dashboard for middle managers overseeing storage operations. Rather than just designing screens, I established a semantic visual language, token architecture, and component system that enabled consistent, accessible, and high-density data visualization.
The dashboard serves as a real-world demonstration of that system, showing how reusable patterns, structured typography, color logic, and interaction guidelines translate complex technical metrics into an intuitive, decision-ready interface.
Deliverables:
Add at the end.
Task
Design a dashboard tailored for a middle manager to help them monitor and manage the evolution of data storage.
Our goal is to provide actionable insights through clear and effective visualization of key performance indicators (KPIs).
Turning this complex data,
Into a clear, actionable dashboard.
Becoming a Subject-Matter Expert
I built subject-matter depth in chart reading, data analysis, and visualization best practices to ensure every design choice supported clarity, accuracy, and confident decision making.
Chart Analysis
I spent time breaking down the data to understand which metrics truly matter to a middle manager. This meant analyzing each chart, identifying its core signal, and mapping it to real questions the manager would ask in their day-to-day. Capacity, growth trends, risk patterns, and usage behavior were translated into KPIs that answer practical questions like:
Are we running out of space?
How fast are we growing?
What needs attention today?
Creating the single Source of Truth
To design with clarity and consistency, I built a design system that became the single source of truth for the entire experience. Tokens, components, spacing, states, and data visual patterns all flow from this system, ensuring every piece of the dashboard aligns to the same structural logic.
Making a Custom Color Scale
I built the color palette by constructing a full scale from one base hue. On the dark side, I reduced opacity to produce richer, more saturated tones for dark UI themes. On the light side, I layered the same hue on a white base with controlled opacity steps to generate lighter tints. Sampling each stage gave me a calibrated, evenly spaced color set. This method prevents visual jumps, ensures accessible contrast, and keeps the palette mathematically consistent across the system.
Turning the palette into a specified color scale
Using the color scale to build the semantic token variables
Every button in the system is built using semantic design tokens instead of raw values. The base, hover, focus, and disabled states are all mapped to alias tokens, allowing the component to adapt instantly if the color or spacing scale evolves. This screenshot demonstrates how tokens become living building blocks that give the system structure and maintainability.
Applying the tokens to components & assets.
Building a Clear Type Sysytem
I established a structured type scale to ensure clarity, hierarchy, and consistency across the dashboard. Since middle managers rely on quick scanning and easy interpretation of dense information, I created typography rules that differentiate system-level headers, section titles, navigational labels, and data values. Each level of the scale is purpose driven and tied to a semantic token, which allows the interface to adapt without breaking visual hierarchy. This creates a reliable reading rhythm and a predictable experience, even as charts, components, and layout density change.
Visual Hierarchy for Font Sizes & Styles
Semantic Typography Variables
Choice of Font
For this system, I chose Inter as the primary typeface. My decision was shaped by both usability and technical performance. Inter is one of the most widely adopted fonts in modern interface design because it is highly readable at small sizes, well-balanced across weights, and optimized for screen rendering.
Why Inter?
Inter performs exceptionally well from an engineering standpoint. Inter loads quickly across devices, supports extensive language coverage, and is available natively on many platforms. This makes it reliable, lightweight, and predictable in real product environments.
Top Design Systems analyzed and studied by @HoonieXP
Inter was used among 16%~ of the Design Systems
https://youtu.be/9w-BwzcuxYM?si=dqUpJ-gdxbQEM-1p
Readability: The Optimal Line Length
To ensure comfortable reading and reduce cognitive strain, I designed the text containers around the optimal line-length standard of 50 to 75 characters per line. Research shows that this range allows users to scan information efficiently without losing their place or experiencing visual fatigue.
The Golden Ratio
The Golden Ratio (1:1.618) is a timeless proportional system used to create visual balance and harmony. I apply it in layouts, spacing, and composition to guide the eye naturally across an interface and establish a clean, intuitive flow.
Iconography Grid
I established a consistent icon language for clarity and scannability. All icons follow a unified grid and stroke system to reduce cognitive load on data-heavy screens.
Atomic Design
Thanks to Brad Frost
I structured the system using atomic design principles, allowing components to scale from small elements to full dashboard templates with minimal redundancy.
Component Variants
Components were built with Figma auto layout and variants to support every state a middle manager might encounter. This speeds up iteration and ensures consistent behavior.
Interaction Specifications
I documented each component behavior meticulously so engineers know exactly how hover, focus, and loading states should behave across the dashboard.
Accessibility
Accessibility was not an afterthought. I conducted contrast and usability audits early in the process and updated the system foundations to meet WCAG AAA criteria. This included high-contrast color tokens, accessible chart palettes, readable type scales, and predictable interaction patterns. By addressing accessibility at the design token level, every component built on top of it automatically inherited compliant, inclusive behavior.
Visual Design Audit
I began with a full visual design audit. I evaluated spacing, alignment, visual symmetry, color usage, and component consistency across the interface. This revealed small but meaningful inconsistencies that affected clarity and polish. I refined spacing scales, unified icon sizing, corrected uneven alignments, and tightened visual rhythm across the layout. These adjustments created a cleaner, more harmonious system that feels intentional and precise at every touchpoint.
Onboarding/
First-Time
User Experience
To support first-time users and reduce cognitive load, I designed a short three-step onboarding tutorial that highlights the key sections of the dashboard. Each step focuses on one core area, explaining what the metric represents and how it helps decision making.
This guided walkthrough gives users quick context, builds confidence, and ensures they understand how to navigate and interpret the dashboard before they land on the main view.
Designs
I established a consistent icon language for clarity and scannability. All icons follow a unified grid and stroke system to reduce cognitive load on data-heavy screens.
Usability Testing
For the usability and ethnography study, I selected a small group of participants from my network who already had familiarity with similar dashboard tools. This allowed me to observe realistic behavior and decision-making patterns. I provided them with a set of scenario-based questions mapped directly to the core user needs and asked them to find the answers using the dashboard. Throughout the session, I analyzed how they navigated, which elements they relied on, where they hesitated, and how confidently they interpreted the metrics. This helped me understand both their behaviour and the clarity of the design, guiding refinements that improved usability and reduced friction.
