Design Process - sary1/Atom-VAR-practical GitHub Wiki

Double Diamond is the name of a design process model popularized by the British Design Council in 2005, and adapted from the divergence-convergence model proposed in 1996 by Hungarian-American linguist Béla H. Bánáthy. The two diamonds represent a process of exploring an issue more widely or deeply (divergent thinking) and then taking focused action (convergent thinking). It suggests that the design process should have four phases:

• Discover: Understand the issue rather than merely assuming it. It involves speaking to and spending time with people who are affected by the issues.
• Define: The insight gathered from the discovery phase can help to define the challenge in a different way.
• Develop: Give different answers to the clearly defined problem, seeking inspiration from elsewhere and co-designing with a range of different people.
• Deliver: Involves testing out different solutions at small-scale, rejecting those that will not work and improving the ones that will.

Phase 1: Discover

As we already mentioned our problem statements and ideas in the above, now the time is to dive into the next phase.

Our team decided to 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 at the Apian-Gymnasium Ingolstadt (School), who teaches chemistry to the students of grade 9 & 10.

Before going to the school we have done some research from the internet resources to get a better understanding about what we are trying to achieve. Based on that, we made a workflow assuming this would be our proposed solution to the problem we are addressing. Our approach was to create a virtual reality application where the students can go into a virtual world wearing the VR headset.

A prototype was created to show what we are trying to propose. Our first plan was to show the home screen which basically had a user profile screen, where the user can see their status of learning and other options to explore such as the periodic table, the leader board. In addition to that, we thought of making it a more gamified experience, so we also have a compound game feature and the pop quiz. These would help a student learn in a more gamified way.

On tapping on the periodic table option a preview of a complete periodic table appears where you can see all the elements in a 3D view. Here the user gets to pick any element.

When any element is selected the user gets to see the details about the element. Also the atomic structure will be visible in life size 3D. Here the user also gets to interact with the atomic structure by flipping it around and walking around it too to have a look at it in detail.

Apart from learning about the elements. Users can also play games to revise their learning through different interactive games. When clicked on the play compound game, it prompts the user to form a compound. Then the user has to drag the elements from the periodic table to form that compound.

When the compound is formed, the user gets to visualize and interact with the molecular structure of the compound in 3D.

Phase 2: Explore & Define

Finally when we went to the school to interact with the teacher and the students, we got a lot of useful insights. The students seemed to be interested a lot. They discussed their likes and dislikes about chemistry. Then we also asked them about their learning and understanding approach to a periodic table. Got to know about their pain points as well. We also 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.

Based on the insights we gathered in this session, 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. VR headsets are more expensive. Apart from this, the development for this application would require a complex technological scale up. 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. Even if we do it in virtual reality all the students would not be able to access it and also getting a VR headset just for the purpose of learning didn’t make any sense. To overcome this we thought of switching to Augmented Reality. This approach had a lot of advantages as compared to Virtual Reality. Almost every student has a smartphone at their home. They can even practice at home. Buying something new was not required. Just downloading an application would get them access to enjoy this way of learning the periodic table.

Phase 3: Design

Flow & Mindmap

User Personas

After having an interactive session with some 9th grade students and their chemistry teacher we got a lot of information on how the periodic table is being taught and also how the students are perceiving it. This session also gave us a few innovative insights about how students prepare themselves for their exams as well. We introduced Augmented Reality to the class and conveyed what we are trying to achieve. We also demonstrated a few examples of Augmented Reality using our smartphones, the students seemed very much excited. The session really helped us understand them, their pain points, expectations, behaviors, etc and create user personas based on the conclusions achieved for further work to be done.

Moodboard

Branding

The visual design has been kept minimal and clean. The visual identity of the application and its colours has been extended to the icon design, screen design and even the design system of the cards. All this makes the design system coherent and feel like a whole.

User Interface & Visual Design

Card Design

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.

Phase 4: Development

Softwares

3DS MAX: for modeling the atomic structure, energy levels, electrons, protons, and combinations.

UNITY: as a game engine that hosts all models, audios, scripts, UI components, etc.

C#: as a programming language to add the logic for all required interactions.

VUFORIA: for augmented reality development.

Features

SCAN CARD: a feature to help students get information via UI panel as well as 3D representation of the chemical element.

ENERGY LEVEL GAME: a game where a student should fill energy levels (K, L, M, N) with the exact number of electrons of the scanned element as in real life. Helpers: scan a card and you get a popup stating the name of the scanned element and what you should do. Success criteria: state the overall number of electrons for the scanned element as well as the count of electrons in all energy levels. Example: Oxygen has 8 electrons distributed as 2 electrons in the first level and 6 electrons in the second.

INERT GAS CONFIGURATION: a game where a student should fill energy levels (K, L, M, N) with the exact number of electrons of the nearest inert gas to the scanned element as in real life. Helpers: scan a card and you get a popup stating the name of the nearest inert gas to the scanned element and what you should do. Success criteria: state the overall number of electrons for the nearest inert gas to the scanned element as well as the count of electrons in all energy levels. Example: Oxygen, you need to form the structure of NEON that has 10 electrons distributed as 2 electrons in the first level and 8 electrons in the second.

MOLECULAR STRUCTURE: a game where a student should combine atoms that form a chemical compound. Helpers: scan a compound molecule card and you get a popup stating the name of that molecule and what you should do. Success criteria: scan the atoms’ cards that form the desired compound with the exact number as in real life. Example: Water is a chemical compound that is formed by combining two Hydrogen atoms and one Oxygen atom.

(I) INFORMATION: a feature that gives instructions and information about the game.

Class Functions

1- CameraFocusController: a class that resets the camera's autofocus in native apps. It solves a problem that some devices might get with the default Vuforia autofocus.

2- MenuHandlers: a class that converts the menu screen into redirect options. In other words, it is responsible for redirecting the user based on his clicks on the user interface to the desired app feature.

3- SkipToMainMenu: a button handler to redirect the user to the main menu screen whenever he wants from any other screen.

4- GlobalVariables: a class that tracks: the total number of electrons of Oxygen, Hydrogen, Neon, and Helium atoms, the count of electrons of Oxygen, Hydrogen, Neon, and Helium that are given as inputs by the student, the current active energy level, the total number of electrons in each energy levels, the total number of electrons, and the energy levels as platform game objects for both ENERGY LEVEL and INERT GAS CONFIGURATION games.

5- CombinationGlobalVariables: a class that tracks the number of Oxygen and Hydrogen atoms in the MOLECULAR STRUCTURE game. Its variables are used to check the correctness of the produced compound molecule after submission.

6- CombinationSubmitter: a class that checks that the user has defined the true count of atoms to form the desired compound molecule in the MOLECULAR STRUCTURE game. It then redirects the user to either the success or failure pages.

7- CurrentLevelLetter: a class that sets the letter of the active energy level. As energy levels have symbols (K, L, M, N), this class shows only the symbol of the current active one.

8- IncreaseAtomCount: a button handler to increase the number of selected atoms in the MOLECULAR STRUCTURE game’s counter.

9- DecreaseAtomCount: a button handler to decrease the number of selected atoms in the MOLECULAR STRUCTURE game’s counter.

10- IncreaseLevel: a button handler to navigate between energy levels by going to the higher energy level in both ENERGY LEVEL and INERT GAS CONFIGURATION games.

11- DecreaseLevel: a button handler to navigate between energy levels by going to the lower energy level in both ENERGY LEVEL and INERT GAS CONFIGURATION games.

12- ElectronRotation: a class that rotates the 3D representation of the atoms in the SCAN CARD game. The aim was to make it look interactive and let the student see how electrons move in 3d space.

13- ElectronUniRotation: a class that rotates the 3D representation of the atoms only around Y-Axis in the MOLECULAR STRUCTURE game. The aim was to make it look interactive and let the student see how electrons move in 3d space, and at the same time see the count of electrons in the highest energy level, as it is a very important helper to decide the number of selected atoms.

14- ElectronsCounter: a class that tracks the total count of electrons to display it to the user. This is very important in both ENERGY LEVEL and INERT GAS CONFIGURATION games. This counter is a visual feedback to let the user know whether he achieved the game level or not.

15- IncreaseElectronCount: a button handler to increase the number of electrons in the active energy level in both ENERGY LEVEL and INERT GAS CONFIGURATION games.

16- DecreaseElectronCount: a button handler to decrease the number of electrons in the active energy level in both ENERGY LEVEL and INERT GAS CONFIGURATION games.

17- FailureHandler: a class that hosts all failure outputs for the 3 games. As every game has to redirect to a screen with a specific “Go Back” button, if the user wants to try the same game again.

18- FirstPlatformElectrons: a class that controls the appearance of electrons in the first energy level in both ENERGY LEVEL and INERT GAS CONFIGURATION games. It shows and hides electrons based on the electron counter of the first level.

19- SecondPlatformElectrons: a class that controls the appearance of electrons in the second energy level in both ENERGY LEVEL and INERT GAS CONFIGURATION games. It shows and hides electrons based on the electron counter of the second level.

20- ThirdPlatformElectrons: a class that controls the appearance of electrons in the third energy level in both ENERGY LEVEL and INERT GAS CONFIGURATION games. It shows and hides electrons based on the electron counter of the third level.

21- FourthPlatformElectrons: a class that controls the appearance of electrons in the fourth energy level in both ENERGY LEVEL and INERT GAS CONFIGURATION games. It shows and hides electrons based on the electron counter of the fourth level.

22- HyAtomsCounter: a class that gives visual feedback about the count of atoms selected by the user only for Hydrogen in the MOLECULAR STRUCTURE game.

23- HyInertSubmitHandler: a class that checks that the student has configured the Hydrogen atom correctly by reaching the electrons counter of Helium in the INERT GAS CONFIGURATION game.

24- HySubmitHandler: a class that checks that the student has built the energy level structure of the Hydrogen atom correctly in the ENERGY LEVEL game.

25- OxAtomsCounter: a class that gives visual feedback about the count of atoms selected by the user only for Oxygen in the MOLECULAR STRUCTURE game.

26- OxInertSubmitHandler: a class that checks that the student has configured the Oxygen atom correctly by reaching the electrons counter of Neon in the INERT GAS CONFIGURATION game.

27- OxSubmitHandler: a class that checks that the student has built the energy level structure of the Oxygen atom correctly in the ENERGY LEVEL game.

Phase 5: Testing

We tested our initial game with some of our colleagues. We had an open-ended questionnaire to ask for their views and also asked them to fill a short UEQ. We had a mix of both male and female participants.

The result of the UEQ is as follows:

The results of the UEQ really show us promising results when it comes to the experience. Both the Pragmatic as well as the Hedonic qualities were appreciated.

In addition to this, we 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.

Then we conducted a session where we demonstrated our AR application ATOM. We performed and showcased all the functionalities we had in the app. Post this, we let the students try out the application with the help of cards on their own individually.

This time we achieved better results, as we were testing it with our target audience. The kids really enjoyed the implementation of the card scanning.

They were also able to navigate better and needed almost no help in understanding the application. They liked the user interface as well. And yes the sound implementation was useful.

We also had prepared a System usability scale questionnaire to capture their responses.

Also we got some additional qualitative feedback from the students and the teacher at the school :

It was difficult to hold the camera all the time. It would be easier if the information & pictures are seen besides the card. It was quite easy to learn and was playful at the same time. Implement a QR code in addition as the camera detects QR code faster.`

Phase 6: Deliver & Listen

Our application Atom, that is designed for school kids to learn the periodic table in a more efficient way. This would also help them prepare them for their examinations. Our deliverables include a deck of cards custom designed baked on the coloured levels of the periodic tables that kids followed in their curriculum. The user can open the application and scan any card to see the detailed 3D structure of an element. In addition to that, as mentioned earlier we also have some gamified approach for energy level configuration and formation of inert gasses.