Atomic content — how we hacked a design concept to create a flexible educational platform

When creating Disko, a digital-first educational compendium for high school teachers, we pondered which user problem we would focus on. Teachers we interviewed spend an incredible amount of time finding quality digital content that is both appropriate for the age group and suitable for their educational purposes. They knew the benefits of digital platforms for student engagement and their own flexibility. In spite of this, 90% of the interviewees wouldn’t abandon books for fear of losing the guided pedagogical progression that books offer. By using the principle of atomic design — a concept by designer Brad Frost in 2013 — we were able to create a digital product that provided teachers with the structure they needed without taking away their autonomy. We could give them a lot of flexibility and still provide them with an overview of their specific class’s progression.

Theoretical texts, interactive diagrams, visual stories, quizzes and flashcards: educational content is created with a digital-first approach. Still, how do we put this together in a structured way while retaining the flexibility teachers want?

Research: do control and structure oppose flexibility and autonomy?

Although the use of digital learning increased sharply during the COVID-19 pandemic, books still feel more reliable than digital learning platforms. The digital nature of scattered content and the lack of a clear structure guiding both teachers and students are challenges for even the most tech-savvy educators. “When I am finished through a book, I know I have prepared my students for the exam,” is a phrase that we heard all too often in our interviews with teachers.

“But I do need to provide variation for my students, and for that, available online digital content is key.” It involves research on YouTube; editing their own videos on iMovie; creating their own quizzes and flashcards on platforms such as Kahoot and Quizlet; and exchanging information on teacher’s fora on Facebook and Quora. Each class is often organized into one long list of links on One Note and distributed to students via Teams. Oh, and let’s not forget the Power Point presentation. Sounds overwhelming? It is. Teachers work hard, often during their free time, to provide a solid education that speaks to this new generation of students.

We dwelled on this challenge for a long time: how might we give teachers the richness of digital content possibilities without taking from them the overview over progression? Is that at all possible?

Then we discovered the atom.

In 2013, Brad Frost introduced the concept of atomic design. By breaking apart design elements into the smallest parts — “atoms” — and combining them in different ways and complexities — “molecules” and “organisms” — designers could create a coherent component system that felt recognizable and was easy to maintain. I see atomic design as the very first seed of modularity in design, a concept that allows today’s designers to develop quite complex products that feel consistent and easy to use.

In Frost’s concept, we define that a button, an input field, and a block of text are “atoms”. By combining them in different ways, we will be able to create different “molecules”. A button + a search input field = a Search component. A text block + a button = a call to action. A Search component + a menu component + a logo = an organism. (Diagram from Brad Frost’s webpage)

Our editorial and pedagogical hierarchy is similar to that in books: at Disko, a main subject (for instance, Social Studies) consists of a few main topics, or chapters (Democracy, Diversity, International Conflicts, etc.), which in turn are comprised of many sub-topics. Each of these sub-topics is made up of many kinds of activities. These activities are the smallest part — the atom — and vary in format (video, texts, quizzes, polls, exercises, interviews, etc.) and educational method (projects, drills, cases, etc.).

By choosing to make this hierarchy explicit through design, we convey the sense of order teachers need in order to feel in control. But what about flexibility? That’s when Frost’s concept comes in handy. By “breaking” these activities loose from sub-topics, as well as “breaking” sub-topics loose from main topics, they are allowed to be grouped in different ways. Teachers can either follow our editorial recommendation (traditional hierarchy) or choose to group activities and sub-topics as they like, with full autonomy in their classroom. In this manner, we give them structure and the ability to adapt the curriculum to their specific class, based on the student’s interests and educational needs.

On the top, the hierarchical approach is similar to the book structure: the subject is divided in main topics (chapters, in a book) and which are divided in sub-topics, consisting of different activities. But because the activities at Disko function as independent elements, they allow for a flexible approach. A teacher can exclude or change the order of activities in a sub-topic, like the example on the left or curate their own topic, with activities from two or more topics and subtopics (right).

The above diagram, in practice:

In the traditional way, a student or a teacher can access a text or another activity by clicking on the sub-topic (1), getting an overview of all the activities (2) and then finding the activity (3). However, since we have regrouped these activities — in this example by format (“Reading texts”, “Test yourself”, “Opinion polls”), it is also possible for the user to go directly to the content they need or want to use or share with the class.

Teachers can choose for themselves the degree of flexibility they want to have, based on what their students want or need. They might simply adjust the order or omit an activity from a sub-topic we have proposed (1), or they can start with one activity and add others from a search (2 and 3).

Two birds with one stone.

By using the atomic design methodology as a starting point allowed us to cater to two very different groups of teachers, plus everyone in the middle. We provide for educators who buy Disko for our editorial knowledge that helps them plan a whole school year, but we also provide for educators who want to do it themselves.

This could only be possible through a close collaboration between design, web developers, and the editorial team from day one. Content editors must always have in mind how to create activities that will work in a pre-defined sequence and by themselves. They also must be aware of metadata, a key for understanding the structure even when it’s not linear. This focus is very important, because it enables us to work with algorithms and personalization in the future.

Changing our ways of working — a marked shift from the structured, linear way in which books are made — was not an easy task, and we have experienced growing pains during the process. But just as today designers build complex systems almost without thinking of the methodology that once started that train of thought, we can say that almost seven months into this project, the atomic model is starting to become second nature for us too.

But most important of all is the learning that by hacking and adapting methodologies that were not created for our industries at first place we are able to create new ways of experiencing things. This time it was the atom. Who knows what we will hack next.

Disko from Cappelen Damm is Norway’s first streaming service for high-school education. Our focus is on creating digital-first learning experiences that get students engaged and curious and teachers excited to teach. We are launching our pilot in August 2022 and it will be free for all teachers and students with a Feide-user throughout the year.

🥰 And guess what? We are hiring! (In Norwegian)