A Donut for everyone
Intro
Donut is a design library that aims to help the Studio design faster, better, and with more fun. It's a design system starter pack. A flexible component library in Sketch. A donut for everyone. I am in the team of 5 designers to build this studio-wide library and continually maintaining it till today.
Meet John
John is a designer who loves design. However, John is not happy because he received a last-minute design change request on fundamental interactions after he delivered the final visual design. He wishes that he got that piece of feedback sooner. "I don't like how I have to start everything from a blank canvas when working on a short timeline." 😔
The Needs
We've identified the following needs across the studio for a more consistent and efficient way to visualize design concepts:
1. Wants to feel empowered to produce high-quality & consistent design work across the Studio
1. Wants to feel empowered to produce high-quality & consistent design work across the Studio
2. Hates designing text input boxes, over and over (and over) again
3. Wishes to receive feedbacks on interaction earlier in the design lifecycle
So we decided to create something useful instead, and it should help:
Start with 8-point grid and editable column system
A peek into the components
We looked into the existing design systems and list out the commonly used components. We prioritized the ones that are frequently used by our major clients, i.e. tables and data visualization. (What is a Donut without a donut chart, right?) The components are flexible and responsive to the size and text within it, built by the nested symbol system on Sketch. One can easily create a landing page or a data dashboard by putting the components on an artboard, resize them, enter copies, and change the theme color. It can be easily discarded and re-build from scratch without overly disrupting the design process.
It's also a great resource for bringing the team together on a project. Before investing time, resources and money on a complex high fidelity wireframe, stakeholders, designers, and developers need to agree on the essential components and functionality to avoid rework later on.
The consistency that comes with using Donut is one of our targets as well, making sure the quality and visual language that is used across the studio are aligned.
To maintain Donut, we created a shared online board for everyone to report any issues, make a wish for a component that they want. We will keep improving and expanding the design system to serve a better donut. 🍩 Thanks for reading this article!
