Atomic Chef

Cooking up eLearning for the Periodic Table

Pirate Flag
Atomic Chef pot lid explosion

Project: An eLearning resource to explain the periodic table for 8-11 year olds

Role: Content and Web Design

Tools: Illustrator, HTML, CSS, JavaScript

Challenge

Design a source to inform children in Key Stage 2 (8-11 years old) about the periodic table, breaking down complex details into informative but appropriate content.

Planning content

Understanding elements means them down to their key ingredients (+ a good few cooking puns)

Wireframe flow

Building up a basic flow with some early wireframe concepts

Approach

As a former physics student, I felt at home with the content so first it was necessary to distance myself from the subject and empathise with how the user sees it. Canvassing the kids where I volunteer turned up interesting insights, including how eager most were to learn while simultaneously being frustrated by language that was either too simple or too confusing (and both made them feel stupid). From there personas could be created and the beginnings of a user flow could be formed.

While the user flow helped make the information easier to find, it’s still not necessarily easier to understand. Thus the idea of Atomic Chef was born. Cooking is a familiar concept and forms a tangible metaphor for how atoms combine like ingredients into elements and can be found in everyday objects children recognise. Cooking with science (and it’s not Breaking Bad)!

Research Notes
Element styletile

Exploring the cooking theme with potential ingredients

Early content prototype

Content first prototype: getting the essential copy and structuring right with a bare HTML prototype was the first step

Obstacles

The biggest physical obstacle was trying to keep up with the kids while conducting interviews on the job (aka while they were having fun and running around). Design wise, however, a snag soon appeared while crafting the content. Researching Key Stage 2 curriculum and those of surrounding years revealed that explanations for the elements involve a lot of terms which are themselves not explained upfront. For the younger end of the age group or anyone refreshing the material, this renders many descriptions meaningless and out of context. Who cares what the atomic number of Magnesium is if you don’t know what an atomic number is?

Solution

The solution formed through a convergence of the visuals and content. Elements are associated with foods to provide tangible examples and the visual design themed as a menu, further enhancing the cooking metaphor which helps translate the abstract concept of atoms and elements into something familiar (though table of elements puns were resisted).

Extensive drafting and redrafting of content broke the topic down in simple but never stupefying language and ensures theme never overshadows hard facts. Providing context for the definitions meant going the extra mile to add a breakdown of the terms behind the explanations using a visual metaphor of combining ingredients. This forms the optional onboarding for those less familiar with the topic. Visual learning is a great aid for a younger audience (and older too) and to complete the package the site is optimised for small tablet and phone screens which are the primary point of internet access for the majority of these young learners.

Check it Out
The element menu

A menu based on menus to complete the food theme

Terminology breakdown screen

Breaking down the key terms with a visual cooking pot analogy

Reflection

Content is king. Every bit of the design stemmed from the needs of a young user exposed to what can be an overwhelming topic. Writing, rewriting, and rewriting the content exposed the obstacles as well as what extra might be necessary and led to a cooking themed periodic table primer which is actually meaningful to the children who use it.

Made to the Sound of Cage The Elephant - Cage The Elephant

All designs shown © Kezie Todd 2018

Discover More