Ideation & Early Sketches

Brainstorming & Wireframing

Designing an interactive learning experience starts with a clear vision of how users will engage with the game. Before jumping into development, it's crucial to explore different interaction methods, sketch early concepts, and refine gameplay mechanics. This stage helps shape the user journey, ensuring that each action feels intuitive, engaging, and aligned with the learning objectives.

User Flow

I used a user flow chart to visualize the path taken by user on the app from start to finish. The user flow starts with launching the app and ends with math practice results. I use different shapes to assign different interaction which can make the user flow chart clear.













Wireframe Sketches

Wireframes helps me to focus on the core experience, ensuring that navigation was intuitive and gameplay mechanics were clear. By creating simple sketches, I can test different layouts, identify potential pain points, and make improvements early in the design process. The wireframes include essential screens like the main landing, where players could enter their names and begun their adventure, and the gameplay screen, where they would play in an AR environment. 

















Iterative

First Iteration: Extending Hand Mechanic

In the initial design, we implemented an extending hand mechanic, inspired by games like Poppy Playtime. The idea was to create a unique and engaging way for players to interact with AR answers. Players would aim at a sphere and extend a mechanical hand to “grab” the correct answer. 
















While this added a sense of adventure, early testing revealed that it felt slow and clunky for younger players. Many struggled with the timing and precision required, leading to frustration and disrupting the learning experience.

Second Iteration: Simplifying the Interaction

I decide to simplify the selection process. The extending hand was removed, and the mechanic was replaced with a simple aim-and-select system. Players now only needed to point their device at the correct AR and tap to select. This change made the gameplay feel much more responsive and intuitive, especially for younger users who preferred faster interactions.



Comments

Post a Comment

Popular posts from this blog

Creating UI Elements

Image
Revamping Pippo Math After receiving feedback from my lecturers, I realized Pippo Math needed a stronger visual identity — one that felt playful, engaging, and reflective of its educational purpose . The original minimalist design, while clean, lacked the excitement that would captivate young learners. This led me to completely revamp the game’s aesthetic, embracing a papercut art style that added warmth, creativity, and personal branding to the app. Why Papercut? The choice of a papercut style came naturally when I reflected on the connection between math and paper . From scribbling equations in notebooks to folding paper into shapes, paper has always been part of the math learning experience. The layered, handcrafted feel of the papercut style added a sense of depth and texture , making each screen more inviting and immersive. It also aligned with the idea of hands-on learning , reinforcing the game’s interactive nature. Inspirations from Pinterest Building the UI Adobe Illustrator...
Read more

The User

Image
Who are Pips? In Pippo Math, the users will affectionately be called Pips. They  are children aged 6 to 10 who are eager to learn but often struggle with traditional math methods. Many Pips find math difficult, boring, or even frustrating , leading to disengagement and math anxiety. Pips Learning Behavior Short Attention Spans Pips lose focus quickly with repetitive exercises. Math Anxiety Many Pips feel intimidated by numbers and equations. Preference for Interactive Learning Pips engage more with hands-on, movement-based activities . Love for Gamification Rewards, challenges, and fun visuals increase motivation. User Persona The use of persona is to represent the needs of a larger group of users whose goals and characteristics are the similar. It reflects the lifestyle of users and give an idea of how to meet users' needs and challenges. As I create the persona, I use the group of age that needs the app more. Name: Sophia Wang Age: 6 Education: 1st grade Occupation: Student Goal...
Read more

Core Mechanics: Building the Math Problem Generator

Image
One of the key mechanics in Pippo Math is the ability to generate random math problems for players to solve. To make this happen, I created a Math Problem Generator in Unity using C# and TextMeshPro for UI text handling. Here’s a step-by-step look at how I built this core feature: 1. Setting Up the Equation Display The first step was to create a space in the UI where the math problems would appear: In Unity, I added a TextMeshPro Text to the scene, naming it EquationText . This text dynamically updates with new math problems as the game progresses. The text field was left empty in the editor because equations would be populated through code. 2. Creating the Math Problem Generator Next, I built a script to handle the generation of random math equations. Create the Script: In the Project panel , I right-clicked > Create > C# Script and named it MathProblemGenerator . Write the Code: Inside the script, I added logic to randomly generate addition and subtra...
Read more