A Design System documentation for Designers — DesignBlocs
We recently designed a design system that is visually relatable, and tailored just for designers — majorly, newbies in the design world who don’t know what a design system represents (or how to utilize it); with simple illustrations, specifications, and pointers, the first version of DesignBlocs was rolled out to the public on August 05th, 2022.
A Design System is an important part of any solid product experience as it represents and houses the foundations upon which the entire product is built, from spacing, colors, and typography, to buttons, navbars, and animations.
Our goal for this project is to ensure that designers understand how to create, and use design systems for any project they might work on.
My Role — Lead Designer
The Team
The team that worked on DesignBlocs consisted of about 200 designers from over three different countries: Nigeria, Egypt, the USA, India, Ghana, and the UK (these I can recall).
The core design team was made up of myself, Unwana Ekpombok (Lead Designer), Katelyn (Katie-Mae) Mensah (Lead, Content Design), Emmanuella Briggs (Lead, Iconography), and Rex Joshua Ibegbu (Lead, Interaction Design).
The Problem
Looking at existing design systems, we realized that they are tailored to the needs of devs; although they seemingly are for designers, they cater more to the devs, so we decided to build out one for designers with illustrations and simple specifications.
The Research
We started out trying to understand the struggles (or ease) designers experienced when using design systems and we got 82 responses overall to the survey questions we put out; from the responses, these were our findings:
- 93% of designers stated that they knew what a design system was, and have used one.
- 97% use Google’s Material Design.
- 30 persons said they were confused by the system, 28 were not sure of their experience with the design system, and 20 had fun navigating through the system.
- 54 persons wanted a less confusing design system, with illustrations and specifications.
After getting these responses to the survey, we researched ways to tailor DesignBlocs so it solves this existing issue for designers (in particular).
The Solution
We went over a couple of documentation sites, like Carbon Design System, Material Design System, etc., and decided to use the layout present in the Carbon Design System for DesignBlocs, as we liked how easy and straightforward it is to access information on the site.
Based on this, we started to think about what we needed for the documentation. So, we put together the list of basic requirements:
- An About DesignBlocs area, to talk about what we are doing, showcase those involved in the documentation, and take feedback.
- A Case studies area for documenting projects that utilized the suggestions given when building their products.
- Guidelines; this section would help the designers understand the foundations of a design system.
- Components section — Core and Derived components; the Core components being the base upon which the Derived components can be built.
- Get help; here, designers can request guidance if they need some direction (although, we’re still undecided on what it’ll entail as a whole)
Here is a link to interact with the DesignBlocs prototype;
Summary
It truly has been a wonderful experience working with the team to plan, and design DesignBlocs. Designing, developing, and improving a documentation site is one of those tasks that never end, as we’d keep iterating as we are gifted feedback by users — yes, gifted. We are proud of the progress we’ve made so far, although much is still to be done.
If you would like to share your thoughts on DesignBlocs, please let us know by using the feedback section on the landing page.
Thanks
