Take a look
Currently, the design system is built using a tool called Zeroheight. You can take a peek at what is live now by clicking here.
At Storyblocks we like to use the term "North Star" so we coined and named our design system after it.
Zeroheight allowed us to provide the broader team access to branded/approved assets and documentation. It provided us with an excellent way to share our values and design system while allowing marketing and engineering solicit feedback to promote collaboration.
The Challenge
Why did we need one?
At the beginning of working for Storyblocks, my design process was repetitive, painful and unproductive. As a team of two designers, we were spending too much time digging for files or recreating elements that we could reuse.
After our rebrand and launch in Aug 2017, the lead designer and I took the opportunity to create a design system since we were starting fresh with a new brand and look.
Overall, we knew that by creating a design system it would make us faster, better and consistent in the long run.
Some of our favorite sites we pulled inspiration from
Google's Material design
Shopify's Polaris
Material.io
Atomic Design by Brad Frost
Benefits of creating one...
- Saved us a lot of time
- UI consistency leads to increasing brand trust with customers and trust within Storyblocks
- Reduced ambiguity and complexity
- One source of truth
- Enabled and facilitated collaboration
- Created a foundation for further improvement
Results
- Made our team more organized
- Intuitive naming convention between design and engineering
- Variations of different symbols and states (dynamic and nested)
- Followed Atomic Design Principles
What I learned
Creating a design system, taught me several things
It gave me the opportunity to hone my Sketch and Figma skills, study some of the best design systems currently in use, and collaborate with colleagues who I normally didn't get to work with on a regular basis.
In the beginning, there was resistance to dedicating time to create a design system. Over time, it quickly began to pay off once other colleagues saw the benefit of having a single source of truth. This reduced frustration and reduced the amount of time designers spent trying to find or gather assets for other blockheads.
Overall, I learned the value of having a design system by not having one, needing one and creating one.
EVERGREEN PROCESS
Like a living organism, the "North Star" Design System continues to evolve
The design team and myself would create new components, documentation, implement updates or new components in new projects, discuss with engineers for implementation.
We would hold Design System team meetings once a month to discuss new components, cleanup process and next steps. Repeat.
Check it out here.
