Case study · EdTech · 2026

Testtally

A TOEFL iBT 2026 prep product I designed and shipped end to end — a web platform first, then native iOS and Android apps on the same backend. The goal: make an anxious, high-stakes exam feel calm, structured and measurable.

Role
Product Designer and builder, end to end: discovery, strategy, UX, UI, design system, front-end, launch
Platforms
Web (responsive) · iOS · Android
Timeline
May 2026 web MVP · June editorial redesign and rebrand · Aug–Oct mobile apps
Content
Question bank written with my partner, an English teacher, who checked every item against the real exam
Tools
HTML design reference, Next.js, Flutter, Supabase, Gemini, ElevenLabs, Claude Code

What I own: the product idea and positioning, every flow and screen, the visual identity and design system, the copy, and the shipped code on both platforms.

(01) The problem

In 2026 the TOEFL iBT changed shape: about 90 minutes, four sections, a new 1–6 band score, adaptive Reading and Listening, and new task types such as Complete the Words, Build a Sentence, Write an Email and Take an Interview. Most prep material still teaches the old exam.

I framed the product around three problems. They are hypotheses from the teaching context, not measured findings:

  1. 01“I don’t know if my writing or speaking is good enough.”Reading and Listening are self-checking; Writing and Speaking need a teacher, and most learners don’t have one on demand.
  2. 02“Test day will feel unfamiliar.”Practising old formats means meeting the real ones for the first time under a timer.
  3. 03“I lose motivation after a week.”Repeating content with no visible progress makes people quit long before the exam.

Who it’s for: university applicants, mostly non-native speakers studying alone on a phone or laptop, with a fixed exam date and a target score. They are short on time and often anxious, so the product has to lower stress, not add to it.

Design question

How might we make solo TOEFL prep feel like working with a calm, honest tutor — one who shows you exactly where you stand every day?

(02) Design principles

Five principles settled most arguments before they started. Each one shows up in a concrete decision below.

  1. 01
    Calm beats loud.Exam prep is stressful enough. A warm off-white canvas, soft pastels and generous spacing replace the red-badge, neon-gamification look common in the category.
  2. 02
    Honest over flattering.A score the learner can’t trust is worse than no score. The product never invents progress, never shows a misleading bar, and says plainly when something failed.
  3. 03
    One colour, one meaning.Each exam section owns a colour everywhere it appears. Right and wrong answers have their own colours that no section ever uses.
  4. 04
    No dead ends.Every limit, error or refusal tells the learner what to do next — retry, open Settings, or see the plans.
  5. 05
    Ask at the moment it makes sense.Permissions, upgrades and goals are requested in context, with the reason stated first.

(03) Key design decisions

Eight decisions shaped how Testtally feels to use. Each one starts from a learner problem and ends in a specific screen behaviour.

Decision 01

Two modes with opposite feedback rules: Practice and Exam

Learners need two different things: to learn from each mistake, and to rehearse test day without help. One interface can’t do both, so I split them.

  • Practice grades every answer immediately and explains it in one line, quoting the passage (“The passage says… — this is directly stated”).
  • Mock exam reveals nothing until the end. It runs all four sections in order with the real timings (111 questions, about 90 minutes), and the intro screen states the rules before it starts.
  • An abandoned exam is resumable from where the learner stopped (“You stopped in the Listening section”), because 90 minutes rarely happen in one sitting on a phone.
Decision 02

AI feedback that teaches, not just scores

A bare “3.5/5” tells a learner nothing they can act on. Each Writing and Speaking answer comes back as a layered card: the score, a breakdown by criterion, two or three improvement tips, and an example correction of their own sentence.

For Speaking, the card also shows what the AI heard — a transcript — and the errors it detected. That lets learners judge the feedback themselves instead of trusting a black box.

Decision 03

Never show a score the learner can’t trust

During testing, a silent recording — a valid audio file with no sound in it — came back from the AI model with a confident 3/5 and detailed, made-up pronunciation advice. In a learning product that is worse than an error.

I added a guard in two places: the app won’t offer “Submit” for a recording with no audio, and the server refuses to score it as well. When scoring genuinely fails, the copy is explicit that nothing was lost.

“No sound was picked up in your recording. Check your microphone and try again.”

“Your answer was saved, but scoring could not finish right now.”

Decision 04

Asking for the microphone at the right moment

iOS shows its permission dialog only once. A reflexive “Don’t allow” on first launch would silently break the entire Speaking section. So the app shows its own short sheet first — “Practise out loud” — explaining why the microphone is needed and that recordings are only used for scoring, with a guilt-free “Not now”.

Declining is never a dead end. At the record button the app checks again and offers the right recovery: “Allow” when the system can still ask, “Open Settings” when only Settings can fix it. The reminder scrolls itself into view, because on long questions it appeared below the fold. Every path ends at a recording or at a clear way to get there; none ends at a broken button.

Decision 05

Limits that feel fair, not punishing

The free plan allows 2 questions per section per day. Limits are where products usually feel hostile, so I designed them to be visible early and phrased the same way everywhere:

  • The quota is shown on the section tile before the learner starts (“1 / 2 questions today”), with identical wording on the hub and the section screen.
  • On an unlimited plan the progress bar is removed, not filled — a permanently full bar reads as “you’ve used it all up”.
  • When a limit is hit, the answer is still saved, and the message links straight to the plans. The plans screen states the current plan, renewal terms and how to cancel in plain language.
Decision 06

Motivation without noise

Streaks, XP levels, badges, a daily quest and a weekly leaderboard keep learners coming back. I kept them warm rather than loud:

  • Rewards appear as a short celebration after an answer, never interrupting one.
  • The daily quest is personal. Originally every user got the same challenge, and on some days none at all. Now each learner is assigned their own challenge on their first visit of the day, so the card is never empty.
  • The leaderboard shows display names only, never emails.
Decision 07

Onboarding that sets a goal, not a form

Three short steps: what the exam looks like (four sections, minutes each), then exam date, target score and current level. “Not decided yet” is a valid answer for the date, every step can be skipped, and everything is editable later from the profile. The home screen then frames the day around that goal: “41 days until your test” and a score card pointing at the target.

Decision 08

Trust as a feature

Learners can delete their account from inside the app, with a clear confirmation sheet. Legal links sit next to every purchase. Small things, but they signal that the product respects the person using it.

(04) From web to mobile

The mobile apps aren’t a shrunken website. They share one account, one question bank and one scoring engine with the web, but each interaction was redesigned for a phone held in one hand, often in short sessions.

AspectWebMobileWhy it changed
NavigationTop bar, landing page, blogFour-tab bottom bar: Home, Practice, Ranks, ProfileThumb reach; the four things learners do daily
Sign-inMagic link by emailEmail and password, plus Google and AppleSwitching to a mail app mid-sign-in loses people on a phone
Primary actionsInline buttonsFull-width 52 pt button anchored at the bottomOne-handed use, one obvious next step
SpeakingBrowser recordingNative recording, permission primer, recovery pathMobile permission rules are stricter and one-shot
Mock examOne sitting at a deskResumable section by section90 minutes rarely happen in one go on a phone
PlansWeb checkoutNative App Store / Google Play subscriptionStore rules; a plan bought on either side works on both
LanguageTurkish first, English and SpanishEnglish first, fully localisedWider international audience; new languages are a translation, not a rebuild
Porting doubled as a UX audit.

Rebuilding every flow made me walk each one again from the learner’s side. I found cards that looked tappable but did nothing, a daily quest that was sometimes empty, XP that was silently not awarded for some activities, and a greeting cut off by the iPhone’s Dynamic Island. All were fixed in the app, and the web fixes were logged.

(05) Design system

One editorial design system, built in June 2026 and carried across web and mobile. Its idea: look like a well-made study notebook, not a game.

Colour — four sections, one accent, one meaning each

Every exam section owns a pastel background plus two darker shades of the same hue for text and emphasis. The pastels make sections recognisable at a glance; the darker shades carry the reading.

  • ReadingMint #C8E9CF
    #1F5E38 / #2F7A4A
  • ListeningButter #EFE3A1
    #7A6414 / #8A7420
  • WritingLavender #DDD6F7
    #4B33A8 / #6E5FA0
  • SpeakingBlush #F8CEDC
    #B23A63 / #A8456C
  • Correct / wrong — answer feedback only, never a section
  • Canvas #F4F3F1, ink #14110F (17:1)
  • Accent pink #F5A8C5 — the one bright detail, the dot after screen titles

Type — an editorial voice

A serif for headlines gives the product the warmth of a printed textbook; a neutral sans keeps questions and answers easy to scan. Numbers learners compare day to day use the serif at large sizes, so scores and countdowns feel like headlines rather than data.

StyleFontSizeWhere
DisplayFraunces 60044, –1 trackingHome greeting, feature cards
TitleFraunces 60036Screen titles (“Let’s solve.”, “Results.”)
Card titleFraunces 60023Section tiles, card headings
BodyInstrument Sans 40014 / 1.5Questions, explanations
OptionInstrument Sans 50014.5Answer options, list rows
EyebrowInstrument Sans 60011, uppercase, +2Labels above content
MetaJetBrains Mono12Counts, timers, IDs

Shape — radius carries hierarchy

Corner radius tells the learner what kind of thing they’re looking at: feature cards 26, hero 24, stat 22, list 20, answer options 16, icons 11, and anything pill-shaped and tappable is fully round. Primary buttons are full-width and 52 pt tall — one obvious next step within thumb reach.

Components

About a dozen shared components cover the whole app — answer option, section tile, stat card, list card, pills, progress bar, inline audio player, AI feedback panel, reward overlay, bottom navigation, text field and buttons. A built-in preview screen renders them all together, which kept the system honest while it grew.

(06) Technology in service of the experience

Every technical choice was made for what it lets the learner feel or do. AI-assisted development with Claude Code let me take each design from mockup to shipped product myself — so I tested decisions in the real app on real devices, not only in static frames.

Gemini 3.8 Flash — AI scoring
Writing and Speaking feedback in seconds, not days. I defined the response shape — score, breakdown, tips, example correction — to match the feedback card, so the AI fills a design instead of dumping text.
ElevenLabs — voice
Natural voices for Listening conversations, lectures and announcements, closer to test day than robotic text-to-speech.
Supabase — shared backend
One account across web and phone: a streak started on a laptop continues on the bus.
Flutter — iOS + Android
One implementation of the design system, pixel-consistent on both platforms.
Next.js + next-intl — web
Fast, search-friendly landing page and blog in English, Turkish and Spanish.
RevenueCat — subscriptions
Native store purchases on both platforms, with a plan that follows the learner across devices.
Screenshots as a design review tool.

Automated tests can’t see layout. Two bugs only showed up when I screenshotted the running app: a difficulty pill stretched across the whole card, and a header clipped by the iPhone’s Dynamic Island. I made screenshot review part of every visual change, and built a demo-data pipeline that produces the App Store and Google Play images straight from the real screens — without real learners’ names ever appearing in public store art.

(07) Outcomes, limits and what’s next

In six months Testtally went from an idea to a live web platform and native iOS and Android apps, sharing one design system, one question bank and one scoring engine.

What shipped

  • All four TOEFL iBT 2026 sections with every new task type, in practice mode and as a full timed mock exam
  • AI feedback on every Writing and Speaking answer, with a transcript for Speaking
  • Progress tracking, streaks, levels, badges, a personal daily quest and a leaderboard
  • Free and paid plans on the web, with native in-app subscriptions on iOS and Android

Honest limits

  • No formal user research yet. The problems are hypotheses from the teaching context; the product is now instrumented, so the next step is to measure instead of assume.
  • Some secondary text is below WCAG AA. Primary text passes at 13:1 or more, but coloured secondary labels on pastels measure 3.5–4.0:1.
  • The daily quest is mostly out of reach on the free plan. Only about 4 of 24 quest templates can be completed within free limits.

What I’d do next

  1. 01Run 5 moderated sessions with real test-takers on the first-day flow.
  2. 02Track onboarding completion, day-7 return, and a one-tap “Was this feedback useful?”.
  3. 03Darken section text shades to reach 4.5:1 while keeping the pastel identity.
  4. 04Only assign daily quests the learner’s plan can actually complete.
  5. 05Bring the Turkish and Spanish translations to the mobile apps.
Next project
Simple English Practice
View →