Role: UX/UI Designer · task for an edtech startup
Role: UX/UI Designer · task for an edtech startup
Dino's Travel Diary — Edtech Math Lessons
01 / Project goal
A methodologist hands the designer a rough board of math tasks. My job was to turn it into a real lesson: one consistent layout for two fraction lessons, a number line component, and a game story that makes a child want to keep going. Plus clear specs, for developers and for illustrators. One screen size, 1024×560, the company's UI kit and character.
01 / Project goal
A methodologist hands the designer a rough board of math tasks. My job was to turn it into a real lesson: one consistent layout for two fraction lessons, a number line component, and a game story that makes a child want to keep going. Plus clear specs, for developers and for illustrators. One screen size, 1024×560, the company's UI kit and character.
02 / What needed to change
The methodologist's board showed what must be on each screen, but not how it should feel. Every task looked different, and nothing connected one task to the next. I rebuilt the provided UI as variant components and added the missing ones: number line, statements, Dino with a bubble. Then I laid out all four stories on one grid.
02 / What needed to change
The methodologist's board showed what must be on each screen, but not how it should feel. Every task looked different, and nothing connected one task to the next. I rebuilt the provided UI as variant components and added the missing ones: number line, statements, Dino with a bubble. Then I laid out all four stories on one grid.
03 / Design decisions
The railway is the number line: the map band at the bottom of the story tasks is drawn to its exact proportions, so a child sees a fraction as distance travelled. Each screen shows where to act — on idle, the active input gently shakes or pulses. Some answers are checked instantly, others on Done: a correct one stamps into place, a wrong one turns red and a hint appears. In the game there are two lives, and a second mistake on the same example doesn't take the second heart. The rule book opens on its own and hides the task until it's closed. For the illustrator I wrote a scenario for each story: a preview, a congrats screen, a map band where the task needs one — and quiet motion. Enough to carry the story, never enough to distract from the task.
03 / Design decisions
The railway is the number line: the map band at the bottom of the story tasks is drawn to its exact proportions, so a child sees a fraction as distance travelled. Each screen shows where to act — on idle, the active input gently shakes or pulses. Some answers are checked instantly, others on Done: a correct one stamps into place, a wrong one turns red and a hint appears. In the game there are two lives, and a second mistake on the same example doesn't take the second heart. The rule book opens on its own and hides the task until it's closed. For the illustrator I wrote a scenario for each story: a preview, a congrats screen, a map band where the task needs one — and quiet motion. Enough to carry the story, never enough to distract from the task.
04 / Ready for development
All 26 screens are refined for handoff. Each one is annotated with what appears, what the child does, what happens on idle, and how the answer is checked. Components are linked to tokens, key states are included, and main touch targets are at least 44×44. A developer doesn't have to guess.
04 / Ready for development
All 26 screens are refined for handoff. Each one is annotated with what appears, what the child does, what happens on idle, and how the answer is checked. Components are linked to tokens, key states are included, and main touch targets are at least 44×44. A developer doesn't have to guess.
Swipe or drag to see the next step
05 / Outcome
This was a test task, so nothing here has shipped or been tested with children. What I can stand behind is the handoff: 26 screens across four stories, variant components linked to tokens, and every screen annotated with what appears, what the child does, and how the answer is checked. I went through each screen against a checklist of key states and touch-target sizes. What I’d test first: whether children read the railway as a number line, and whether the idle shake helps them find where to act or just distracts. I’d look at task completion, repeated mistakes on the same example, and time per task. Logic needs to be shown, not only written. A spec can be perfect, but people see the picture first. The Dino character belongs to the company. I redrew it in vector for this case.
05 / Outcome
This was a test task, so nothing here has shipped or been tested with children. What I can stand behind is the handoff: 26 screens across four stories, variant components linked to tokens, and every screen annotated with what appears, what the child does, and how the answer is checked. I went through each screen against a checklist of key states and touch-target sizes. What I’d test first: whether children read the railway as a number line, and whether the idle shake helps them find where to act or just distracts. I’d look at task completion, repeated mistakes on the same example, and time per task. Logic needs to be shown, not only written. A spec can be perfect, but people see the picture first. The Dino character belongs to the company. I redrew it in vector for this case.
Thanks for reading
Thanks for reading
If this kind of product thinking feels useful for your product, project or team, I’d be happy to talk.
Work with me →
Thanks for reading
If this kind of product thinking feels useful for your product, project or team, I’d be happy to talk.
Work with me →