Getting from point A to point B in the design system lifecycle requires an adaptive framework. For the first time, I'm introducing the SHELL framework. π₯ π β‘οΈ
It takes a village to build a design system, and no organization is the same. Some can afford bigger teams, while others try to start something with only one designer. The needs are different, and the experience in building design systems varies greatly.
I was thinking about how to summarize the never-ending process to the clients. π€
With the SHELL.
π SHELL, literally the shape of the seashell, is a logarithmic spiral. The spiral never stops; it repeats in an ongoing loop. The pattern is self-similar across different scales; that's why it serves as skeletal support and forces you to move and upgrade. π
It doesn't end when you finish your User Interface Design or do five user interviews. It doesn't end when you create your design tokens or make a Figma UI kit. There is no last line in the code. There is always room for improvement.
Here's what I mean:
π S stands for SCOPE.
Design audit first, scope second. Define what you want your finished system to include. Not all design systems are the same β some are relatively basic, and others are much more advanced.
π H for the HUB.
Your design system is more than a collection of reusable, shared assets. It is an adaptable system of foundations, patterns, guidelines, components, and tools. It is the center of all your activities and combines the best practices for creating products.
π E stands for EXPERIMENTING, ENGAGING, and EVOLVING.
Design systems have enormous potential to help elevate the creation of digital experiences for your company. To achieve that, you need to experiment a lot. Like - A LOT! One iteration will never put you out of the box.
π L stands for LEARNING.
Learn from all the observations. Don't be afraid to steer the wheel in the other direction when things are not going as expected.
π L stands for LEADING the way.
Every system needs a leader who has the vision to see things in the future and the ability to push them into reality.
Otherwise, everything becomes like playing Tetris - just trying to fit in.
Recap?
Sometimes one phase will take you much more than expected, and sometimes you will pass faster. What's important is that you don't stop evolving.
However, before going deep into design systems, you must have the product-market fit. Why? Because you will need resources to scale.
I will write in more detail about the framework on my blog soon. Stay tuned. π
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
Bite-sized lectures are full of hands-on tips and tricks, written in simple language, so you can start implementing them immediately in your work. The prototype is clickable, so you can use it as a checklist.
Table of contents:
β Where to start (PUBLISHED)
β Design Audit (PUBLISHED)
Structure of the design system
Design Tokens and how to use them effectively
Planning, Roadmap
Collaboration
Adoption
Metrics
Resources