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:

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amrisandha Prasetyo

Computer science student at Universitas Indonesia | Aspiring product designer 🎨💻