Atom-Know your element

An augmented reality mobile app brings a deck of marker cards to life, helping secondary school students learn the periodic table, atomic configurations, and compounds. The app guides students through three interactive games that enhance learning outside of class.

My Role

Created the concept, user flow, wireframes, visual identity, and UI design for this AR app as the UX and Visual Designer. Ensured a smooth developer handover.

Team

Robins Mathew
Sary Elmelegy
Bimalesh Sahoo

The Problem

Elementary students begin by learning the periodic table's categorization of elements, advancing to understanding their uses and atomic structures in higher grades. With 118 elements each having unique protons, neutrons, and electrons, mastering atomic structures in 2D often proves challenging for higher secondary students.

User Research

Apian-Gymnasium Ingolstadt
(Higher secondary School)
Guide teacher - Ms. Marianne Schall
Grades 9 & 10

At Apian-Gymnasium Ingolstadt, we gained direct insights from a chemistry teacher and students' learning preferences. Our initial MVP concept evolved, inspired by Ms. Schall's unique methods, leading us to incorporate augmented reality to enrich periodic table learning strategies, rather than introduce new concepts.

Identity Design

Design System

UI Design

AR Marker Design

For the purpose of effective detection of the cards by the app in order to activate augmented reality (AR), a custom typeface as well as custom patterns with sharp edges were designed.

Feature Development

3DS MAX: Models atomic structures and combinations.
UNITY: Hosts models, audios, scripts, UI.
C#: Provides logic for interactions.
VUFORIA: Enables AR development.

Scan Card

A function that enables students to obtain information by way of an interface panel
and a three-dimensional representation of the chemical element.

Inert Gas Configuration

A game where students fill energy levels (K, L, M, and N) with the exact number of electrons of the nearest inert gas to the scanned element as in real life.

Energy level game

A game where students fill energy levels (K, L, M, N) with the scanned element's electrons.

Molecular Structure

A game where a student should combine atoms that form a chemical compound.

Usability Testing

Also, we went back to the school to get feedback from the students who would be using our app and made them all take part in an UEQ.

Challenges

It was difficult to hold the phone all the time.
It would be easier with more info were on the card.
Implement a QR code on the cards in addition.

Future Work

Create a deck of chemistry cards' elements.
Create a real-life compound deck. Common salt, baking soda, etc.
Since organic chemistry is a new field of chemistry
and difficult to learn, we consider making games to help.