As a product designer, you may have used a design system in the past, but have you actually built one yourself? The book Atomic Design by Brad Frost talks about the atomic principle when it comes to creating a design system, and dives into the nitty gritty of how to do that.
The atomic principle refers to creating design elements in a way that mimics chemistry, where atoms are combined to from molecules and molecules come together to form organism. This principle itself is not hard to understand, so my biggest takeaways after reading this book actually come from the many best practices about collaboration and visual design.
Be Agile Rather than Waterfall
One thing that really struck me was the caution from the book about how designers and developers should collaborate.
The characteristic of the traditional waterfall method is its orderly and distinct phases where UX designers, visual designers and developers work separately and independently: UX designers create wireframes first. Then visual designers create hi-fi mockups, and finally front-end developers turns the design into code. While this method appears organized on the surface, it fails to capture input from all the stakeholders early in the project. As a result, the quality of the final product often fall short of expectations.
The book suggests adopting the agile method where tight feedback loops are baked into the entire duration of the project. By doing so, UX designers, visual designers and front-end developers are able to frequently communicate with each other so that feedback and constraints can be considered in a timely manner, thus avoiding the disappointment that comes from the big reveal in the waterfall method.
To many people in tech, the agile methodology is no longer something new, but when reflecting on the past projects I’d worked on, I was surprised at how often we, me included, still made the mistake of not implementing it effectively. Being agile is definitely one of the most important things I learned from this book.
The 20-Second Gut Test
As product designers, many of us are familiar with using UX workshops to gather stakeholder input regarding product ideas or features. What I hadn’t known before reading this book was how to effectively incorporate stakeholder opinions on aesthetics and visual design.
The book presents an amazing method called the the 20-second gut test. It’s basically about gathering screenshots of existing websites or apps with different aesthetics, replacing their logos with the one used in the project, and presenting the modified screenshots to stakeholders. After 20 seconds, ask stakeholders to verbalize what they like or dislike about the different visual directions if those screenshots were the final product. By doing so, we get a better grasp of the tastes of different stakeholders, which will later inform our design. It also gives stakeholders the opportunities to iron out conflicting opinions between them so we can come up with a visual direction based on consensus from the team.
Iterate on Elements First Before Full-Page Mockups
If we follow the atomic design philosophy, we create a design system first, and then use it as the foundation to build the final design of our product. Therefore, it makes sense to review the various design elements with stakeholders first before reviewing the full-page mockups, even if some stakeholders may not be used to working this way at the beginning.
The book talks about creating the style tile and element collage. A style tile showcases the typography and colors, and an element collage showcases the various components (atoms, molecules and organisms) in the agreed-upon visual direction(s) coming out of the 20-second gut test.
Once the style tile and the element collage pass the reviews, they will serve as the basis for us to build out full mockups, which can then be reviewed by stakeholders.
Final Thoughts
Atomic Design is not a new book. Many of the examples used in the book may look old, but the principle and the ideas are not outdated.
Besides creating a design system, the book also covers how to properly maintain one by making it visible, public and changeable, which is actually pretty important if we want to get the most utility out of it.
Nowadays design systems have become quite common in organizations. Give this book a read if you are a product designer. Not only will it teach you a lot about design systems, but also help you field questions related to this topic in interviews.
Recommendation: ⭐️ ⭐️ ⭐️ ⭐️
My Learnings from Other UX Books
- This Book Will Change the Way You Look at Data in Design: Learnings from Reading Designing with Data
- Be an Excellent Facilitator: Learnings from Reading Communicating the UX Vision
- Let Ideas Collide with Reality: Learnings from Reading That Will Never Work
- Learnings from Reading UX Strategy: How to Devise Innovative Digital Products that People Want
- Learnings from Reading About Face
- Learnings from Reading A Practical Guide to Information Architecture
