Design System
Design ops
Project overview
Our collaboration with this client began in 2019. From the start, our approach was mostly reactive: the client would reach out to kick off a new project, usually after identifying an internal business need and designing a corresponding data model. In some cases, they had also done some preliminary research to define the business hypothesis.
At that point, our role was to gather the available information during the kickoff, analyze it, and quickly translate it into a user interface, essentially creating screens to bring the data model to life for an end user we knew little about.
Over time, it became clear that a more structured design approach could significantly boost our efficiency. This included establishing user and style guides, creating reusable patterns, defining grids and layouts, and systematizing our processes.
Internally, we also recognized the need to break down knowledge silos. We wanted to ensure that insights and learnings from one project could be shared across the team, helping us refine our processes and build a more cohesive approach to recurring design challenges.
By the end of 2021, it was evident that systematizing the way we work wasn’t just helpful, it was necessary.
The goal
The goal of this project is to develop a design system for creating data visualization tools within the Power Solutions product
My role
Product designer/design system manager
Team
x2 product designers
Client
A consulting firm
of the energy sector*
*Due to NDA reasons this client
cannot be mentioned
Time
1 year
The challenge
At the start of this project, we found ourselves in a moment of uncertainty and divergence. New challenges were emerging as a result of our existing workflows. With the team continuing to grow, it became clear that we needed a stronger internal structure: one that would support the free flow of information, encourage shared learning, and ultimately lead to systematized knowledge.
Our goal was to identify repeatable processes as they surfaced in new projects, share them with the team for analysis, align on standardized solutions, and integrate those solutions into a unified design system.
Step 1: analysis
The first step was to analyze all the tools developed up to that point. We looked for common processes across them, examining their content, structure, and navigation. After completing the analysis, we organized our findings on a shared board, created diagrams to visualize key patterns, and drew a series of conclusions to guide the next steps.
Step 2: conclusions of the analysis
Two key insights emerged from the analysis phase:
The need to establish a team structure that mirrors that of a product team.
The need to develop a Design System that would act as a bridge between our product design team and the client’s four development squads.
Step 3: proposal for a new team structure
We need to establish an internal team structure that enables us to share and build on the knowledge gained from each project. For the product team, we propose a structure designed to be circular and iterative, supporting continuous improvement of both the product and our processes.
Step 4: creation of the DS
Before entering the production phase, we create a roadmap outlining the key deliverables for the development of the Design System.
EPIC 1: Foundations
The System Foundations document includes:
The grid system for all defined breakpoints and their behavior.
The typographic system, with all typographic scales.
The color palettes used throughout the system.
The spacing system, based on the 8-point rule.
Marking guidelines to be followed within the system.
Specifications for shadows, opacities, and spacing.
Border and radius guidelines.
The icon library.
EPIC 2 and 3: components library
The second phase in creating the system focused on developing the component library, which consists of 40 components. Each component includes the following:
The asset designed in Figma
A corresponding documentation sheet
Deployment in a Storybook
Each component's documentation sheet provides detailed information, including its intended use, anatomy, spacing guidelines, alignment instructions, content specifications, and more.
EPIC 4: patterns
Epic 4 focuses on creating the patterns to be used within the system. Some of the key patterns include:
Navigation pattern
Login pattern
Notification pattern
Overflow content pattern
Search pattern
Forms pattern