ATRC STEM Career Test

Context

For the Advanced Technology Research Council, UAE, I designed a STEM career assessment for school students — solo, from working prototype to the product now live at careertest.atrc.ae.

ATRC is Abu Dhabi's research and development body, and it runs youth STEM initiatives alongside the deep-tech work. The long-term supply of Emirati engineers starts with a fifteen-year-old deciding what to study, and this test is the front door of that decision.

The test stays long, because the psychometrics need it to. My job was to carry a student all the way through it.

The problem

Serious STEM assessments run 60–70 questions, and there's no way around it — a five-question quiz can't map a student to a career pathway.

But the test-taker is fifteen. Attention drifts, a notification lands, the tab closes, and twenty minutes of honest answers disappear. So the brief was a contradiction: a test long enough to be credible, experienced as something a student wants to finish.

Stage 01 — Prototype first

I started by building, not sketching: two working prototypes in Lovable, with 8 placeholder questions — enough to make the flow real without writing a full question bank. The point was never the question count. It was that a test flow can't be judged from static screens; I needed to take it to feel where it breaks.

I built it twice deliberately — one consumer-toned, one institutional — to force a comparison instead of a default.

Consumer-toned

Institutional-toned

Three findings came out of clicking through them

1. 01

   State the cost before asking for the effort

   The version that told students the time, the question count, and "no registration required" before the start button made starting feel safe. The version that only promised benefits didn't. This became the landing page principle.

2. 02

   A selected answer should still look like an answer

   One prototype flooded the chosen option solid and dropped its letter badge — the item you picked stopped resembling the list around it. The fix, keeping the badge and marking selection with fill and border, carried into the final system.

3. 03

   A verdict closes doors; a ranking opens them

   One prototype ended with a single career. The other ranked every path with a percentage. For a teenager who'll be a different person next year, ranked is more honest — this finding became the three-pathway report.

Stage 02 — Mapping the flow

Three findings tell you what's wrong with a screen. They don't tell you what happens when a student does something the happy path didn't plan for — and across twenty minutes, off-path is the normal case.

So before sketching a single screen, I drew the product as one diagram: three phases, every decision point, every branch, and every way back in.

1. 01

   Entry and onboarding

   Almost a straight line, with one branch — a student who isn't ready to commit can read a sample report instead of starting.
2. 02

   The 25-question loop

   One question node fanning into the four formats, every path returning to the same place.
3. 03

   Results and report

   Ends in four actions rather than one, with the retake path looping back into Phase 2.

Three things only became visible once it was a diagram.

• The sample-report branch is the flow-level version of finding 01 — state the cost before asking for the effort. On the map it stopped being a landing-page detail.
• Every question format returns to the same node, so adding a fifth type later is a branch, not a redesign.
• The retake loop runs back to the start of Phase 2, which is what makes "hit rewind" a real route rather than a line of copy.

Underneath all of it: the pause and inactivity returns. Drawing them made the obvious thing impossible to ignore — a student can leave from almost anywhere, so every exit needed a matching way back.

Stage 03 — Wireframes: designing the full system

With the flow mapped, I sketched every screen and state on paper — and this is where the product became much bigger than the prototypes. The wireframes added everything the prototypes never had:

• Two-step onboarding — an intro video with three highlights about the test, so a student knows what they're walking into.
• A per-question layout with timer, progress bar showing how many questions remain, and a question-related image beside every question.
• Four question formats — five-option choice, picture selection, drag-to-arrange, and connect/match — sketched as separate templates.
• Pause as a first-class flow — "Pause this test" on every screen, with a reminder scheduler drawn right into the wireframe.
• Inactivity recovery — a "Still there?" state triggered after minutes of no activity, progress already saved.
• Loading and analysing states — the moment between finishing and results, treated as its own screen.
• The report skeleton — avatar, About, Skills, Subjects, Careers, Quick Tip, download and retake.

Stage 04 — Iteration 3

The interface took three passes. This is the third, and the one that went to development.

What makes it the third is that it stopped being a set of screens. Tutorial through report, reviewed as one continuous run — because the question a long test has to survive isn't does this screen work, it's does screen nineteen still feel like screen one. Reviewing it that way settled three things that only show up in sequence:

• one dark violet carrying the whole run, so nothing reads as a different product
• the guide character holding its position from question to question
• the milestone celebration landing as a break in a rhythm the student has already learned, not as a surprise

Stage 05 — The final design

Keeping engagement high across 25 questions

The shipped test runs 25 questions — and the count can grow, because the design doesn't depend on it staying small. Length is handled by design, not denial.

Gamified progress. A progress bar tracks questions remaining, next to a per-question timer — answering "how much is left?" before it's asked. At milestones the test celebrates: 25% lands with a confetti moment and an encouraging message, and again at 50% and beyond. Long tests die in the middle; the milestones put small finish lines inside the big one.

A guide, not an invigilator. An illustrated Emirati character stands beside every question — a doctor for the health-science ones, a builder in a VR headset for the technology ones. Students see a test made for them, and a companion turns exam pressure into conversation. The character set was AI-generated to my direction, doing the work of an illustration budget a solo freelance project doesn't have.

Friendly failure. Skip without answering and the error matches the product's voice — "Ohh no… something missing" — no red scolding on a test that promised there are no wrong answers.

Four question types in rotation

The variety serves the psychometrics — different formats surface different signals — and it breaks the rhythm, so question 19 doesn't feel like question 4 again.

The safety nets

Pause, with a promise. Pausing saves progress for 7 days and offers a reminder email — in 1 hour, tomorrow, or this week. The student picks when they'll return; the product gently holds them to it.

Inactivity recovery. Ten minutes idle triggers "Still there?" — one tap to break or continue, nothing lost to a closed tab.

Pause, with a reminder

Inactivity recovery

The report — three pathways, not one answer

Every student gets a Primary, Secondary and Tertiary pathway, each a full identity rather than a job title.

A result you can only read is a label; a result you can act on this week is guidance. And at the bottom: "Not sure? Hit rewind and see where your curiosity takes you." Retake framed as exploration, never as failure.

Outcome

Shipped

Landing, video onboarding, a 25-question test in four formats, gamified progress with milestone celebrations, pause and resume with reminders, inactivity recovery, an analysing state, a 3-pathway report, and retake.

Status

Live at careertest.atrc.ae.

Role

Solo freelance product designer, September 2025.

Approach

Prototype first, then the flow, then wireframes, then UI — with decisions from the prototypes deliberately reversed along the way.

What I'd do differently

1. Watch five students take it

   Every finding came from testing my own prototypes — better than nothing, but I was a designer simulating a fifteen-year-old.

2. Prototype the final interactions too

   Drag-to-rank and build-a-sentence went to development from Figma. They deserved the same working-prototype test the early flow got.

What it taught me

1. Prototype-first is a research method

   The findings that shaped this product are invisible in static screens. A rough working build cost two days and bought the strategy.

2. Length is a design material

   The most valuable screens are the ones for not taking the test — pausing, returning, recovering. I designed the gaps, and the gaps are why students finish.