🔈 Click to Play
Place above button & set opacity to 0
🔈 Click to Play
Place above button & set opacity to 0

Fin-Tastic Division

Fin-Tastic Division

ROLE

UX/UI Designer, UX Researcher

UX/UI Designer, UX Researcher

Timeline

Jan 2024 – May 2024

Jan 2024 – May 2024

Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

Project Overview

Project Overview

Fin-Tastic Division is an educational math game our team developed as part of the core Software Engineering subject in my Master’s in Computer Science degree. In this capstone project, our class was divided into four teams each assigned a different mathematical operation to turn into a 2D game using Unity. My team was given the division function along with an ocean-themed concept, featuring playful fish characters to make learning more engaging for young students.

Fin-Tastic Division is an educational math game our team developed as part of the core Software Engineering subject in my Master’s in Computer Science degree. In this capstone project, our class was divided into four teams each assigned a different mathematical operation to turn into a 2D game using Unity. My team was given the division function along with an ocean-themed concept, featuring playful fish characters to make learning more engaging for young students.

Our goal was to design and develop an interactive 2D learning experience that would help first- and second-grade students understand division in a fun, visual, and engaging way. Over the course of five months, our 12-member team collaborated across roles

After fully developing and testing the game, we prepared it for publication on the Amazon Appstore, ensuring it met accessibility, usability, and performance standards for child-friendly learning games.

Our goal was to design and develop an interactive 2D learning experience that would help first- and second-grade students understand division in a fun, visual, and engaging way. Over the course of five months, our 12-member team collaborated across roles


After fully developing and testing the game, we prepared it for publication on the Amazon Appstore, ensuring it met accessibility, usability, and performance standards for child-friendly learning games.

Problem

Problem

Children in grades 1-2 struggle to grasp division because it is both abstract and non-visual. Existing educational apps were either too text-heavy, lacked feedback, or weren’t suited for small hands and developing motor skills.

Children in grades 1-2 struggle to grasp division because it is both abstract and non-visual. Existing educational apps were either too text-heavy, lacked feedback, or weren’t suited for small hands and developing motor skills.

Without engaging visuals, voice guidance, or interactive feedback, kids quickly lost interest and stopped practicing.

Without engaging visuals, voice guidance, or interactive feedback, kids quickly lost interest and stopped practicing.

We wanted to address this by designing an app that made division tangible, visual, and fun supporting curiosity instead of frustration.

We wanted to address this by designing an app that made division tangible, visual, and fun supporting curiosity instead of frustration.

Goal

Goal

To create a colorful, ocean-themed 2D game that replaces rote memorization with play.
Children tap, listen, and explore receiving immediate feedback, cheerful animations, and rewards for each correct answer.

To create a colorful, ocean-themed 2D game that replaces rote memorization with play.
Children tap, listen, and explore receiving immediate feedback, cheerful animations, and rewards for each correct answer.

By blending soft colors, calming soundscapes, and expressive fish characters, our aim was to make learning division as immersive as exploring a coral reef.

By blending soft colors, calming soundscapes, and expressive fish characters, our aim was to make learning division as immersive as exploring a coral reef.

The design needed to:

The design needed to:

  • Offer instant visual feedback (fish reactions, animations).

  • Use voice assistance to support early readers.

  • Ensure tap-friendly interfaces for small hands.

  • Encourage calm focus through music and colors.

  • Offer instant visual feedback (fish reactions, animations).

  • Use voice assistance to support early readers.

  • Ensure tap-friendly interfaces for small hands.

  • Encourage calm focus through music and colors.

Research Approach

Research Approach

To understand how children interact with learning games, I used a qualitative research approach combining:

To understand how children interact with learning games, I used a qualitative research approach combining:

I asked them simple questions about what they liked, what felt confusing, and what made them stop playing.

Watching kids aged 6-8 (including my nephew and neighborhood children) play other math apps.

Observation:

Observation:

Observation:

Watching kids aged 6–8 (including my nephew and neighborhood children) play other math apps.

Watching kids aged 6–8 (including my nephew and neighborhood children) play other math apps.

Informal Interviews:

Informal Interviews:

Informal Interviews:

I asked them simple questions about what they liked, what felt confusing, and what made them stop playing.

I asked them simple questions about what they liked, what felt confusing, and what made them stop playing.

Peer Collaboration:

Peer Collaboration:

Peer Collaboration:

I discussed key takeaways with my teammates to ensure the final design balanced educational structure with engaging, child-friendly UX principles.

I discussed key takeaways with my teammates to ensure the final design balanced educational structure with engaging, child-friendly UX principles.

I discussed key takeaways with my teammates to ensure the final design balanced educational structure with engaging, child-friendly UX principles.

What motivates children to engage with learning games?

What challenges do kids face when learning division?

How can UX make math feel playful and rewarding?

What motivates children to engage with learning games?

What challenges do kids face when learning division?

How can UX make math feel playful and rewarding?

Affinity Diagram & Iterations

Affinity Diagram & Iterations

I translated the findings into an affinity map, grouping insights around engagement, readability, and rewards.

I translated the findings into an affinity map, grouping insights around engagement, readability, and rewards.

This process revealed four UX priorities:

This process revealed four UX priorities:

  • Guidance: Include a voice assistant to read prompts.

  • Feedback: Reward every action with motion and sound.

  • Focus: Maintain simple layouts with minimal text.

  • Calmness: Use ocean hues and soft transitions to reduce cognitive load

  • Guidance: Include a voice assistant to read prompts.

  • Feedback: Reward every action with motion and sound.

  • Focus: Maintain simple layouts with minimal text.

  • Calmness: Use ocean hues and soft transitions to reduce cognitive load

This process clarified that users needed simplicity, relevance, and connection — three pillars that shaped the app’s design strategy.

This process clarified that users needed simplicity, relevance, and connection — three pillars that shaped the app’s design strategy.

View my affinity diagram here: Open Live Embed ↗

Affinity diagram
Affinity diagram
Affinity diagram

User Persona

User Persona

To design with empathy, I created two personas that represent early learners aged 6-8. Each persona was informed by observations and interviews with children, parents, and teachers. They helped me understand how young users think, play, and learn best.


This guided every design decision to make Fin-Tastic Division both engaging and accessible.

To design with empathy, I created two personas that represent early learners aged 6-8. Each persona was informed by observations and interviews with children, parents, and teachers. They helped me understand how young users think, play, and learn best.


This guided every design decision to make Fin-Tastic Division both engaging and accessible.

Exploration & Ideation

Exploration & Ideation

I began with paper wireframes, sketching ideas for the home screen and gameplay flow. Each iteration focused on simplicity a single call to action, gentle animations, and clearly spaced buttons.

I began with paper wireframes, sketching ideas for the home screen and gameplay flow. Each iteration focused on simplicity a single call to action, gentle animations, and clearly spaced buttons.

Through multiple sketches, i validated:

Through multiple sketches, i validated:

  • Placement of key navigation elements.

  • Ideal tap size for small fingers.

  • How visual storytelling (fish, bubbles, treasure chests) could reinforce the math journey.

  • Placement of key navigation elements.

  • Ideal tap size for small fingers.

  • How visual storytelling (fish, bubbles, treasure chests) could reinforce the math journey.

Wireframing & Lo-Fi Prototyping

Wireframing & Lo-Fi Prototyping

I created low-fidelity wireframes in Figma to visualize the full learning flow — from Home → Settings → Profiles → Records → Play → Pause → Completion. Each screen was designed with a single clear purpose to reduce cognitive load and help children stay focused on learning division through play.

I created low-fidelity wireframes in Figma to visualize the full learning flow — from Home → Settings → Profiles → Records → Play → Pause → Completion. Each screen was designed with a single clear purpose to reduce cognitive load and help children stay focused on learning division through play.

Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

Large buttons, simple layouts, and minimal text ensured accessibility for young learners, while emotional feedback (happy or sad fish) made each response rewarding and relatable. The voice-assisted prompts and calm visuals helped maintain engagement throughout gameplay. This phase was key in balancing clarity, usability, and motivation, laying the foundation for a high-fidelity prototype that made math feel like an adventure.

Large buttons, simple layouts, and minimal text ensured accessibility for young learners, while emotional feedback (happy or sad fish) made each response rewarding and relatable. The voice-assisted prompts and calm visuals helped maintain engagement throughout gameplay. This phase was key in balancing clarity, usability, and motivation, laying the foundation for a high-fidelity prototype that made math feel like an adventure.

LowFidelitySketches
LowFidelitySketches
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

High-Fidelity Design

High-Fidelity Design

Once the wireframes were finalized, I transitioned to high-fidelity prototypes that combined visuals, sound, and interactivity using Unity 2D. This phase focused on translating the playful ocean theme into an engaging, tactile experience for children aged 6-8.

Once the wireframes were finalized, I transitioned to high-fidelity prototypes that combined visuals, sound, and interactivity using Unity 2D. This phase focused on translating the playful ocean theme into an engaging, tactile experience for children aged 6-8.

In addition to UX and gameplay design, I also contributed to the creation of character illustrations, backgrounds, and basic animations using Adobe Firefly, Sketchbook, and Unity. These assets helped establish a cohesive underwater world that was both visually delightful and cognitively supportive for young learners.

In addition to UX and gameplay design, I also contributed to the creation of character illustrations, backgrounds, and basic animations using Adobe Firefly, Sketchbook, and Unity. These assets helped establish a cohesive underwater world that was both visually delightful and cognitively supportive for young learners.

Design Evolution:

Design Evolution:

  • Replaced text with voice narration and iconography.

  • Added gentle animations for each correct/incorrect answer.

  • Introduced ocean gradients and soft shadows for a calm mood.

  • Refined fish expressions to communicate success or encouragement.

  • Created animated UI elements (play buttons, treasure chest rewards) for enhanced interactivity.

  • Replaced text with voice narration and iconography.

  • Added gentle animations for each correct/incorrect answer.

  • Introduced ocean gradients and soft shadows for a calm mood.

  • Refined fish expressions to communicate success or encouragement.

  • Created animated UI elements (play buttons, treasure chest rewards) for enhanced interactivity.

🎮 Gameplay Experience

🎮 Gameplay Experience

🌊 Animated Game Screens

Ocean-themed visuals come to life with playful bubble animations and expressive fish characters that react to each answer—cheering with happy fish for correct responses and showing sad fish for incorrect ones.

🎵 Calming Music & Sounds

Background music and ambient sound effects are carefully selected to maintain focus and relaxation, ensuring a calm, enjoyable environment during gameplay.

🗣️ Voice Assistant

A gentle voice assistant was integrated into the game screen to read out each math question, supporting early readers and enhancing accessibility during gameplay.

👆 Tap-Friendly Interface

Designed specifically for small hands, all interactive elements are large, simple, and responsive—perfect for kids using mobile devices.

Reflection

Reflection

Sharpening my design mindset
Designing Fin-Tastic Division reminded me that UX for children goes beyond usability it’s about building confidence through play.

Sharpening my design mindset
Designing Fin-Tastic Division reminded me that UX for children goes beyond usability it’s about building confidence through play.

People first, always
This project pushed me to think empathetically every animation, color, and interaction had to serve both clarity and joy. I deepened my understanding of accessibility and consistency while experimenting with Figma components and Unity animation systems to maintain a cohesive design language.

People first, always
This project pushed me to think empathetically every animation, color, and interaction had to serve both clarity and joy. I deepened my understanding of accessibility and consistency while experimenting with Figma components and Unity animation systems to maintain a cohesive design language.

Iteration is everything
Working closely with my teammates taught me the power of quick testing and feedback loops. Every small improvement from animation speed to layout spacing made the experience smoother. More importantly, it taught me that meaningful design isn’t just about solving a problem, but creating moments of curiosity, connection, and calm engagement.

Iteration is everything
Working closely with my teammates taught me the power of quick testing and feedback loops. Every small improvement from animation speed to layout spacing made the experience smoother. More importantly, it taught me that meaningful design isn’t just about solving a problem, but creating moments of curiosity, connection, and calm engagement.

Send an email or DM and I'll get back to you asap! :)

Made with ☕︎, 🎶, & ♥️ @ Sai Surya Karthik

Send an email or DM and I'll get back to you asap! :)

Made with ☕︎, 🎶, & ♥️ @ Sai Surya Karthik

Send an email or DM and I'll get back to you asap! :)

Made with ☕︎, 🎶, & ♥️ @ Sai Surya Karthik