Apr 24, 2020

Bachelor Thesis Exposé: Re-Interpreting Atomic Design

Former Title: Adapting the Atomic Design methodology to reduce workload during the creation and maintenance of Design Systems with included code.

Wenzel Massag, studying Digital Media Design (Bachelor of Science).

Supervising professor(s):
Primary: Prof. Jürgen Graeff
Assisting: Prof. M. Hofmeister

1 Disambiguations

1.1 "Full-Stack"

Within this bachelor thesis, I have defined the term "full-stack" as follows:

A "full-stack" worker or team is one with the technical knowledge to fulfil all tasks required to deliver a prototype or final working solution, see also "1.2 Solution Stack".

Example: A full-stack design team or single designer for handbags is capable of fashion design, has sufficient knowledge of the materials, and can sew.

Example: A full-stack digital designer or design team has all the skills of a digital designer. They are additionally capable of implementing his or her solution as a functional prototype.

1.2 "Solution Stack"

Definition from Wikipedia (April 23, 2020):

In computing, a solution stack or software stack is a set of software subsystems or components needed to create a complete platform such that no additional software is needed to support applications. […]
For example, to develop a web application, the architect defines the stack as the target operating system, web server, database, and programming language. Another version of a software stack is operating system, middleware, database, and applications. […]

1.3 "Atomic Design"

Atomic Design is a structured methodology to create Design Systems, which may include code for Front-End development. The name "Atomic Design" is a metaphor borrowed from chemistry, where all matter is built from atoms which combine to molecules which again combine to form organisms.

An illustration of the Atomic Design methodology by Brad Frost

Image 1: An illustration of the Atomic Design methodology by Brad Frost (6.3).

Objects, such as input fields, buttons, and radio-buttons, are defined to be atoms and form molecules. A molecule could be a text-input plus a button labelled "search," this combination would be considered a "search bar"-molecule. Molecules are grouped into organisms such as a page header, page footer, or a contact form.

2 Problem statement

During my internships at two different companies, I was able to observe the implementation of Atomic Design in the creation of a Design System. I identified some key issues and was able to gather insights into some methods of code implementation. Some more general problems which might occur regardless of team and company size are:

  1. Changes to atoms do not logically propagate to other atoms.
  2. Mapping design to code: Ensuring code quality and ensuring the code is structured to reflect the atomic nature of the to be discovered.
  3. Linking changes between design and code to ensure changes made to the Design System are reflected in code updates. This third problem will likely not be solved by this bachelor thesis.

3 Research question

How can the Atomic Design methodology be adapted to reduce the workload when creating and maintaining Design Systems, which include code?

3.1: Hypothesis

Utilising Atomic Design, designers build UI components using atoms. Hypothetically, building atoms using foundational shapes and styles should decrease the workload when creating and maintaining UI-components using the Atomic Design methodology.

By reflecting the structure used to generate atoms in the code-architecture during implementation, the cost (workload) should be reduced for implementing design updates.

4 Methodology

I will work based on the Double Diamond Model. However, I will not strictly adhere to specific definitions of it. The hypothesis (3.1) is considered a suggestion from one Persona.

During the Discovery stage of the Double Diamond Model, I will attempt to create additional personas by interviewing designers working with the Atomic Design Methodology.

Following discovery, I will define the problem again, to match the user needs I found. The hypothesis (3.1) may be discarded or adapted at this point. The Goal of this stage will be to define a new and more fitting problem statement.

To develop improvements for Atomic Design, I will explore options based on the personas and their needs. I will attempt to produce quantity over quality. The goal here is to find more than three possible improvements for working with Atomic Design from a full-stack (1.1) perspective.

The Delivery phase of the double diamond will start with evaluation utilising the Concept Selection matrix as described by Karl T. Ulrich (6.6). I will then attempt to have my original interview partners give feedback on the selected solutions.

The result of this process will be "Atomic Design 2.0" (working title, subject to change). The deliverable, as this is a design course, could be one or more of the following:

  1. One or more Design System components built with Atomic Design 2.0
  2. A visualisation of Atomic Design 2.0 as infographic or animation
  3. A one-pager website presenting a single component like a product while explaining Atomic Design 2.0

The deliverable might also be something I discover as a user need or get inspired to do during the discovery or develop phase.

Throughout the process of this bachelor thesis, I intend to blog weekly – or whenever I reach a milestone. Whichever comes first. My blog will act as my reference for writing my bachelor thesis. All progress and decision-making will be kept public; all research findings and prototype iterations will be public.

Once completed, this bachelor thesis will be available as a PDF download as well as a web-page. The web-page will remain online for an undecided period. A printed version will be provided to all supervising professors.

5 Schedule – Double Diamond


Adapt the Atomic Design methodology to reduce the workload when creating and maintaining Design Systems which include code.

As per definition, the Double Diamond Model has four stages. The duration of this bachelor thesis is three months with a deadline of August 3, 2020. I want to focus on the delivery phase.

  1. Discover within May 2020.
  2. Define before June 1, 2020.
  3. Develop until June 15-22, 2020.
  4. Deliver before August 3, 2020.

#6 Literature

In case linked sources are no longer available, please ask the author to provide them. All linked sources have been archived.

  1. YouTube-Video Atomic Design: What is it and why is it important in 2020?
  2. Atomic Design - How To Make UI and Web Design Easier.
  3. Original Atomic Design Keynote by Brad Frost: Atomic Design JoomlaDay Denver 2016.
  4. Atomic Design, das Baukastensystem mit dem schicken Namen
  5. Introduction: What are Web-Components?
  6. University of Pennsylvania via the online platform "Coursera". Design: The Creation of Artefacts in Society. Lecture-Video: "4.2 The Concept Selection Matrix".