Lo-Fi & Hi-Fi

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 ensure smooth transitions between each step.

This allowed me to quickly test the overall flow and make adjustments without getting caught up in design details.



















Hi-Fi

Once the core structure was validated, I moved on to the Hi-Fi (High-Fidelity) Prototype. This stage focused on integrating the app’s branding, color scheme, and character design. The hi-fi prototype made the app feel more polished and closer to the final product.

























Feedback

During the review process, my lecturers provided valuable feedback that helped shape the project. Key points included:

  • Visual Style: The overall design was considered too minimalist for a children’s learning game. They suggested incorporating more playful visual elements to better capture the target audience’s attention.

  • Font Choice: The original font felt too plain and formal. Lecturers recommended exploring friendlier, more dynamic fonts to create a sense of fun while maintaining readability.

  • Engagement Elements: There was a need to enhance visual excitement — adding more colors and background elements to make the app feel more lively and engaging.

  • Balancing Fun and Functionality: They emphasized finding a balance between playfulness and usability, ensuring that visual enhancements didn’t distract from the game’s educational purpose.

This feedback was instrumental in refining Pippo Math, pushing me to rethink the app’s visual language and improve the overall user experience. The next steps involved integrating these suggestions, focusing on creating a design that feels more fun, engaging, and approachable for young learners.

Example from one of my lecturer











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