During practice sessions for the math state test, I noticed many of my students were disengaged. Math is a difficult subject for many, but I noticed a major drop in attention, understanding, and motivation when we started to review algebra problems. For many 6th graders, this is the first time they have seen variables in math. But algebra is a core concept for students to understand as their math learning continues.
So using time in our Tech and Design class, I prompted students to brainstorm ideas with me of how we could gamify our math practice. Students had already learned the basics of Figma, UX design principles, and gamification in previous design lessons. Now it was time to apply their design knowledge to their math knowledge.
First my students and I started with framing our challenge for this design sprint:
The Educational Context
This prototype aligns with New York State Common Core Standard 6.EE.2, which asks students to “Write, read, and evaluate expressions in which letters stand for numbers”
This standard asks students to apply the distributive property to generate equivalent expressions. It focuses on understanding and manipulating expressions, including identifying parts of an expression, understanding order of operations, and evaluating expressions with variables.
Each question is mapped to a math skill such as:
Combining like terms ( x + x + x = 3x )
Recognizing equivalency ( 4 + y + y + y + y = 4 + 4y )
Distributing variables and numbers ( 5(d + 1) = 5d + 5 )
We designed one screen per question, complete with carrot answer choices and bunny feedback.
Gamification: From Worksheets to Bunny Snacks
In the game, the player helps a bunny solve math problems by choosing the correct carrot labeled with an algebraic expression. Upon selection
The correct answer ends in a happy bunny eating the carrot
The incorrect answer turns the bunny angry
Each reaction happens through Smart Animate transitions, which includes feedback loops so the user can try again until they get the correct answer
Mad Bunny
Students Co-Design:
Empowering Learners as Designers
I couldn’t design this game alone — it required the collaboartion of my students’ creativity and feedback about the right questions to ask.
In groups, students:
Drew bunnies, carrot styles and other carrots in FigJam
Brainstormed game Ideas and screen layouts
Voted on the bunny’s facial expression color choices, reactions, and bunny variants
Integrating students’ artwork into the prototype gave them creative ownership and increased their emotional investment in the learning experience.
UX Design Process in Figma
Visual Design
Created reusable Figma components for bunnies, carrots, questions, and buttons
Applied UX design principles like contrast, spacing, and hierarchy
Used consistent visual language: soft pastels, rounded edges, white text on sky-blue backgrounds
Interaction Design
Used Smart Animate Figma Prototype features to animate the bunny from default variant to either happy or mad bunny variant
Built over 32 screens to simulate math questions and their possible responses
Strategically placed carrots for spatial balance and tap-friendly areas
Usability Testing & Classroom Feedback
I tested the prototype in a small group setting with my students.
They laughed when the bunny got mad
They cheered when they got the rught answer
One student said: “I love this game — Can I design a cat for the next level?”
This activity was a fun and engaging way for students to enage in their learning and expand their design skills in the process. This is a perfect example of multimodal instruction, a teaching approach that uses multiple methods to help students learn. Creating a math game prototype with students allowed students to enageg in visual, text, audio, interaction, and technology as a way of reinforcing their understanding of important math concepts. Research shows that multimidal instruction engages students with different learning styles and helps students better connect with, retain, and apply their knowledge.
UX Design Takeaways
1. Emotional Design Matters
Children respond instinctively to faces and feedback. A frown or smile can teach faster than a red X or green checkmark
2. Play is a Learning Modality
By embedding math questions in character-driven scenarios, the prototype taps into narrative learning, trial and error, and visual problem-solving.
3. No-Code Tools Deliver High-Fidelity Experiences
Figma’s animation and prototyping tools are powerful enough to simulate gameplay, transitions, and feedback loops.
4. Designing with Students Boosts Engagement
When students saw their bunny in the prototype, it transformed their role from user to co-designer.
What's Next?
The students and I are learning how to:
Transfer the prototype to Framer for a live web version
Add sounds, score tracking, and Next Question transitions
Build a reusable template so other teachers can input their own math problems
Explore deployment to ipads or classroom Chromebooks
Reflection
This case study is about more than just a bunny game — it’s proof that math can be fun and engaging using multimodal instruction, student design, and User Experience frameworks.
As a UX Designer in EdTech, I’m always excited about solutions that bring play, creativity, and academic rigor together. And if one bunny can make students laugh while learning algebra… imagine what we could build next.