← Back to work
Live prototype · Personal project

Study Buddy AI

A study app that turns a kid's messy class notes into easy guides, flashcards and practice tests, with a friendly tutor and a gamified world that rewards real studying. Designed and prototyped end to end with AI.

Role
Product Designer · AI prototyping
Tools
Claude · ChatGPT · React
Type
Personal project
Audience
Elementary students (7–11)
The idea

Studying that feels like play

Younger students often have notes but no friendly way to actually study them. Study Buddy takes whatever they wrote in class, even messy or photographed notes, and turns it into a simple guide, flashcards, and a quick practice test in their own words. A patient tutor helps when they get stuck, and every bit of studying earns rewards they spend building their own little world. There's also a calm parent area for tracking progress and test dates.

Process

Designed & built with AI

I wanted to see how far I could take a real, working product using AI across the whole workflow, from defining the problem to a clickable, testable prototype. Each tool played a distinct role:

Claude
Breaking down complex requirements, PRDs, and the underlying problem, scoping what Study Buddy should and shouldn't do for young learners.
ChatGPT
Research synthesis, UX strategy, information architecture, user flows, and shaping how the product would be communicated.
Claude AI
Exploring UI directions, generating variations, and accelerating iterations, the interface itself was designed and built in Claude.
The whole interface, from the rounded kid-friendly visual language to the accessibility-checked color contrast, was designed strictly in Claude AI, then refined through fast prototype iterations.
The flow

How a study session fits together

Sixteen screens, but a child only ever holds one idea at a time: get my notes in, study them, earn something, spend it. The structure below is the one in the working prototype, not an idealized version of it.

Study Buddy AI user flow A flowchart of sixteen screens. Onboarding leads to Home, the single hub. Adding notes generates a study guide, which branches into flashcards, a practice test, a chat with Nim the owl tutor, and a drill built from flagged concepts. Finishing a practice test or logging a real class score reaches the reward screen, which feeds My World and My progress. A separate parent branch adds test dates that appear as a countdown on Home. A full text outline follows below the diagram. START 1. How to use • Shown once • Reopen any time 2. Home • Subjects • Food counter 3. Add notes • Type notes • Photo a worksheet Notes added? Add some notes first • Stays on Add notes No STUDY 4. Study guide • Concepts in kid language • Flag anything tricky Claude generates Yes Anything flagged tricky? 5. Quick drill • Only the flagged concepts Yes PRACTICE 6. Flashcards • No score, no timer 7. Practice test • The only scored path Claude generates 8. Ask Nim • The owl tutor, locked to this subject Claude answers No every practice mode returns to the guide EARN Test finished? No 9. Reward • Score and food earned • Retry, never a verdict Yes SPEND AND TRACK 10. My World • Feed what you built 11. Shop • Animals, decor 12. My progress • Streaks and scores 13. Log a score • A real class test a real test score earns food the same way 14. Parent area • No gamification 15. Test days • Subject and date Countdown appears on Home parent branch

Scroll the diagram sideways, or open the text outline below.

Read this flow as a text outline
  1. First run

    Onboarding happens once and can be reopened later, so a child who forgets how something works is never stuck asking an adult.

    • How to use Three plain-language cards explaining what the app does. Reachable again any time from Home. Next: Home
  2. Home

    The one hub. Every branch of the app opens from here and returns here, so there is a single place a child can always get back to.

    • Home Subject shortcuts, the current study guide if one exists, and a food counter showing what has been earned. Next: Add notes, Study guide, My progress, My World, Parent area, How to use
  3. Get the notes in

    Two ways in, because a seven-year-old with a paper worksheet and a ten-year-old with a typed outline are both real users.

    • Add notes Type notes directly, or photograph a worksheet and let the app read it. Claude generates the guide Next: Study guide
    • Import from a notes app Explains how a grown-up connects a notes app in Settings so notes arrive on their own. Next: Add notes
  4. Study

    The study guide is the second hub. Four ways to practice branch from it, and all four come back to it rather than chaining into each other.

    • Study guide Concepts in kid-sized language. Anything confusing gets flagged as tricky, which is what feeds the drill. Next: Flashcards, Practice test, Ask Nim, Quick drill
    • Flashcards One card at a time, flip to check. No score, no timer, no pressure. Next: Study guide
    • Practice test Multiple choice with an explanation after each answer. The only path that produces a score. Claude generates the questions Next: Reward
    • Ask Nim Nim, the owl tutor. Scoped to the current subject, and it will not answer anything outside the schoolwork in front of it. Claude answers Next: Study guide
    • Quick drill Short practice built only from the concepts flagged as tricky. Only when something is flagged Next: Study guide
  5. Earn

    One reward screen, two ways to reach it. Effort is what earns food, so a low score still pays out and the screen offers a retry rather than a verdict.

    • Reward Score, food earned, and a bonus. Reached by finishing a practice test or by logging a real classroom test score. Next: My World, My progress, Flashcards, Study guide
  6. Spend and track

    Where earned food turns into something visible. The parent area sits on this level too, deliberately outside the child's study loop.

    • My World The world a child builds and feeds with what studying earned. Next: Shop, Home
    • Shop Animals and decorations bought with earned food. Next: My World
    • My progress Streaks and past scores, framed as things done rather than things failed. Next: Log a score, Home
    • Log a score Records a real classroom test result, which earns food the same way an in-app test does. Next: Reward
    • Parent area A calm space for grown-ups. Progress, upcoming test dates, no gamification. Next: Test days, Home
    • Test days Adds a subject and a date, which becomes a countdown the child sees on Home. Next: Parent area
Two rules hold the whole thing together. Nothing is a dead end: every screen has a labelled way back to Home or to the study guide, so a child can never strand themselves somewhere they do not recognize. And nothing branches more than two levels deep from Home, which is why sixteen screens still feel like four choices.
Try it yourself

The live prototype

This is the real, clickable prototype, not screenshots. Tap “Try an example” on the home screen to watch it turn notes into a study guide, flashcards, and a practice test, then feed your world.

In the full build, study guides, tests and the tutor are generated live by Claude. This public version simulates those responses so the flow stays fully interactive without a backend.

What's inside

Key features

Notes → study guide
Paste, type, or snap a photo of class notes and get a simple guide in kid-friendly language.
Flashcards & practice tests
Auto-generated cards and a fair multiple-choice test drawn only from the student's own notes.
Friendly tutor
Nim, a patient owl tutor that gives hints and explains step by step, never just the answer.
Gamified worlds
Studying earns food to grow a Zoo, Aquarium, or Dino Park, motivation that rewards effort.
Progress & strengths
Scores are saved so kids see what they're great at and what to practice next.
Parent area
A calm space for grown-ups to add test dates, see a countdown, and follow along.
The decision

What I chose to leave out

The obvious way to make a study app sticky is to make it social. Streaks against friends, a class leaderboard, messages between students. Every one of those would have raised engagement.

I scoped the product as strictly study-only instead. No messaging between users, no social graph, no public profiles. The AI tutor was the single exception, and only because it is a study tool rather than a channel to another person.

For a seven year old, the safest feature set is the smallest one that still does the job.

That constraint shaped everything downstream. Motivation had to come from the student's own progress rather than comparison to peers, which is why the reward loop feeds a private world of their own instead of a public ranking. Progress is visible to a parent, in a separate calm area, rather than to anyone else.

One smaller decision in the same spirit: the app and the tutor have different names. The product is Study Buddy AI. The tutor is Nim, an owl with a name of its own, and Nim never says the product name in its own voice. A child asking a friend for help should not be reminded they are talking to software, and the word AI in that sentence does exactly that. The brand name stays where a parent or teacher reads it: the home screen, the calendar export, the app itself.

Nim's behavior is set by a written system prompt, not left to chance. It defines who Nim is talking to, a student roughly seven to eleven, and holds the tutor to the subject in front of them. Ask Nim something off-topic and it steers back rather than answering. It never asks for personal information. Those are the same study-only and safety rules that shaped the rest of the product, written as instructions to the model instead of screens in a flow.

What this app deliberately does not do
  • No messaging between students
  • No social feed, followers, or public profiles
  • No comparison of one child's scores against another's
  • No content the tutor did not draw from the student's own notes
Accessibility

An audit that triggered a rewrite

I ran a full WCAG AA audit on the finished build rather than treating accessibility as a checklist at the start. It found enough that the right response was rebuilding the interface rather than patching it.

Contrast, verified not assumed
Every text and background pairing measured to at least 4.5:1, which meant revising parts of a palette chosen for how playful it looked.
Keyboard operability throughout
Every interactive element reachable and operable without a pointer, with visible focus outlines rather than the browser default.
Semantic structure and ARIA
Proper heading order, roles, and labels, so the app is navigable by structure rather than by sight alone.
Live regions for the tutor
The tutor's replies arrive asynchronously, so they announce to a screen reader instead of appearing silently on screen.
Reduced motion respected
Confetti and transitions honour the system preference, so the celebration never becomes a barrier.
Consistent type and spacing
A single scale applied across every screen, with large touch targets sized for smaller hands.
Quality

I QA'd my own prototype.

Prototypes usually get demoed rather than tested. This one got a functional pass, because a broken path in a demo is the thing a viewer remembers.

I traced all 62 button handlers to confirm each one went somewhere, verified all 9 controlled inputs held and cleared their state correctly, and walked the full reward loop end to end, from earning food through spending it to seeing the world change. The pass also surfaced a dead branch in the exam results that no path could reach, which came out.

Seven years in QA taught me that the last ten percent is where a product either earns trust or loses it.

That habit is the reason I map error paths alongside happy paths in my professional work too. It came from testing, and it stayed.

Reflection

What I learned

Building Study Buddy end to end with AI changed how I think about my own role. The tools moved fast, but every meaningful decision still came down to product judgment: who this is for, what to leave out, and how it should feel for a seven year old who is tired after school.

AI accelerates, it doesn't decide
AI gave me working screens in minutes, but it happily generated features kids didn't need. My job was editing: cutting scope, protecting the core flow, and keeping the experience calm instead of busy.
Designing for kids is a constraint, not a theme
Reading levels, tap targets, color contrast, and reward loops all had to serve a young, distractible user. Those constraints shaped the typography, the pacing, and the friendly tutor voice more than any visual trend did.
A clickable prototype beats a deck
Getting to a real, testable build let me feel the gaps a static mockup hides: empty states, loading moments, and what happens when a kid pastes messy notes. That is where most of the design work actually lived.
If I took Study Buddy further, the next step would be real usability sessions with students and parents to pressure test the reward loop and the reading level, then wiring the live AI back in behind a secure backend.

Like how I build?

This is the kind of work I love, taking an idea from problem to a real, testable product with AI. Let's talk.

Connect on LinkedIn → Back to work →