Key Design Requirements

Through user research and needs analysis, we defined the core affordances and requirements guiding our design. The three most important requirements are summarized below, with further details available in the following sections.

Your go-to source for quick and accurate responses and top notch resources base

Plan-ability (Metacognitive)

Students need a space to externalize what they are trying to build before AI generates

Plan-ability (Metacognitive)

Students need a space to externalize what they are trying to build before AI generates

Play-ability (Temporal)

Students must be able to immediately play and test what they create

Play-ability (Temporal)

Students must be able to immediately play and test what they create

Monitor-ability (Metacognitive)

Students need prompts that make them stop and compare intention with outcome

Monitor-ability (Metacognitive)

Students need prompts that make them stop and compare intention with outcome

In addition to the core requirements, the platform includes several supporting features designed to enhance usability and learning flow.


Your go-to source for quick and accurate responses and top notch resources base

Download full requirements

Features

Our features supports a clear and efficient learning flow through a step-by-step progress bar, toggleable light and dark modes, editable learner profiles, template-based prompts that scaffold thinking, and a compact tool bar for quick access to core actions.

Progress Bar

A persistent progress indicator shows where learners are in the full cycle.

Light / Dark Mode

Learners can toggle light and dark themes to fit different environments. 

Profile Edit

A simple profile panel lets learners update basic settings to personalize students’ learning experiences.

Template Prompts

Built-in prompt templates scaffold inputs for planning and game creation, helping learners translate ideas into game mechanics.

Tool Bar

A compact tool bar provides quick access to core actions so learners can flexibly plan their games.

Students are Struggling with Math

High school students often struggle to engage with mathematical modeling tasks (particularly when asked to interpret real-world situations and decide how to represent them mathematically).

Lack of Real Life Relevance

Students struggle to initiate mathematical modeling because they lack opportunities to practice translating real-world problems into mathematical representations (Krutikhina et al., 2018).

Problem

Visual Design Framework

Gamerate’s visual style is designed to support sustained focus, reduce cognitive load, and encourage creative exploration across the full learning cycle. Through iterative design exploration, our team found that overly decorative or playful visuals distracted learners during complex tasks. As a result, we converged on a restrained, modular visual system that emphasizes clarity while selectively highlighting moments of learner agency.

Your go-to source for quick and accurate responses and top notch resources base

The interface uses a neutral base palette to minimize distraction and allow learning content and learner-created artifacts to remain visually prominent. Accent colors are applied sparingly to signal progress, action, and decision points, such as moving between stages or initiating creation.

Your go-to source for quick and accurate responses and top notch resources base

A clean, highly legible Poppins typeface supports extended on-screen reading. Clear typographic hierarchy distinguishes learning stages while keeping body text concise to reduce reading burden.

Your go-to source for quick and accurate responses and top notch resources base

Hi-Fidelity Prototype

This hi-fidelity prototype demonstrates the platform’s finalized visual style and interaction design, featuring a polished onboarding experience, consistent layout and typography, light/dark mode support, and intuitive UI elements that reflect how learners will navigate and engage with the system in practice.