To create an educational app for kids aged 8-10 to learn about the periodic table.
Illustration, Branding, UI design, Prototyping
For this University Project, we were tasked to create an app to teach a selected target audience about the periodic table. For this I went through a series of idea generation until I had an understanding that I would create an app for kids aged 8-10 so they could learn about the metals in a fun and child friendly way.
Quickly I dove into research into existing app examples on platforms such as the App Store, Dribbble and Pinterest. I looked at areas such as their illustration style, the UI design and how they present content to the user. After doing this research, I decided the best route to take would be to make it as visual as possible allowing children to build an association between elements and illustrated characters.
Once I had an idea of what I wanted to create I started to sketch a series of wireframes to get an understanding of what each section of the app would look like.
After basic sketching, I developed these into my final wireframes. For these I went with the idea of a card design as this is how most children learn in paper based form when they are young. Along with this I placed a large focus on the mascot to direct the user through the app along with a large focus on the character illustrations to show fun facts of each element.
Once I was happy with my paper sketches, I started on the process of illustrating my monsters. For this I sketched them very roughly on paper, ensuring they matched and looked like a 'set', and then moved into adobe illustrator to create them digitally - ensuring to match the characteristics and colours from the sketches. Once I had created each of the monsters and named them, I researched into facts about each metal and then continued to illustrate the monsters in each of these scenarios (view illustrations in the prototype).
Once I had developed my illustrations, I moved on to start working digitally. To begin with I created a visual grammar which pairs as a component library, this tool ensures everything is consistent whether that is by the colour or by the sizing of each component. Once I had developed this tool, I moved on to create my style guide, this goes a step further than a visual grammar as it allows topics such as alignment, voice and tone, illustration and layout to be covered so when the high resolution mockups are created they are consistent (view style guide).
After creating the tools above, I felt ready to move into Figma to start creating my high resolution mockups. For this I decided to focus on the six Alkali metals. When working digitally it allowed for further experimentation and small refinements to be made, ensuring they were structured best for the target audience. As I went through the process of creating my app I added interfaces such as the help screen or the full periodic table, I think these were necessary additions and add to the user's overall experience.
The final product for this project is a fun and child friendly educational app showing good use of data presentation and how content can be presented to different users e.g. use of illustration. This project included creating a brand 'metal monsters' and mascot 'Metal Marv' to go alongside the app (see below). The app interfaces were prototyped using Figma, with button animation and a good user flow. The working prototype is linked below alongside the style guide!