Social

Download resume

BACK

TO TOP

Home

Works

About

Client

Self-led

Read time

Client

5 min

Self-led

Read Time

5 min

Category

Category

Education

View it live

View it live

View it live

View it live

Squabble

Seven

Role

Role

UI/UX Designer

UI/UX Designer

Year

Year

2023

2023

Duration

Duration

2.5 months

2.5 months

PROJECT OVERVIEW

Making learning fun and meaningful

Squabble is an educational gaming app designed to bridge the gap between learning and play within a classroom setting. The task was to design an application that bridges the gap between learning and gaming, making education feel more engaging, rewarding, and intuitive for students in a digital-first world.


As the sole UI/UX designer, I took charge of the entire design process, from user research to prototyping and usability testing. I spoke with students and educators, uncovered key motivation gaps, and developed a playful yet purposeful experience that makes learning feel less like a chore and more like a game.

PROBLEM STATEMENT

Learning should not feel like a chore

Traditional educational tools often feel dull and disconnected from how students engage with digital content today. Many learners find studying boring or stressful, which leads to low motivation and limited retention. While games offer fun and reward, they rarely link directly to meaningful learning outcomes. The challenge was to design an app that makes education feel playful and rewarding without losing its purpose.

design opportunity

Reimagining learning for young children

There is an opportunity to rethink how young students engage with learning by combining education and play in a single app. I plan to create a Singapore-based classroom app designed for primary school children and below that makes learning fun, interactive, and rewarding through game-like experiences.

Design process

Design process

Empathise

Empathise

Define

Define

Ideate

Ideate

Prototype

Prototype

Test

Test

competitive analysis

What’s out there and what’s missing

I assessed the pros and cons of existing competitors to gain insight into the current market and identify opportunities to differentiate my design.


  1. Kahoot! is a game-based learning platform that lets users create and play interactive quizzes in a fun, competitive environment. Widely used in schools and homes, it promotes engagement through live and self-paced games.


Pros


  • Quick creation and hosting of interactive quizzes with a large library of topics.

  • Supports live games and self-paced challenges for flexible learning.

  • Encourages group play and friendly competition to motivate learners.


Cons


  • No character customisation or personalisation features.

  • Quiz questions disappear during gameplay, causing potential confusion.

  • Lacks a strong sense of achievement or rewards.


  1. ClassDojo is a classroom management app that connects teachers, students, and parents. It helps track behaviour, share moments, and build a supportive classroom community.


Pros


  • Builds classroom community by sharing updates and progress with parents.

  • Offers digital portfolios and avatar creation for student engagement.

  • Provides easy access to various teacher tools for smooth classroom management.


Cons


  • Does not include gaming elements to engage learners through play.

  • Lacks competition or challenge features to motivate students.

secondary research

The challenge of keeping students engaged

A study on massively multiplayer online (MMO) games found that allowing players to customise their characters significantly increased motivation over time. The study concluded that customisation had a medium-sized positive effect, supporting the idea that when users can personalise their experience, they feel more engaged and committed.

A study on massively multiplayer online (MMO) games found that allowing players to customise their characters significantly increased motivation over time. The study concluded that customisation had a medium-sized positive effect, supporting the idea that when users can personalise their experience, they feel more engaged and committed.

A study on massively multiplayer online (MMO) games found that allowing players to customise their characters significantly increased motivation over time. The study concluded that customisation had a medium-sized positive effect, supporting the idea that when users can personalise their experience, they feel more engaged and committed.

A study on massively multiplayer online (MMO) games found that allowing players to customise their characters significantly increased motivation over time. The study concluded that customisation had a medium-sized positive effect, supporting the idea that when users can personalise their experience, they feel more engaged and committed.

"Customization in games increase motivation" - Turkay, Selen, and Sonam Adinolf. "The effects of customization on motivation in an extended study with a massively multiplayer online roleplaying game." Cyberpsychology: Journal of Psychosocial Research on Cyberspace 9.3 (2015).

primary Research

Interviewing target users

To better understand the needs and pain points of Singaporean students, I designed a series of questions focused on their learning and gaming habits.

Questions covered:

  • About the student: Age, school, future aspirations, and a bit about themselves

  • Learning preferences: Typical class lessons, whether school feels fun, and their preferred learning style (listening, writing, visual, etc.)

  • Online quiz behaviour: Experience with Kahoot! or similar apps, positive and negative experiences, and suggestions for improvements

  • Gaming behaviour: Past and current gaming habits, favourite games and reasons, and whether those games allow character selections or customisation

To better understand the needs of Singaporean students and their classroom experiences, I crafted a series of interview questions focused on learning behaviours, quiz app usage, and gaming preferences. These questions helped identify key motivation gaps and design opportunities. I then interviewed three Singapore students in primary school.

These are the key insights I gathered from the interviews:

To better understand the needs and pain points of Singaporean students, I designed a series of questions focused on their learning and gaming habits.


Questions covered:


  • About the student: Age, school, future aspirations, and a bit about themselves

  • Learning preferences: Typical class lessons, whether school feels fun, and their preferred learning style (listening, writing, visual, etc.)

  • Online quiz behaviour: Experience with Kahoot! or similar apps, positive and negative experiences, and suggestions for improvements

  • Gaming behaviour: Past and current gaming habits, favourite games and reasons, and whether those games allow character selections or customisation


To better understand the needs of Singaporean students and their classroom experiences, I crafted a series of interview questions focused on learning behaviours, quiz app usage, and gaming preferences. These questions helped identify key motivation gaps and design opportunities. I then interviewed three Singapore students in primary school.


These are the key insights I gathered from the interviews:

To better understand the needs and pain points of Singaporean students, I designed a series of questions focused on their learning and gaming habits.


Questions covered:


  • About the student: Age, school, future aspirations, and a bit about themselves

  • Learning preferences: Typical class lessons, whether school feels fun, and their preferred learning style (listening, writing, visual, etc.)

  • Online quiz behaviour: Experience with Kahoot! or similar apps, positive and negative experiences, and suggestions for improvements

  • Gaming behaviour: Past and current gaming habits, favourite games and reasons, and whether those games allow character selections or customisation


To better understand the needs of Singaporean students and their classroom experiences, I crafted a series of interview questions focused on learning behaviours, quiz app usage, and gaming preferences. These questions helped identify key motivation gaps and design opportunities. I then interviewed three Singapore students in primary school.


These are the key insights I gathered from the interviews:

To better understand the needs and pain points of Singaporean students, I designed a series of questions focused on their learning and gaming habits.


Questions covered:


  • About the student: Age, school, future aspirations, and a bit about themselves

  • Learning preferences: Typical class lessons, whether school feels fun, and their preferred learning style (listening, writing, visual, etc.)

  • Online quiz behaviour: Experience with Kahoot! or similar apps, positive and negative experiences, and suggestions for improvements

  • Gaming behaviour: Past and current gaming habits, favourite games and reasons, and whether those games allow character selections or customisation


To better understand the needs of Singaporean students and their classroom experiences, I crafted a series of interview questions focused on learning behaviours, quiz app usage, and gaming preferences. These questions helped identify key motivation gaps and design opportunities. I then interviewed three Singapore students in primary school.


These are the key insights I gathered from the interviews:

1

Classes are too boring

They find traditional lessons repetitive and wish for more interactive, activity-based learning experiences.

They find traditional lessons repetitive and wish for more interactive, activity-based learning experiences.

2

Longing to belong

Some students desire a stronger bond with their classmates and a greater sense of connection during class activities.

Some students desire a stronger bond with their classmates and a greater sense of connection during class activities.

3

Quizzes bring lessons to life

All students have used quiz apps and agree they’re more enjoyable than standard classroom teaching.

4

Need for clear visuals

Students prefer quiz apps that display both the question and answers on screen, rather than just the answer choices.

Students prefer quiz apps that display both the question and answers on screen, rather than just the answer choices.

5

Visual learning dominates

Two out of three students identify as visual learners, while one prefers auditory methods—highlighting a need for flexible learning styles.

Two out of three students identify as visual learners, while one prefers auditory methods—highlighting a need for flexible learning styles.

6

Customisation boosts engagement

The most loved games among students offer character personalisation, which helps them feel more involved and excited.

The most loved games among students offer character personalisation, which helps them feel more involved and excited.

user persona

Imagining the ideal user

With the insights gathered above, I created a user persona to represent my target audience. This persona reflects the needs, behaviours, and motivations of primary school students in Singapore and helped guide my design decisions throughout the project.

With the insights gathered above, I created a user persona to represent my target audience. This persona reflects the needs, behaviours, and motivations of primary school students in Singapore and helped guide my design decisions throughout the project.

With the insights gathered above, I created a user persona to represent my target audience. This persona reflects the needs, behaviours, and motivations of primary school students in Singapore and helped guide my design decisions throughout the project.

With the insights gathered above, I created a user persona to represent my target audience. This persona reflects the needs, behaviours, and motivations of primary school students in Singapore and helped guide my design decisions throughout the project.

Have a nice project?

Have a nice project?

Get in touch

Get in touch

Behance

LinkedIn

© 2025

gerardcarlq

quintana

Have a nice project?

Have a nice project?

Get in touch

Get in touch

Behance

LinkedIn

© 2025

gerardcarlq

customer journey mapping

Mapping the experience

To better visualise the user’s interaction with the app, I created a journey map. This helped identify pain points and opportunities to enhance engagement and motivation throughout the learning process.

To better visualise the user’s interaction with the app, I created a journey map. This helped identify pain points and opportunities to enhance engagement and motivation throughout the learning process.

To better visualise the user’s interaction with the app, I created a journey map. This helped identify pain points and opportunities to enhance engagement and motivation throughout the learning process.

To better visualise the user’s interaction with the app, I created a journey map. This helped identify pain points and opportunities to enhance engagement and motivation throughout the learning process.

wireframing

Creating the task flow

I mapped out the core task flow from onboarding to making a connection. This served as a lightweight MVP tailored to the project’s timeline, ensuring the experience was focused, intuitive, and testable within a short sprint.

I mapped out the core task flow from onboarding to making a connection. This served as a lightweight MVP tailored to the project’s timeline, ensuring the experience was focused, intuitive, and testable within a short sprint.

I mapped out the core task flow from onboarding to making a connection. This served as a lightweight MVP tailored to the project’s timeline, ensuring the experience was focused, intuitive, and testable within a short sprint.

I mapped out the core task flow from onboarding to making a connection. This served as a lightweight MVP tailored to the project’s timeline, ensuring the experience was focused, intuitive, and testable within a short sprint.

wireframing

Low-fidelity prototyping

I used Figma to create low-fidelity wireframes that mapped out key screens and user flows. This helped me focus on structure and functionality without getting distracted by visuals. It also made it easier to test different layouts, refine interactions, and make fast iterations based on early feedback.

I used Figma to create low-fidelity wireframes that mapped out key screens and user flows. This helped me focus on structure and functionality without getting distracted by visuals. It also made it easier to test different layouts, refine interactions, and make fast iterations based on early feedback.

I used Figma to create low-fidelity wireframes that mapped out key screens and user flows. This helped me focus on structure and functionality without getting distracted by visuals. It also made it easier to test different layouts, refine interactions, and make fast iterations based on early feedback.

I used Figma to create low-fidelity wireframes that mapped out key screens and user flows. This helped me focus on structure and functionality without getting distracted by visuals. It also made it easier to test different layouts, refine interactions, and make fast iterations based on early feedback.

design system

Building a visual language

I created a simple and consistent design system in Figma that included elements such as colour styles, typography and button components. This ensured visual consistency across screens while making it easier to scale and update the interface as needed. The system reflects the playful, student-friendly nature of the app while staying functional and accessible.

I created a simple and consistent design system in Figma that included elements such as colour styles, typography and button components. This ensured visual consistency across screens while making it easier to scale and update the interface as needed. The system reflects the playful, student-friendly nature of the app while staying functional and accessible.

I created a simple and consistent design system in Figma that included elements such as colour styles, typography and button components. This ensured visual consistency across screens while making it easier to scale and update the interface as needed. The system reflects the playful, student-friendly nature of the app while staying functional and accessible.

I created a simple and consistent design system in Figma that included elements such as colour styles, typography and button components. This ensured visual consistency across screens while making it easier to scale and update the interface as needed. The system reflects the playful, student-friendly nature of the app while staying functional and accessible.

wireframing

Building Squabble - High-fidelity prototyping

Using the task flow and low-fidelity wireframes as a foundation, I designed a set of high-fidelity screens in Figma that followed the app’s visual style guide. These screens applied consistent layouts, vibrant colours, and friendly UI elements tailored for younger students. I also annotated key features to clarify design decisions and functionality.

Using the task flow and low-fidelity wireframes as a foundation, I designed a set of high-fidelity screens in Figma that followed the app’s visual style guide. These screens applied consistent layouts, vibrant colours, and friendly UI elements tailored for younger students. I also annotated key features to clarify design decisions and functionality.

Using the task flow and low-fidelity wireframes as a foundation, I designed a set of high-fidelity screens in Figma that followed the app’s visual style guide. These screens applied consistent layouts, vibrant colours, and friendly UI elements tailored for younger students. I also annotated key features to clarify design decisions and functionality.

Using the task flow and low-fidelity wireframes as a foundation, I designed a set of high-fidelity screens in Figma that followed the app’s visual style guide. These screens applied consistent layouts, vibrant colours, and friendly UI elements tailored for younger students. I also annotated key features to clarify design decisions and functionality.

prototyping

Try it out yourself

To simulate the full user experience, I built a working interactive prototype in Figma. This allowed users to navigate the core features, making it easier to test usability and gather feedback (try this link if it's not displaying properly):

To simulate the full user experience, I built a working interactive prototype in Figma. This allowed users to navigate the core features, making it easier to test usability and gather feedback (try this link if it's not displaying properly):

To simulate the full user experience, I built a working interactive prototype in Figma. This allowed users to navigate the core features, making it easier to test usability and gather feedback (try this link if it's not displaying properly):

To simulate the full user experience, I built a working interactive prototype in Figma. This allowed users to navigate the core features, making it easier to test usability and gather feedback (try this link if it's not displaying properly):

USABILITY TESTING

Testing with real users

With the insights gathered earlier, I returned to the same three Singapore-based primary school students for usability testing. This provided continuity and allowed me to evaluate whether the improved design successfully addressed their initial learning challenges.

They were asked to complete key tasks such as logging in, selecting a character, joining a lobby, answering questions, and exploring the store. Throughout the session, I encouraged them to speak aloud and share what they thought each element on the screen represented. These were the key takeaways:

With the insights gathered earlier, I returned to the same three Singapore-based primary school students for usability testing. This provided continuity and allowed me to evaluate whether the improved design successfully addressed their initial learning challenges.

They were asked to complete key tasks such as logging in, selecting a character, joining a lobby, answering questions, and exploring the store. Throughout the session, I encouraged them to speak aloud and share what they thought each element on the screen represented. These were the key takeaways:

With the insights gathered earlier, I returned to the same three Singapore-based primary school students for usability testing. This provided continuity and allowed me to evaluate whether the improved design successfully addressed their initial learning challenges.

They were asked to complete key tasks such as logging in, selecting a character, joining a lobby, answering questions, and exploring the store. Throughout the session, I encouraged them to speak aloud and share what they thought each element on the screen represented. These were the key takeaways:

With the insights gathered earlier, I returned to the same three Singapore-based primary school students for usability testing. This provided continuity and allowed me to evaluate whether the improved design successfully addressed their initial learning challenges.

They were asked to complete key tasks such as logging in, selecting a character, joining a lobby, answering questions, and exploring the store. Throughout the session, I encouraged them to speak aloud and share what they thought each element on the screen represented. These were the key takeaways:

1

I love the art style! It’s like I’m playing a game but it’s for learning.

The game-inspired visuals and character customisation created a strong sense of engagement, reinforcing the importance of visual design in motivating young users.

The game-inspired visuals and character customisation created a strong sense of engagement, reinforcing the importance of visual design in motivating young users.

2

Definitely better than Kahoot! 100% would play again just so I could look cooler than my classmates.

The use of competition, class-wide goals, and personalisation resonated strongly, making learning feel exciting and socially rewarding.

The use of competition, class-wide goals, and personalisation resonated strongly, making learning feel exciting and socially rewarding.

3

I like how the class needs to hit an average goal so we get to have a bonus reward.

This feedback confirmed that shared incentives encouraged teamwork while still being fun and low pressure.

Reflection

Final thoughts

Overall, the responses were positive. Students found the app entertaining, easy to use, and motivating. Squabble successfully addressed their earlier frustrations with repetitive classroom activities and helped create a more connected and enjoyable learning environment. The app's gamified features, collaborative goals, and customisation options turned passive learning into something more engaging and socially rewarding.

Designing Squabble helped me understand the impact of motivation, social interaction, and visual play in educational tools. By grounding decisions in real student feedback and iterating through testing, I was able to create an experience that felt both fun and purposeful. If I were to continue developing this project, I’d explore streamlining the onboarding flow, expanding content variety, and adding richer personalisation to keep learners engaged over time.

Overall, the responses were positive. Students found the app entertaining, easy to use, and motivating. Squabble successfully addressed their earlier frustrations with repetitive classroom activities and helped create a more connected and enjoyable learning environment. The app's gamified features, collaborative goals, and customisation options turned passive learning into something more engaging and socially rewarding.


Designing Squabble helped me understand the impact of motivation, social interaction, and visual play in educational tools. By grounding decisions in real student feedback and iterating through testing, I was able to create an experience that felt both fun and purposeful. If I were to continue developing this project, I’d explore streamlining the onboarding flow, expanding content variety, and adding richer personalisation to keep learners engaged over time.

Overall, the responses were positive. Students found the app entertaining, easy to use, and motivating. Squabble successfully addressed their earlier frustrations with repetitive classroom activities and helped create a more connected and enjoyable learning environment. The app's gamified features, collaborative goals, and customisation options turned passive learning into something more engaging and socially rewarding.


Designing Squabble helped me understand the impact of motivation, social interaction, and visual play in educational tools. By grounding decisions in real student feedback and iterating through testing, I was able to create an experience that felt both fun and purposeful. If I were to continue developing this project, I’d explore streamlining the onboarding flow, expanding content variety, and adding richer personalisation to keep learners engaged over time.

Overall, the responses were positive. Students found the app entertaining, easy to use, and motivating. Squabble successfully addressed their earlier frustrations with repetitive classroom activities and helped create a more connected and enjoyable learning environment. The app's gamified features, collaborative goals, and customisation options turned passive learning into something more engaging and socially rewarding.


Designing Squabble helped me understand the impact of motivation, social interaction, and visual play in educational tools. By grounding decisions in real student feedback and iterating through testing, I was able to create an experience that felt both fun and purposeful. If I were to continue developing this project, I’d explore streamlining the onboarding flow, expanding content variety, and adding richer personalisation to keep learners engaged over time.

Have a nice project?

Have a nice project?

Get in touch

Get in touch

Behance

LinkedIn

© 2025 gerardcarlq - All Rights Reserved.