An Application Design for MathPlay: Enhanced Math Learning Games

A Research Project Presented to the Introduction to

Human Computer Interaction (HC101)

RESEARCHER
ALBUTRA, SILVER MAJESTY
BITOCO, WHILMAR
DEL ROSARIO, ANGELINE MARIEL
LUNGAY, GERMANY
OMALAY, ROMEO JR.
SARIBA, JUNUEL

ADVISER
EBRAHIM E. DIANGCA
 OCTOBER 2024
ABSTRACT
Many learning apps today struggle to effectively engage users, particularly in
complex subjects like mathematics. Our platform, MathPlay, addresses this issue by
leveraging Human-Computer Interaction (HCI) principles to create a practical and user-
friendly interface that is easy to navigate. Additionally, we incorporate Computer Aided
Instruction (CAI) to ensure that users not only understand each topic but remain actively
engaged. By making easy to understand lessons with roadmaps from where they
should start and interactive questions each lesson to keep the users engaged.

In conclusion, our goal is to design an intuitive app that makes learning

mathematics effective and efficient, delivering a high-quality experience tailored to the
individual needs of our users. By focusing on user experience and engagement, we aim
to help individuals understand mathematical concepts with confidence and ease.
 ACKNOWLEDGEMENT

We express our sincere gratitude and appreciation to everyone who has offered
invaluable support and insights while developing our research paper, “MathPlay:
Enhance Math Learning Through Games Design”.

First and foremost, we thank God, the Almighty, for his showers of blessing
throughout our research work to complete the research successfully.

We would like to express our deepest gratitude to our great Instructor, Mr. Ebrahim E.
Diangca, for giving us the opportunity to do this research and providing valuable
guidance and insights throughout this research. His passion, sincerity, and motivation
has greatly inspired us.

Finally, we thank our beloved parents for their encouragement, patience, love, and
unwavering support throughout the academic process, which played a fundamental role
in the success of this research project.
 INTRODUCTION

Math has a reputation of being an unpopular mix of difficult and boring. Many
students just aren’t excited to learn about math. And when students aren’t excited, they
tend to do the bare minimum before moving on to something they’d rather be doing,
which isn’t going to help set them up for success in math class.[1] One of the biggest
reasons why students find math hard is because they don’t understand its value in real
life. This attitude becomes harder to shake off when students are about to start high
school math, which is more theory-based.[2] Math is built on sequential learning. If a
student didn’t fully understand a previous lesson’s concept, they are likely to struggle
when newer concepts are introduced. To reduce fractions, students need to know
division first; to do algebra, students need to be comfortable with multi-step arithmetic,
and so on. Unfortunately, many students who are struggling with math feel
uncomfortable or embarrassed asking questions in class when their teacher has already
moved on to the next lesson.[3]

The most common reasons students struggle with math include boredom,
perceived irrelevance, and a shaky understanding of foundational concepts. Boredom
often arises when students feel that the material is irrelevant or not applicable to their
lives, leading to disengagement from the learning process. When students are bored,
they are less likely to invest the time and effort necessary to grasp complex concepts.

Seeing math as irrelevant makes the problem worse. Many students question the
necessity of learning specific math topics, especially if they cannot see their application
in everyday life. This lack of connection can make the subject feel abstract and
disconnected from their experiences, further diminishing their motivation to learn.
Additionally, a shaky understanding of foundational concepts creates significant barriers
to success in more advanced mathematical topics. Math is inherently cumulative; if
students do not master earlier skills, such as basic arithmetic or fractions, they will likely
struggle with more complex ideas, such as algebra or geometry. This cumulative nature
can lead to feelings of inadequacy and anxiety, further discouraging students from
attempting to engage with the material.
 Recognizing these interconnected challenges, MathPlay aims to provide students
with clear, engaging lessons that not only teach mathematical concepts but also
demonstrate their relevance to real-world applications. Our platform features animated
video lessons designed to capture students' attention and cater to various skill levels,
ensuring that every learner can find material suited to their needs. By breaking down
complex concepts into digestible segments, we help students build confidence and
competence in their mathematical abilities.

Furthermore, MathPlay integrates an advanced AI system that personalizes the

learning experience by providing instant feedback and answering specific questions that
students may have as they progress through the material. This feature allows learners
to seek clarification and support tailored to their unique needs, fostering a deeper
understanding of the subject matter.

To fight boredom and increase motivation, MathPlay includes a fun 2D indie-

game that turns learning into an interactive adventure. This feature encourages
students to dive into math through challenges, quizzes, and rewards, making them feel
accomplished and excited. By providing more reasons to engage with math, MathPlay
improves their learning experience, boosts their chances of success, and helps them
develop a lasting appreciation for the subject.
A. OVERVIEW
Mathematics, often regarded as one of the most challenging subjects, can
feel tedious and difficult for many learners. Despite the vast availability of online
resources, many students continue to struggle with grasping key math concepts.
This research aims to design an app specifically to address these challenges and
create a more effective learning experience. By applying principles of Human-
Computer Interaction (HCI), the app will have an engaging and intuitive interface
tailored to diverse students. Additionally, the use of Computer-Assisted
Instruction (CAI) will support deeper understanding and enjoyment of math,
ultimately improving student performance and fostering a greater appreciation for
the subject. Features such as interactive animations, video lessons, and
engaging activities—ranging from multiple-choice questions to enumeration—will
suit every user's needs and preferences. MathPlay ensures that every user is
catered to and considered, which is crucial for senior high school students.
Senior high students, typically aged 16 to 18, face increased academic pressure
as they prepare for college or careers, making effective learning tools particularly
important. They need resources that not only help them master complex topics
like algebra, trigonometry, and calculus but also engage them through practical
applications and interactive learning methods.
B. ORGANIZATION STRUCTURE

Figure 1 illustrates the organizational structure of the app, highlighting the

various user roles. It includes the owner, who oversees the app, the system
administrator, who manages it, and the users, who interact with it.

Figure 1: Organizational Structure

C. PROBLEMS ENCOUNTERED
 First impressions play a crucial role in user engagement. Having a good
first impression with your new users could be the difference between them
opening back the app or permanently deleting it. Having user-friendly and
intuitive design with easy to navigate content will address this concern.

Consistency is one of the most important principles in application design.

A familiar and consistent design helps users feel comfortable, reducing the
learning curve significantly or even eliminating it altogether. When users
encounter predictable patterns, they can focus more on completing tasks rather
than figuring out how the interface works. This not only improves usability but
also fosters trust, making users more likely to engage with the application.

Keeping users engaged is one of the most important goals in application

development. Adding social features like leaderboards, multiplayer activities, or
community engagement introduces competition and cooperation, making the app
more enjoyable. The key is finding the right balance between fun and educational
content, encouraging users to return daily and build lasting habits. Additionally,
tailoring learning paths to individual interests enhances content relevance,
ensuring the app remains engaging and valuable over time.

D. EXISTING BUSINESS PROCESS

 This section outlines the flow of key user interactions within the system, based on
our related app. The following figures demonstrate different stages of user engagement,
from logging in to exploring subjects and joining courses. These processes highlight
how users navigate through various pages and perform specific tasks like selecting
grade levels and participating in activities.

Figure 2 shows how a user lands on the Login page where they can enter their
credentials to login. If the credentials are correct the user is then redirected to the
dashboard otherwise an error message will appear.

Figure 2. Login

Figure 3 shows how users land on the Explore page, where they can either
navigate to another page using the navigation bar or pick a subject they’re interested in.
After selecting a subject, they can choose their grade level and then select a topic for
that grade, which leads them to an activity to complete.

Figure 3. Explore
 Figure 4 illustrates how the user lands at the Homepage, where users can either
navigate to other pages using the navigation bar or join a course. After joining a course,
users need to select their desired grade level, allowing users to start learning the
material.

Figure 4. Home Page

E. GENERAL OBJECTIVE
The main objective of this research, “An Application Design for MathPlay:
Enhanced Math Learning Games,” is to design and create a user-friendly and
intuitive prototype specifically for senior high school students. The prototype will
incorporate the power of Computer-Aided Instruction (CAI) and the principles of
Human-Computer Interaction (HCI) to create a more engaging and effective
learning experience for students, focusing on practical applications of
mathematics.

F. SPECIFIC OBJECTIVE
1. To design an interactive and visually appealing user interface that is
intuitive and easy to navigate, adhering to Human-Computer Interaction
(HCI) principles.
2. To ensure users feel comfortable using the app, offering users the ability
to ask questions through an integrated Artificial Intelligence feature.
3. To enable users to summarize lessons for better productivity and
enhanced understanding.
4. To help users grasp real-life applications of each topic by offering concise
lessons and engaging animations.
4.1. To design the system flexible adding a custom quiz type that suits
every user's preferences which includes matching type, multiple
choice, and identification.
5. To design an app that makes learning math fun and enjoyable.
G. SCOPE AND LIMITATION

This research focuses on the design of a prototype for MathPlay:

Enhanced Math Learning Games, an educational application aimed at improving
math skills for senior high school students. The application will incorporate
interactive games, quizzes, and tutorials based on the principles of Computer-Aided
Instruction (CAI) and Human-Computer Interaction (HCI). The system will target key
mathematical concepts such as algebra, trigonometry, and calculus, tailored for
students in grades 11 and 12. The primary objective is to create a user-friendly and
intuitive interface that enhances student engagement and supports the mastery of
complex mathematical topics.

The study will be limited to the design and development of a prototype and
will not cover the full-scale implementation of the final product. Due to time
constraints, testing will only be conducted at Aces Tagum College Inc., specifically
among a select group of senior high school students. As a result, the findings on the
effectiveness of MathPlay will be limited to this specific environment and may not
fully represent its impact on a broader population of senior high school students.
Broader testing and long-term evaluations will be outside the scope of this research.
H. RELATED STUDY
While good design is important, having the essential features is even more
critical. Understanding which design to incorporate is vital for both users and
developers. Creating a learning app that is practical and meets user needs is key to its
success.

Below are the different features we incorporate in our application from various
systems which are useful and practical making sure each feature facilitates our users'
needs.

My Math Academy, Khan Academy, and Quizlet are three educational platforms
with distinct strengths, designed to enhance learning in different ways. My Math
Academy focuses exclusively on mathematics, using a combination of gamification, AI-
generated problems, and personalized feedback to make math learning engaging and
adaptive to individual students' needs. It emphasizes interactive exercises and instant
feedback to build both understanding and motivation. [4] Khan Academy offers a wide
range of free educational content across multiple subjects, including math, with in-depth
instructional videos and interactive practice exercises, making it ideal for self-paced
learning. [5] Lastly, Quizlet is centered around memorization and review, featuring
flashcards, quizzes, and collaborative learning tools. With its focus on quick
assessments and immediate feedback, Quizlet supports efficient study habits and
content retention across diverse subjects. [6]

Each platform brings unique value to education, with My Math Academy

specializing in math mastery, Khan Academy providing comprehensive subject
coverage, and Quizlet enhancing study and review practices.
 FEATURES MY MATH KHAN QUIZLET MATH PLAY
ACADEMY ACADEMY

Instructional videos ✔ ✔ ✔

Gamification ✔ ✔

Instant feedback ✔ ✔

Free educational content ✔ ✔ ✔

Interactive practice ✔ ✔ ✔ ✔
exercise

Focus on mathematics ✔ ✔
only

AI generated ✔ ✔
question/problems

Pre-made study lesson ✔ ✔ ✔ ✔

Table 1. Comparison Table

 PROJECT DEVELOPMENT METHODOLOGY

To create great user experiences, our team uses the Interactive Design (IxD)
Process, a five-stage methodology that includes discovering user needs, analyzing
them, designing a solution, prototyping, and finally, implementing and deploying it.
Interactive System Design is an approach focused on building user-friendly and
effective systems. It emphasizes designing both a seamless User Experience (UX)
and a clear User Interface (UI) to ensure users can interact with the system easily
and efficiently. This process applies to websites, mobile applications, and software
applications. As a dynamic and evolving field, Interactive System Design continually
seeks to create systems that are user-friendly, efficient, and engaging.

Figure 5. Interactive System Design Life Cycle (ISLC)

 Figure 4 illustrates the Interactive System Design Life Cycle (ISDLC), a
structured approach to developing user-centered interactive systems with a focus on
meeting user needs through iterative design. The process typically includes several
phases: requirements gathering, where user needs and system requirements are
identified; design, which involves creating wireframes, prototypes, and interface
layouts; implementation, where the system is built according to the design
specifications; testing, which evaluates the system’s functionality, usability, and user
satisfaction; deployment, where the system is released for actual use; and
maintenance, involving ongoing updates and improvements. This cycle promotes
continuous feedback and refinement to ensure an optimal user experience.
 RESULT AND DISCUSSION

This section presents the findings and implications of the research conducted on
the development of MathPlay, an educational application designed to enhance
mathematics learning for high school students. As technology continues to reshape
education, it is crucial to assess how innovative tools can effectively address the
challenges associated with learning mathematics, which many students find complex
and disengaging. The results of this study illustrate how MathPlay not only facilitates a
deeper understanding of mathematical concepts through interactive gameplay but also
promotes an adaptive learning environment that caters to individual student needs. This
discussion will explore the impact of MathPlay on student engagement, comprehension,
and attitudes toward mathematics, as well as the potential for further development and
application in educational settings.

A. ANALYSIS
Narrative story of student’s interaction with the entire system.

Edward’s experience while using MathPlay:

Edward, a grade 12 student who is deeply interested in

mathematics, is looking for an app that could help him understand various
mathematical topics in an easy and fun way. He stumbles upon an app
called MathPlay, excited he installed the app looking forward to seeing
what’s unique about this app.

Login Page Interaction:

● Upon opening the app Edward is welcomed by a clean and intuitive

user interface instantly making him feel welcomed.
● Edward then creates and verifies his account then proceeds to
login.
Dashboard Page Interaction:

● After logging in Edward is redirected to the dashboard which he

was welcomed by an avatar that he could customize and use in the
game.
● The dashboard has an intuitive and easy to understand navigation
encouraging him to explore the app more.

Classes Page Interaction:

● Wanting to learn various topics, Edward goes to the classes page

which contains different mathematical topics from easy to advanced
level.
● The app also prepares a recommendation for him based on his age
in order to not make him feel overwhelmed and know where to
start. Edward, wanting to refresh his knowledge, chooses algebra.

Class Page Interaction:

● After selecting the class algebra, Edward chooses a lesson related

to the class. He chooses fractions and watches a video explaining
to him what fraction is and how to do fraction.
● Edward, who likes reading, summarizes the video using a
summarize feature in the app which uses artificial intelligence to
accurately and quickly summarize the video.
● Edward is also a very curious person and likes asking questions
which helps him understand various topics in a relative matter of
time, thankfully the app also has an artificial intelligence chatbot
integrated in it which suits his learning preferences.
● After finishing the video lessons Edward answers a few questions
that test his new knowledge. Upon answering all the questions
Edwards receives a reward, an item which he could use in game.
Notification Page Interaction:

● Edward gets a notification confirming that he received an item. A

fragment of an item which he could collect to build or trade in the
game.

Forgery Page Interaction:

● After selecting the notification, Edward gets redirected to the

forgery page. Which contains all the items he could collect and use
in game.
● Edward, selects the fragment item he received earlier which show
the item could with it, a sword but in order to build that sword he
needs to collect all the fragments for that item by learning and
answering more lessons.

Setting Page Interaction:

● Edward, wanting to secure his account, goes to the settings page

where he could update all his information from his name to his
password.
● Edward also has a choice to logout from the app in the setting
page.

Game Interaction:

● Edward, exhausted and wanted to relax, thankfully the app has

that, a 2D-indie game where he can play and enjoy after learning.
● The game is multiplayer in which he can interact with other players
in real-time in game, enabling him to do various things.

Game Invite Interaction:

● After exploring the game, Edward befriends another player who

invites him to play a 2v2 ranked match game. After playing they
each get a reward based on how well they perform in the game.
Game Trade Interaction:

● After that game Edward’s new friend notices that he doesn’t have
any equipment to fend for himself. Out of generosity Edward’s new
friend asked him to trade the fragments he received earlier for an
equipment.
B. TOOLS
Below are the different tools and materials that we used in order to design
and develop a paper prototype for MathPlay.

Google Docs is ideal for writing and collaborating on research papers,

offering real-time editing, feedback tools, and easy formatting for academic
standards. Its integration with Google Drive and Google Scholar streamlines file
storage and citation management.

Figure 6. Google Docs

 Draw.io is a versatile, web-based diagramming tool often used to create
flowcharts for visualizing processes or systems. It provides a wide variety of
shapes, connectors, and templates, making it easy to structure flowcharts with
clear, organized steps. Users can customize colors, labels, and formatting to
match their design needs.

Figure 7. Draw.io
 A ruler is an essential tool when creating a paper prototype, as it ensures
precise measurements and clean lines for elements like buttons, boxes, and text
fields. This precision is crucial for aligning components accurately, maintaining
consistency, and making the prototype visually clear and organized. It helps to
create a balanced layout, making the prototype easy to follow and more
professional, which ultimately aids in conveying ideas more effectively during
user testing or presentations.

FIgure 8. Ruler
 Bond paper is commonly used for creating paper prototypes due to its
sturdiness and smooth surface, which makes it ideal for drawing, cutting, and
handling. Its thicker quality compared to regular printer paper allows for a more
durable prototype, especially if the prototype will be handled frequently during
testing. Bond paper also provides a clean, professional look and holds ink well,
making sketches, labels, and other elements more visible and easier to read.
This makes it an excellent foundation for building prototypes that need to
represent an application's layout or design accurately.

Figure 9. Bond Paper

 A pencil is a valuable tool for creating paper prototypes because it allows
for flexibility and precision in sketching. With a pencil, designers can quickly draw
interface elements, make adjustments, and erase mistakes, making it perfect for
the iterative nature of prototyping.Pencil markings are also less permanent than
pen, so designers can test different ideas and layouts before finalizing them,
which helps refine the prototype effectively and efficiently.

Figure 10. Pencil

A pen is essential in paper prototyping for adding final details, making key
elements stand out, and providing a polished look. While a pencil is ideal for
drafting and sketching, a pen can be used to finalize lines, labels, and icons,
adding clarity and emphasis to important areas of the prototype. Using a pen also
prevents smudging, giving the prototype a cleaner, more professional
appearance. It's especially useful for defining boundaries and ensuring that
components remain visible during testing and presentations.

Figure 11. Pen

The white folder serves as a foundational tool in creating a phone-like

frame for paper prototypes. By trimming and folding the folder to approximate
 smartphone dimensions, designers can simulate the look and feel of a mobile
device.

Figure 12. White Folder

C. DESIGN AND STRUCTURE

 This section outlines the design and instructional framework for MathPlay,
focusing on creating an effective educational tool that adheres to established
design guidelines and principles. The aim is to develop a user-friendly application
that provides appropriate feedback for user interactions, thereby enhancing the
overall learning experience. Key considerations will include intuitive navigation,
ensuring that users can easily access content and features while engaging with
the material. By employing best practices in user interface design and
instructional strategies, this section will detail how MathPlay facilitates
meaningful interactions, promotes active learning, and supports the diverse
needs of high school students in their mathematical journey.

WIREFRAME
 A wireframe is a two-dimensional skeletal outline of a web page or app.
Wireframes provide a clear overview of the page structure, layout, information
architecture, user flow, functionality, and intended behaviors. Styling, color,
graphics, and other design elements are kept to a minimum.[9]

Figure 13 shows the wireframe of the app, starting with Login, Sign-Up,
and Verification screen to Dashboard. Users can search for classes, access a
classes list, watch videos, and take quizzes. The Dashboard tracks recent
activities, and a Summary pop-up provides an overview of completed content.

Figure 13. Login, Dashboard, and Classes Wireframe

 Figure 14 illustrates the wireframe for Classes, Settings, and Game sections of
the app. The Notifications screen (top left) lists recent activities, with icons for navigation
at the bottom. The Settings screen (top center) allows users to update their name,
email, birthdate, and password, with save and cancel buttons. The Class Structure
screen (top right) shows a visual layout of classes, likely for organizing or selecting
courses. The Profile/Friend Invite screen (bottom left) lets users invite friends and
includes a navigation button. The Game Mode Selection screen (bottom center) offers
game options, such as 1v1 or 2v2 with ranked or custom matches. Finally, the Friend
List screen (bottom right) allows users to invite friends to play, displaying online status.
Icons at the bottom of most screens indicate easy navigation across app sections.

Figure 14. Classes, Settings, and Game Wireframe

FIgure 15 illustrates the wireframe for the questions sections of the app, displaying the
question screens and game splash screens. The top row shows two different question
layouts, multiple choice and enumeration with a "Next" button. The rightmost wireframe
congratulates players on finishing, giving positive feedback after each set of questions.
The bottom row includes a congratulatory screen, for rewards or achievements, and a
placeholder for a media or gameplay scene, and a main menu with options like
"Account," "PvP," "Leaderboard," and "Quit."

Figure 15. Question and Game Splash Wireframe

Figure 16 illustrates the wireframe for the Gameplay section of the app. The Adventure
Floor selection screen (top left) allows users to select from multiple floors or levels, with
a "Back" button for easy navigation. The Floor Loading screen (top right) displays the
selected floor and provides a tip to encourage players, with a loading bar below. The
Main Gameplay screen (bottom left) includes an HP bar, a character view, and control
elements, giving players a clear interface for navigating the game. The Inventory screen
(bottom right) displays a grid layout for organizing items, with a prompt for selecting
equipment. Each screen is designed for smooth interaction and efficient navigation
within the gameplay experience.

Figure 16. Gameplay Wireframe

 STORYBOARD
A storyboard is a visual representation of a film sequence and breaks down the action

into individual panels. It is a series of ordered drawings, with camera direction, dialogue,

or other pertinent details. It sketches out how a video will unfold, shot by shot. It's is

similar to a trial-run for your finished film, video, or commercial, laid out in a comic book-

like form. [7]

MathPlay emblem is an infusion of ingenuity and academic symbolism that

signifies a relaxed, but also disciplined, way of studying. In the picture’s center, there
are several artistic and scientific things including a triangular ruler, a ruler, a paintbrush,
and a pencil in the color scheme of white and pink. These symbols indicate both
precision and creativity, signifying an overlap between the fields of mathematics and art.
Several mathematical figures are depicted above the triangle, including the percent
sign, plus, and minus symbols, extending the branding’s educational accent. The plain
logo typography “MATHPLAY” supports the emblem’s modern, friendly atmosphere. It
invites the audience of young learners to explore mathematics in an intuitive, amusing
way, as well as through some well-known academic practices.

Figure 17. Logo

Roboto and Sans Serif are two font selections that align well with the system's
design objectives. Roboto is ideal for headers and key elements that require a clear,
welcoming appearance due to its simple, modern design, which conveys a
contemporary and friendly vibe. Its clean lines contribute to the system's overall friendly
and approachable aesthetic, which is essential for user engagement. By combining
Roboto's modern, inviting style with the legibility of Sans Serif, the design ensures a
polished yet accessible experience, ultimately enhancing the primary goal of
streamlining and expanding access to educational content and subjects.

Figure 18. Fonts

Figure 19 is the color palette we choose, it enhances the visual appeal of the application
while supporting its mission to provide users with smooth and comforting interactions.
The approach is both credible and friendly, improving user comprehension and reducing
cognitive load.

● Vivid Magenta Pink - A bright, saturated hue combining red and blue tones,
creating a strong magenta-pink shade. It’s a dynamic, expressive color often
used to convey creativity, boldness, and modern flair.
● Deep Charcoal Gray - A very dark gray, nearly black. This color represents
sophistication, neutrality, and power. It is often used in minimalistic or high-end
designs to provide contrast without the harshness of pure black.
 ● White: Often associated with purity, innocence, and cleanliness, white fosters a
sense of openness and simplicity, making the interface feel fresh and
contemporary.

In conclusion, the design has established a strong foundation for a user-friendly and
engaging learning experience. The design elements work harmoniously to create a
professional and inviting atmosphere, ensuring that the platform is accessible and
appealing to learners of all ages.
 Figure 19. Color Palette

PROTOTYPE
A prototype is an early sample, model or release of a product created to
test a concept or process. Typically, a prototype is used to evaluate a new design
to improve the accuracy of analysts and system users. It is the step between the
formalization and the evaluation of an idea.[9]
 Figure 20 illustrates the login and signup prototype for the app, designed for
secure and user-friendly access. The login screen allows users to enter their email and
password, with a "Forgot Password?" link for account recovery. The signup process
requires new users to input their name, email, and password, including an email
verification step to confirm the provided email address. This verification enhances
security by ensuring valid accounts. Once verified, users gain access to the app's
features, highlighting an emphasis on ease of use and robust security in account
management.
 Figure 20. Login Prototype

Figure 21 showcases the prototype of the app's main components from the
dashboard. Users can view their in-game avatar and recent activities, providing a
personalized experience. The class section where user can select classes, allowing
users to browse and choose subjects they are interested in learning, from foundational
topics to more advanced concepts. Additionally, there is a notifications area where
users can stay updated on important alerts and announcements. Lastly, the update
feature enables users to easily manage and update their personal information, ensuring
that their profiles remain current and relevant. This layout promotes an engaging and
organized learning environment, enhancing the overall user experience.

FIgure 21. Main Components Prototype

 Figure 22 showcases the paper prototypes for the dashboard. Which contains
the user's in-game avatar and their recent activity. Users can also go to forgery from the
dashboard where they can view and forge in-game items.

Figure 22. Dashboard and Forgery Prototype

Figure 23 showcases the prototype of the app’s classes interface for the

students. Students are guided through selecting their respective classes, lessons, and
activities. In the first page is where the students chooses their class and in the second is

where they pick their lesson and the third one is where they watch an educational video

and the fourth page is where you can read the summary of the video they've watch and

the fifth and sixth page are the types of activities you can take, after completing the

activity you can get an item reward.

t
 Figure 23. Classes Prototype

Figure 24 showcases The layout of the application's game interface where you

can play, trade, and fight with other people. First page is where the loading starts and

the second one is the main interface of the game.

 Figure 24. Game Prototype

Figure 25 showcases the gameplay prototype of the app where users can invite
other users to fight you, you can also invite other users to team up with you and fight as
a team either custom or in a rank match.
 Figure 25. Game PvP Prototype

Figure 26 showcases the gameplay prototype of the app, where users can select
a floor they have cleared or plan to clear next. Additionally, users have the option to
invite a friend to join them in clearing a floor. Players start on the first floor and work
their way up through progressively challenging levels.

Figure 26. Gameplay Prototype

FLOWCHART
 A flowchart is a diagram that depicts a process, system or computer algorithm. They are
widely used in multiple fields to document, study, plan, improve and communicate often
complex processes in clear, easy-to-understand diagrams. [10]

Figure 16 illustrates the login flow of our system where users start as guest user’s can then
select between logging in or signing up. If they have an account then they can just login
otherwise users can create an account, the system also checks if the email which the user uses
already exists.

Figure 26 . Login

Figure 17 illustrates the flow of the dashboard, after logging in a user is

redirected to the dashboard by default. A user has plenty of choices in the dashboard,
they can edit their in-game avatar, forge items from rewards in forgery or view their
previous activity.

Figure 27. Dashboard

Figure 18 illustrates the navigation flow within the Classes page, detailing how
users interact with different content levels. Starting from the Classes page, users select
a specific class, such as algebra, which takes them to a list of lessons within that class.
After choosing a lesson, users are directed to the lesson page, where they can view
learning materials like videos, summaries, and quizzes. Alternatively, users can
navigate to other pages from the Classes page if they decide not to select a class.

Figure 28. Classes

Figure 19 shows the flow of the Notifications section, outlining how users interact
with notifications. The flow starts at the Notification page, where users can view a list of
notifications they’ve received. From there, they select a specific notification, which
directs them to the content associated with it, such as rewards, updates, or reminders.
After viewing the notification content, the flow ends. This straightforward process
ensures users can easily access and review their notifications.

Figure 29. Notifications

Figure 20 illustrates the Settings section flow, showing how users manage their
account settings. In this flow, users start on the Settings page, where they have the
option to either edit their credentials (like updating their name or password) or log out of
the app. If they choose to edit credentials, they can submit the changes, after which the
process ends. Alternatively, selecting Log Out immediately signs the user out, also
ending the process. This flow provides a simple, user-friendly approach for managing
account settings and security.

Figure 30. Settings

MEMBER CV

Name: Albutra, Silver Majesty G.

Date of Birth : September 20, 2005
Address: Pioneer Avenue Misa District, Prk. Kaunlaran Barangay Magugpo West
Contact Information (phone, email): 09518014141, [email protected]

Role: Information Architect

Name: Bitoco, Whilmar M.

Date of Birth : September 15, 2005
Address: Magnaga Pantukan Davao de oro

Contact Information (phone, email): 09518014141, [email protected]

Role: Web/App Designer

Name: Del Rosario, Angeline Mariel C.

Date of Birth : March 28, 2003
Address: Prk 15 Arba Maniki Kapalong

Contact Information (phone, email): 09705508832,

[email protected]

Role: Interaction Designer

Name: Lungay, Germany

Date of Birth : June
Address:

Contact Information (phone, email):

Role: Information Designer

Name: Omalay, Romeo Jr. B.

Date of Birth : July 24, 2002
Address: Prk Bautista Mankilam Tagum City
Contact Information (phone, email): 09302092497, [email protected]

Role: Usability Engineer

Name: Sariba, Junuel

Date of Birth : June
Address: Prk. 8 Kimamon Santo Tomas Davao del Norte

Contact Information (phone, email): 09169869209, [email protected]

Role: UX Designer

REFERENCES
[1] Admin, “Why So Many Students Struggle With Math | GradePower Learning,”
GradePower Learning, Aug. 30, 2018.
https://gradepowerlearning.com/resources/math-tutoring/why-students-struggle-
with-math/

[2] R. Stanley, “Why Is Math so Hard for Some Students?,” /

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\;;www.prodigygame.com, Sep. 08, 2021.
https://www.prodigygame.com/main-en/blog/math-is-hard/

[3] Tutor Doctor, “The top 5 reasons students struggle with math,” Tutor Doctor,
Jan. 06, 2019. https://www.tutordoctor.com/blog/2019/january/the-top-5-reasons-
students-struggle-with-math/

[4] “My Math Academy - Age of Learning,” Jun. 09, 2023.

https://www.ageoflearning.com/my-math-academy/

[5] Khan Academy, “Khan Academy,” Khan Academy, 2008.

https://www.khanacademy.org/
 [6] “Flashcards, learning tools, and textbook solutions | Quizlet,” Quizlet, 2024.
https://quizlet.com/ph

[7] StudioBinder, “What is a Storyboard? The Fundamentals to Get You Started,”

StudioBinder, Sep. 08, 2019. https://www.studiobinder.com/blog/what-is-a-
storyboard/.

[8] J. Hannah, “What Exactly Is Wireframing? A Comprehensive Guide,”

careerfoundry.com, Feb. 06, 2024.
https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/

[9]V. Ramírez, “What is a Prototype?,” Medium, Aug. 05, 2018.

https://medium.com/nyc-design/what-is-a-prototype-924ff9400cfd

[10] L. Hargrave, “What is a Flowchart?,” Lucidchart,

https://www.lucidchart.com/blog/what-is-a-flowchart