In 2016, Brad Frost introduced atomic design: a new approach to designing systems in which all interfaces can be broken down into small, modular building blocks that can be reused and recombined.
Last week, we discussed what research repositories are and why researchers, designers, and product managers alike should invest in them. This week, we'll take a look at the research principles that underpin them. Inspired by atomic design, we'll talk about atomic research.
The atomic design approach was strongly inspired by chemistry. In chemistry, all matter – with the exception of dark matter – is made up of molecules, which in turn are made up of atoms. Atoms are the smallest units of matter and the building blocks of chemistry. They also have certain physical and chemical properties.
Let’s take oxygen. It’s a tasteless, odourless and colourless gas that aids combustion but doesn’t burn. It can combine with other atoms. For example, two hydrogen atoms and one oxygen atom are the formulae for water. Oxygen can also form chemical bonds with other elements. Iron oxide – or what we commonly call rust – is a compound of iron and oxygen. The bottom line is that atoms have their own unique properties that, when combined, form different molecules.
Similar to atoms in chemistry, atomic design interfaces are broken down into small, modular building blocks that can be reused and recombined. They also have their own properties.
An example of an atom in atomic design.
An input field is an atom that has a certain colour and font. A button can also be an atom that’s a different colour and a different font.
To follow the chemistry example, the input fields and the buttons are combined into something larger – like a contact form. So the contact form is the equivalent of a molecule. Molecules assemble into organisms and then form templates. The final stage is the final page, which would be the design equivalent of deliverables.
In summary, atomic design starts from small elements with specific properties of atoms. These combine to create molecules, which transform into templates that lead to different designs. All are based on the same starting elements.
Now that we’ve seen how atomic design works, let’s look at how it’s used in research.
Nuggets are the atoms of atomic research.
Like atomic design, atomic research uses small, modular elements that can be combined to form complex insights. If in atomic design the smallest element is called an atom, in atomic research we call it a nugget. A nugget is a labelled observation supported by evidence. It’s a single-experience insight from the experience of a particular customer.
Evidence of the observation can be in the form of a short 30- to 45-second video, screenshot, or image. It could be a snippet from a call to customer support, a user interview, or a usability test.
Nuggets are organised with tags in a research repository. You can think of these tags as the properties of the atom. They help you identify what a particular nugget is about.
Tags have a key role in organising nuggets.
Let’s say you have a new question and you want to see if there’s any information available. To do that, you’d have to go through a series of nuggets to find the ones that might be relevant. The whole process would be much easier if you could filter the nuggets that contain important information. This is where tags come in.
To explain things better, let’s take a look at a nugget example.
For this, we use some research that we’ve done with our own portfolio builder – UXfolio.
- The user didn’t quickly understand where to change the project name.
- We have the video snippet where the user mentions this (interview with the man – about 14:18, if we need to refer back to it)
- “Usability testing” indicates how we collected the information.
- “Usability issue” refers to the kind of observation this is.
- The research participant is also important, so we’ll tag it “Tester 1”.
- To refer to the severity of the problem, we’ll tag it “medium”.
- It’s also important to understand where in the app this issue comes up, so the fifth tag will be “feature”.
We used five tags for this example, but you can add as many as you need. We’ll write more about how to create relevant tags in next week’s article.
Nuggets come together to create insights.
We’ve seen how in atomic design, atoms come together to create the final designs. Input fields combined with buttons create a contact form, which combined with other organisms, will form the bigger and final contact page.
In atomic research, nuggets are combined to form findings that lead to certain conclusions. In this approach, multiple findings can be supported by the same nugget. For example, a nugget from one usability test can be used to answer another research question about future features.
Likewise,multiple observations support a finding. Depending on the case, a finding may be confirmed – or infirmed – more than once because there are multiple nuggets associated with it. This can build confidence in the insight. The more nuggets associated with a finding, the greater the confidence in that finding.
The following points summarize the main atomic research principles:
- The element at the core of the atomic research approach is the nugget
- A nugget is basically an observation, accompanied by evidence and tags
- Tags are essential for combining nuggets into insights
- Research nuggets come together to form insights and conclusions
If you understand the principles of atomic research, it’ll be much easier to build a research repository. It’ll also help you decide what tags you need to combine the nuggets. We’ll talk about that in one of the next lessons.
Searching for the right UX agency?
As a top UI/UX design agency, UX studio works with rising startups and established tech giants worldwide.
Should you want to improve the design and performance of your digital product, message us to book a consultation with us. We will walk you through our design processes and suggest the next steps!
Our experts would be happy to assist with the UX strategy, product and user research, UX/UI design, etc.