STAiGE

ITERATION

From proof of concept to product

1. 1

   Stage 1 · V1: does the system work?

   

   V1 · proof of concept

   I built the first version of the interface as a proof of concept. Our programmer implemented it in Unity, and testing with ETC faculty showed the AI could turn a lesson into a full play. Only then did we build the STAiGE brand into the interface.

2. 2

   Stage 2 · Explore, then choose

   For each page of V2, I explored three to four low-fi directions before choosing one. I used Claude as a design tool to build the drafts quickly: I set the direction for each one (layout, hierarchy and content), then compared them, chose one and refined it into the final design.

   1. A

      The topic is typed like the title of a play, big and centered. The lesson plan drop zone sits beside it as a shortcut. Facts are a shelf of cards; the steps sit in a bar at the bottom.

      Open draft A larger

   2. B

      Two big doors decide how you start: upload a lesson plan or type it in. Short inputs on the left, and a play brief on the right fills in as you go. Steps run down a rail on the left.

      Open draft B larger

   3. C

      The whole step is one board of tiles in different sizes, like a teacher’s planning board. Facts are sticky notes; the steps are folder tabs on top, and Next is a tile of its own.

      Open draft C larger

   4. D Chosen

      Everything lives in one folder with the steps as tabs. The topic is the play’s title, the lesson plan drop box sits on the right, facts are pinned below, and Next is its own dark tile.

      Open draft D larger

   Why I chose D

   1234

   1. The first thing to do is obvious.From A, D keeps the topic as the play’s title, in big type on a line. A teacher sees right away that this is the one thing to fill in, and it feels like starting a play, not filling in a form.
   2. Every input has its own place.From C, D puts each part in its own card: the topic and goal, the lesson plan, the facts. Required and optional are clearly marked, so the page stays organized instead of one long form.
   3. Teachers always know where they are.C’s folder tabs keep all four steps visible at the top. A hid them in a bottom bar, and B used a side rail that takes space from the inputs.
   4. The next step is unmistakable.Next is its own dark tile, the strongest element on the page, so finishing a step never gets lost among the inputs.
   5. It’s less to take in at once.B asked teachers to choose how to start and showed every field plus a live brief together. D shows fewer elements, so a teacher with little time isn’t overwhelmed.
   6. It fits the school setting.The folder look matches the academic context and became the frame for every page of V2.
3. 3

   Stage 3 · V2: make it STAiGE

   • A clear input hierarchy: each input sits in its own card, marked required or optional, so teachers know where to type, what’s required and what isn’t, and aren’t overwhelmed by everything at once.

   • Folder tabs for the four steps, matching the school setting.

   • Animal Next buttons: Agnes drew the five characters; I designed their final look in the interface and turned them into the Next buttons, so each step has a friendly, recognizable way forward.

   

   

   V1V2

   Animal characters drawn by Agnes; I designed their final look and turned them into the Next buttons.

4. →

   Feedback → change · Who creates what

   

   confusing, and sometimes crashed generation

   V1V2

   Before (V1)

   Each team had a “Who creates it?” slider: AI creates it / AI helps / Class creates it.

   What we saw

   Faculty and students who playtested it found the sliders confusing, and they sometimes made AI generation crash.

   After (V2)

   We removed the sliders. The AI drafts the play, and the teacher has full control to change or edit anything, so there’s no need to choose who leads. Teachers only set how many students join each team.