AR in Education: Instill Student’s Interest in Maths using Gamification

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...

Prototyping in Figma After completing the initial wireframes, the next step was to turn those static designs into a clickable prototype using Figma. This phase was essential in simulating the user experience, testing the flow of interactions, and identifying improvements before moving into development. By creating a functional model, I could visualize how each screen connected, ensuring that Pippo Math felt intuitive and engaging for kids aged 6 to 10. Lo-Fi  The first step in the process was creating a Lo-Fi (Low-Fidelity) Prototype . This version focused on the app’s core structure and user flow without worrying about visuals or colors. The goal was to map out the player’s journey, from launching the app to solving math challenges. In the lo-fi prototype, I kept things simple: Basic shapes and placeholders represented buttons and text fields. Key screens like the Landing Page , Gameplay Screen , and Feedback Screen were laid out. Navigation paths were tested to ensur...

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 ...