E.I. Games — Game Builder

Redesigning the game builder educators use to create gamified lessons—clearer structure for levels, content, and publishing so teachers can focus on teaching, not fighting the UI.

Category
Product / UX · EdTech
Year
2025
Tools
Figma, wireframes, prototyping

Problems & solutions by stage

Each block pairs the screen for that iteration with Problems and Solutions in the column next to it—stacked so they’re easy to read.

Starting point

Before redesign · baseline UI

Game builder UI before redesign

Before

The live builder worked, but the UI didn’t yet read as one clear path from structuring a game to publishing it.

Problems

  • Fragmented layout made it hard to understand the creation flow.
  • Key actions (tools, levels, pre/post content) lacked hierarchy.
  • No clear guidance on where to start or what comes next.
  • Visual weight didn’t match the importance of actions.

Solutions

  • Introduce a clear structure for building content.
  • Establish hierarchy across actions and sections.
  • Guide users through a step-by-step workflow.

Stage 1

Cleaner UI, incomplete mental model

Sketched wireframe for game builder tabs and question list

Wireframe exploration

Cleaner UI, but missing the core mental model of how teachers build.

Problems

  • “Levels” concept was missing from the core flow.
  • Structure still felt flat—no sense of progression.
  • Users lacked a clear path for building multi-step content.

Solutions

  • Simplified layout reduced the clutter from the original.
  • Introduced clearer grouping of questions and actions.
  • Began establishing a more consistent interaction pattern.

Stage 2

Structure in place, interaction still heavy

Grayscale level editor with content list

Grayscale structure

Introduced structure, but needed to simplify how users interact with it.

Problems

  • Added complexity made the interface feel heavier.
  • Navigation between levels wasn’t intuitive.
  • Too many controls competing for attention.

Solutions

  • Simplified how users switch and manage levels.
  • Reduced visual noise to focus on primary actions.
  • Strengthened hierarchy to guide the workflow.
  • Introduced “Levels” as a core part of the creation flow.
  • Added a clearer hierarchy between levels and questions.
  • Began separating content into distinct sections (questions, context, resources).

Stage 3

More intuitive structure, guidance still thin

Card-based game builder home with Tools, Prefaces, Levels, Postfaces

Builder home

A more intuitive structure, but still needed stronger guidance and clarity.

Problems

  • Some actions still lacked clear emphasis.
  • Content area still felt slightly dense.
  • Workflow wasn’t fully guided yet.

Solutions

  • Refined level navigation into a more intuitive, horizontal flow.
  • Simplified layout to reduce visual noise.
  • Strengthened hierarchy between levels and content.
  • Clarified primary vs secondary actions.
  • Improved spacing and readability of content blocks.
  • Continued simplifying interactions across the page.

After

Direction for the live builder

Refined game builder UI with orange accent and content rows

Later iteration

Final direction: a calmer editor with a clear game → levels → content story and obvious publish paths.

Problems

  • Further reduce density in content areas.
  • Continue refining action emphasis for faster scanning.

Solutions

  • Clear top-down structure: Game → Levels → Content.
  • Primary actions are consistently placed and easy to find.
  • Tabs separate tasks (Levels, Resources, Settings).
  • Content is organized into scannable, repeatable blocks.
  • Versioning and publish controls are accessible without distraction.

Testimonial

“Elevated our product with a design that prioritized both function and user-friendliness. Great experience and an absolute pleasure to work with.”

Project overview

I worked with E.I. Games on remaking their game builder—the tool teachers use to assemble gamified learning experiences. The goal was a more intuitive layout so educators could find levels, add content, and understand publish status without second-guessing where to click.

What I focused on

  • Mapping how teachers move between game shell, levels, and individual content blocks
  • Wireframes for tabs, sidebars, and modals (publish, duplicate, new level)
  • Iterating toward a calmer editor UI with clearer primary and secondary actions
  • Aligning patterns with real classroom workflows—not just desktop patterns copied from other products

Outcomes

The redesign direction reduces cognitive load on dense screens: level selection, content lists, and status (private / review / live) read as one story instead of three disconnected areas.

Collaboration

I stayed in close sync with stakeholders while wireframing and mocking UI so tradeoffs around scope, engineering effort, and teacher habits stayed visible early—not only at handoff.

Reflection

EdTech tools have to work for people who are interrupted constantly. Patterns that feel “standard” elsewhere still need validation when the user is managing a room of kids and a timer at the same time.

Explore More Projects

Home
Scaly Music App Mobile App Logos Commission Illustrations Fashion Design