Product design
0→1
AI product
Design system
Alma Labs - The Journey
A product demo for an early-stage AI-education startup: a platform where twelve-year-olds learn AI fluency by raising an AI creature. From concept to a working, presentable product in two weeks.
weeks - From vision and partial spec to a demo-ready product
Age of the learners, raising their own AI creature
A real interactive UI, not mockups
Overview
Turning a thesis about AI into a product a student can operate
Alma Labs teaches AI fluency in middle schools. Its thesis: AI is a new language, and fluency comes from building with it, not reading about it.
Students learn by raising an AI creature called Elmi. Each of the 22 units visibly grows Elmi's abilities: see, classify, recommend, remember. The child's progress and the creature's capability are one and the same.
The scope: the student homepage, the screen they return to every session; the visual system and interaction model behind it; and a working demo.
The Impact
The prototype replaced the founders' deck. It runs in two modes: as a guided presentation, and as a product people can play with. It's what they put in front of schools, municipalities and partners: instead of describing the product, they hand people something that works. The three-zone layout, the capability grammar and the instrument visual language carry into every screen designed after it.
Problem
A vision with nothing a student could touch
There was a vision and a partial spec. No flows, no screens, no design system. And an early-stage company can't sell a thesis about AI with a thesis about AI.
The work started with the homepage. In a product built on a long journey, it isn't a page: it's where a student lands every session, sometimes a week apart. It had to answer four questions at a glance, for a twelve-year-old:
Where am I? In a 22-unit arc that should feel like progress, not a syllabus.
What do I do now? One obvious action, no hunting.
What did I gain? Elmi's growth has to be felt, not reported.
What's still out there? The world has to feel bigger than the screen.
Underneath sat a second problem. Children's edtech defaults to bright, rounded and cartoonish, announcing "this is fun" before it has earned it.
A twelve-year-old who is told a product is fun becomes suspicious.
The starting material: a vision, a partial spec, and no product surfac of any kind.
Research
Designing without users, and being explicit about it
Two weeks, pre-product: no users to test with and no time to recruit them. So the constraint became part of the method: make the direction defensible from evidence that could be gathered, and name what stayed unvalidated.
What informed it
The category's own defaults, and what they signal to a child old enough to notice being handled. Then the opposite tradition: Braun and Dieter Rams for the machine, Teenage Engineering for tactility and restraint, metro maps and star fields for drawing a journey that's legible and still feels large.
What we learned
Respect is a feature. Twelve is exactly the age where being talked down to registers.
Capability, not completion. Growth shows up as new powers, not a progress bar.
A world, not a task list. The home screen had to show an expanding world from the first session.
What stayed unvalidated
Whether children read an instrument-grade interface as respect or as coldness is an open question. The visual system is separable from the structure, so a warmer skin can be tested on the same layout without rebuilding anything.
Ideation
One hero, everything else subordinate
Three zones, and the ranking between them is the design. The journey field is the windshield; the strip above and the console below are gauges and controls that serve it. That ranking is what makes it read as a well-made machine, not a page of tiles.
Three zones, ranked: the journey takes the middle, status and controls stay at the edges.
A field you pan, not a path you scroll
The obvious answer to 22 units was a list: legible, cheap, clear. The journey became an open field instead: completed units behind, the current one marked with a bullseye, a dashed path toward a horizon that isn't reachable yet.
A list says "you have 17 items left." A field says "the world is bigger than what you've seen."
The cost: free panning risks getting lost. A fixed HUD card and a persistent 05 / 22 counter keep orientation however far the student wanders.
Showing the current unit twice, on purpose
The current unit lives in two places: a fixed card with the action, and a bullseye on the map. Duplicating an element is usually a mistake. Here the card holds the action still while the map moves, so a student can explore without losing what to do next.
Designs
An instrument, built on one consistent grammar
A machine you operate, closer to a cockpit or a musical instrument than a website: monospace lowercase labels, a warm neutral field, instrument panels. The current unit is the only saturated element, and its button the only one competing for attention.
The current unit is the only saturated element on the field, and its action is the only button competing for attention anywhere on the screen.
Elmi as presence, not a stat block
The instinct was a character sheet beside the creature. Instead, Elmi stays a character, and the skills sit inside the unit card as dashed "+" promises, next to the button that earns them.
One grammar everywhere, so a student learns to read state once:
+ see · earned
+ recommend · arriving in this unit
remember · lu 07 · locked until its unit
Completed units sit behind you, "go deeper" paths branch off the route, and the way ahead turns dashed toward units that aren't reachable yet. Caption ימין: The skill the unit grants sits inside the card, next to the button that earns it — the reward lives where the action is.
The same journey, read by a teacher
A student needs momentum; a teacher needs judgement. One journey, two readings, and the toggle sits in the same place in both. The mentor view opens on a question: who needs you this morning? Each of its four tiles is also a filter.
The product interprets rather than reports. A flagged student comes with a sentence a person would say:
"Three attempts, and the same wrong answer every time. Her sessions are getting longer, not shorter. She is working, not guessing."
Flags name a reason, never a score. And every learner shows strengths beside gaps, because a view of only deficits teaches a teacher to see a class as a set of problems.
The system beyond the screen
the same system, creature and grammar. Each was written up as a design brief for handoff, so someone else can build the next screen without the designer in the room.
Restraint, and the one moment it breaks
The map never raises its voice. The end-of-unit screen goes full-bleed blue, says "Great job!" at the largest size in the system, and trails stickers behind the cursor.
A product that never celebrates isn't restrained, it's cold.
Lessons
Direction is the deliverable when you can build the rest yourself
The instrument decision, machine not playground, did more work than every screen after it. It was the riskiest call, made in the first days on the least evidence, and hierarchy, type, motion and reward all followed from it. A choice like that has to be made early, made explicit, and written down.
Designing by building means reviewing an experience, not a picture of one: ideas that looked elegant flat were caught the moment they moved. It moves the work upstream, from specifying a product to deciding what it is.
AI made the building fast. Choosing what to build is still the whole job.
