Design system
Framework for a design system
The system I worked on is a web application called WIS, a portal for Sweden's civil preparedness provided by MSB.
Timeline
From explorations to final design in 3 months while working with multiple projects at the same time
Background
The objective of this project was to develop a framework for the existing design system using Atomic Design, creating a solid foundation for ongoing collaboration between designers and developers. The design system needed structure to improve manageability and support future development and maintenance.
My colleague and I studied Atomic Design and major design systems to develop a documentation strategy using Atomic Design principles.
We conducted a UX audit of the existing design system, focusing on color palettes, fonts, and spacing ratios. This revealed inconsistencies in padding, margin, and radius.
To address this, we implemented an 8-point grid for variables and removed unused colors from the palette.
Design & Prototyping
We drafted a proposal for the design system documentation. This resulted in a prototype detailing component anatomy and guidelines for correct and incorrect usage. We also documented styles within the system, including grids, typography, colors, and effects.
Feedback & Iteration
We consulted with three developers to understand their documentation needs for the design system.
Using a Miro document, we discussed experiences, the existing design system, and their wishes and needs. We filled this out collaboratively during the interviews and presented a draft of the component documentation for feedback. This data helped identify the developers' key needs.
Implementation
Challenges
The challenge in this project was to understand what we had to work with and how to create a structure for a large design system that lacked one. We spent considerable time examining other design systems and drawing inspiration from various sources to develop a framework that suited WIS.
Lessons learned
There's a quote from Finding Nemo by Dory that says when things get tough, you should "just keep swimming." At the beginning of this project, progress felt sluggish; we couldn't find a documentation approach that suited WIS's design system. However, once we realized that everyone approaches things differently and it's perfectly fine to adapt methods that fit our design system better, things started flowing more smoothly. The lesson I take away from this project is that there's no one-size-fits-all template; it's okay to do things in your own way.