Creating a Design System for Crowd+ — A Case Study
During the design process of Crowd+, a data annotation crowdsourcing platform, we developed a design system to maintain consistency within the product. The development process of the design system is based on the atomic design system proposed by Brad Frost.
The atomic design system, explained by Brad Frost
The atomic design system proposed by Brad Frost purposes on producing a design system that is based on explicit order and hierarchy. The name atomic is inspired by a concept in Chemistry in which the universe is made up of atomic elements which are the building blocks of every matter.
The system starts from atomic elements which are combined into molecules; molecules combined into organisms; organisms combined into templates; templates combined into pages.
Developing the atomic design system for Crowd+
Step 1. Creating Atoms
In this step, we produced the building blocks of the entire design system: atoms. These atoms are small elements that include color, typography, border radius, shadow, and elevation.
Step 2. Combining Atoms into Molecules
After creating atoms, we group them into molecules. These molecules are small elements that include buttons, inputs, labels, and icons, implementing the atomic characteristics defined earlier.
Step 3. Creating Organisms from Molecules
In this step, we gathered atoms and molecules to create more complex elements: organisms. Even though organisms are not the final element of the atomic design system, organisms can be reused across designs or layout templates.
Step 4. Producing Templates
This step is the first step that does not align to a stage in the molecular world, but still is an important stage in the atomic design system development process. Templates act as a set of blocks that can be used across a variety of pages. Templates are like wireframes that don’t contain real data.
Step 5. Customizing Templates into Pages
In the final step of the atomic design system development process, we used the templates created earlier and customized them to present the final look of the product. This step produces a high-fidelity version of the product design.
Drum roll, please… The result!
The result of the development of the design system of Crowd+ is the high-fidelity prototype of the product itself. This is the combination of the pages developed in step 5 of the atomic design system development process.
If you are interested in interacting with the final prototype of the product, feel free to check the following prototype links:
- Admin Prototype: https://www.figma.com/file/fXYNJTa61j6B1HQWF0M3J4/Prototype-Admin?node-id=0%3A1
- Project Provider Prototype: https://www.figma.com/file/VIQcj4upyb3MWh0LUVwQ67/Prototype-Penyedia-Proyek?node-id=1%3A2
- Data Annotator Prototype: https://www.figma.com/file/XGjQenoTII8pkYvQCC2cDc/Prototype-Annotator?node-id=0%3A1
Reflection: how the atomic design system helped the product development
- The mix and matching of components were done easily — Because we designed components based on a clear hierarchy, from simple to complex, it was easier for us to combine smaller components to create larger ones. It also helped us navigate between all design system elements.
- It produced a simple design guide — Producing the design system helped us design a product that was overall consistent and easy to implement.
- Faster production of the design system — Because we develop elements from the smallest to the largest, the production of the design system hence became faster, as smaller elements could be reused and combined with each other.
- Components are now easier to code — Because the design system produced became modular and consistent, it became easier to code the components. Also, it reduces the tendency of duplicate code.
