Atom

An augmented reality mobile application which helps secondary school kids to learn the elements in the periodic table, their atomic configurations and also form configurations and also form compounds using them. It enhances the learning experience of the students outside the classroom.

Oct 2021 - Feb 2022
Ingolstadt, Germany
Team - Robins Mathew (Visual Designer), Sary Elmelegy (Mobile App Developer)
Role - Research, Information Architecture, UX Design, Prototyping, User Testing

Problem Space

The periodic table of elements is introduced to students in elementary school where they learn about the categorisation of elements. Each element has a unique atomic structure with protons, neutrons, and electrons, and this is taught in a 2D format using textbooks. Higher secondary students have to learn elements based on their atomic structure and solve equations, but this can be slow and time-consuming due to the 2D teaching method. There are 118 elements in the periodic table.

Objectives

  • Do a literature study on the topic to be addressed
  • Conduct User interviews (qualitative analysis)
  • Understand the current study model
  • Collect insights
  • Identify pain points & challenges
  • Brainstorm possible approaches towards the solution
  • Define the user flow
  • Build wireframes
  • Conduct usability testing
  • Handover to developer.

Vision of Approach

The idea is to design an interactive way to visualize the periodic table of elements and their atomic structure using an Augmented Reality or Virtual Reality concept. Find new interactive methods within the application to enhance the learning experience.

Exploring The Problem

We decided to visit APIAN-GYMNASIUM INGOLSTADT and collect more insights about the students, how their learning standards are, what their likes and dislikes are about the periodic table and also what approach or process does the teacher follow to make kids understand the periodic table better. We luckily got an appointment with a chemistry teacher, who taught chemistry to the students of grade 9 & 10.

The students seemed to be interested a lot. We also asked them about their learning and understanding approach to a periodic table. Got to know about their pain points as well. Witnessed Ms. Marianne Schall, teaching the kids about inert gasses, atomic structure of the elements, etc. The way she taught was different from what we assumed. She followed a different approach for understanding the energy levels. Also the kids had a pamphlet of a periodic table which was color coded and helped them in understanding the periodic table better.

Defining the Problem

Based on the insights gathered, we decided to modify our approach so that it would properly align with what the students are being taught and be beneficial for them at the same time. Although a VR based approach would be more enjoyable, we had a limitation here. Given the nature of the learning and the context of usage we decided to go with AR to keep the application light for both the students and the teacher. Our aim was to enhance the learning experience rather than creating something new.

User Persona

The interaction at the school really helped us understand them, their pain points, expectations, behaviours, etc and create user personas based on the conclusions achieved for further work.

Designing the Solution

User Flow
Wireframes
Style Guide

Since this is a marker based AR application, we needed a good recognizable marker design. After going through quite a few iterations, we decided to make a custom typeface with sharp edges and custom patterns on the cards for better recognition by Vuforia. The colour coding of the cards is inspired from colours used in the periodic table taught in the school.

Interface Designs

Testing with the users

Went back to the school again to test it out with the kids on how they felt using our application ATOM. At first we introduced them about our user interface elements in detail followed by explaining all the features of the application by which they would be able to use it.

We had an open-ended questionnaire to ask for their views and also asked them to fill a short UEQs. We had a mix of both male and female participants.

System Usability Scale questionnaire to capture their responses.

Demo

Media Feature

Key Learnings

Always understand the users first, their age group, motivation, needs thoroughly.
Sometimes VR can be more fascinating but AR can be more usable and accessible.
User validation is the key to a successful design solution.