View on GitHub
PandaPro is a fun, interactive app for kids that boosts creativity and learning through engaging animal-themed minigames.

Role

Researcher
UI/UX Designer
Prototyper
Developer

Team

Katrina Hu (me)

Tools

Adobe Illustrator
Figma
HTML/JS/CSS

Duration

1 month

Project Summary

Context

PandaPro was a school project developed from start to finish, encompassing research, design, and full coding to create a fully functional app.

Overview

PandaPro is a fun, interactive app for kids that inspires creativity and learning through engaging animal-themed minigames. From artistic animal drawings to vocabulary-boosting sound games, PandaPro turns playtime into a world of adventure and discovery!

The Challenge

Address the gap in educational resources that entertain users and support learning.

Many educational apps fail to engage children, making learning uninteresting. Parents need resources that both entertain and support developmental skills, combining play with education in a fun, creative way.

Research

Children rely on auditory and visual feedback to boost engagement and learning.

I conducted an ethnographic observation session of a 2nd grade classroom using the 5 Human Factors observation framework to gather some insights on how children interact with systems, products, and a learning envrionment. I was able to garner some valuable insights that would inform my design choices.

A chart outlining the 5 Human Factors Observation Framework, complete with all the observation notes for each category, as well as insighed gleaned.

User Flow Mapping

Streamline processes and optimize navigation.

The next step in the development process was to create a user flow diagram for one of the proposed minigames to identify pain points, streamline processes, and optimizing navigation.

Personas

I created user personas to foster a deeper understanding of the needs, motivations, and challenges of the users.

Based on real people in my life, I created 2 user personas to help me empathize wit hthe users and guide design choices that better cater to the audience.

Low-Fidelity Wireframes

Paper Prototypes.

I started the wireframing process by making low-fidelity paper prototypes. Paper prototypes allowed for rapid iteration with low-commitment. I sketched out some basic layout ideas, focusing on the structure of the information rather than colour and typography.

Hi-Fidelity Wireframes

Digital Wireframes in Figma.

After making some adjustments and additions to the low-fidelity paper prototypes, I illustrated all my drawings in Adobe Illustrator. Using these illustrations, I made a hi-fidelity mockup of the wireframes in Figma.

Challenges

API didn't have the information I wanted for the development of the app.

During the early stages of the development process, I realized that the API I had chosen to support the app didn't include images or icons of the animals, which was nessecary for the minigame. To combat this, I decided to redesign the minigame and switch to a data source that provided icons and sounds instead.

The Solution

Unlock the Power of Play: Where Fun Meets Learning with PandaPro!

Introducing, PandaPro! It is an interactive educational app, offering a variety of engaging minigames. The app combines fun with learning, helping children develop essential skills like creativity, vocabulary, pronunciation, and fine motor skills through playful minigames.

Onboarding

Pick your animal themed creative minigame!    

Sound Guessing Game

Unlock the power of play! Listen to animal sounds, guess the animal using voice input, and unlock surprises with every correct answer. A helpful hint system ensures learning and satisfaction.

Sketchpad

In this interactive painting game, you’ll receive a random animal prompt. Use the vibrant color palette to bring your creation to life. When you’re done, save your masterpiece and keep the fun going with a new surprise every time!

Reflection

My research-informed design decisions helped to tailor the experience to a younger audience.

Designing this web app from start to finish provided me with valuable insights into research-informed design decisions. It was my first experience designing for a young audience, and the research I conducted beforehand guided my choices and gave me a solid foundation. The project successfully achieved its goal of creating an educational app that is both engaging and fosters creativity.