← Work

AI Flashcards

A short-term vision for the flashcards in Studocu AI: a deck made from a student's own sources, one rating per card, and a deck that says what to study next.

Year
2025
Track
design
Category
case-study

Tools

  • Figma
  • Claude Design

Studocu AI makes flashcards from a student's own material, and they shipped. What I designed for them in 2025 was a short-term vision, not the version that went out: a deck built from the sources you already uploaded, one rating per card, and a deck that tells you what to study next. The screens here are that vision as working prototypes. I directed them, Claude built them in a Claude Design canvas, and I fixed what a render check turned up.

Try the deck

  1. A Studocu AI workspace with Creations and Sources down the left, muted, and a review session in the middle. The card for Heart anatomy and function shows its answer, Right atrium, right ventricle, left atrium and left ventricle, with a line explaining it and its source, Pharmacology for Nurses.pdf, p. 14. Under that an In simpler words box compares the heart to a house with two floors. Below the card sit Don't know and Know it, a line asking you to be honest, and an Ask AI anything field.

Prototype. The deck and its sources are seeded, and the AI's answers are text written in advance, streamed on a timer.

How students were studying

The research was screen-share interviews. Students at undergraduate and graduate level shared their screen and studied the way they normally do, ChatGPT included, to see how they used AI tools and where it went wrong. Each interview became a short snapshot, and the snapshots fed an opportunity solution tree. Two things came up nearly every time: can I trust this answer, and does it fit my course.

ChatGPT was already open. Students used it to get through hard concepts, check what they knew and make study material. An engineering student put it in four words: "ChatGPT is always open." They liked the speed and did not quite trust it, so many checked its answers against their notes or old exams. A maths student said it "does not provide accurate answers for math problems". They wanted to test themselves rather than read: one had ChatGPT quiz them and grade the answers. Getting output that fit the course took work, and rephrasing prompts to get the right level ate time. Equations and graphs went badly. And a few wanted to share progress with classmates, one of them in the words "trying ChatGPT in a social environment".

What the research set out to design, in its own five points:

  • Accuracy that comes from context: learn from the documents a student has uploaded.
  • Ways to test yourself: active recall over passive reading.
  • Customising: difficulty, and how deep a subject goes.
  • Better maths and visual content, step by step.
  • Room to collaborate: sharing and studying together, on the roadmap.

A deck from your own sources

The first version was scoped to one thing: help students test themselves on the documents they had already uploaded. That covered reliable study aids and self-assessment, the two asks the interviews kept coming back to, and a card written from a specific document can be checked against it. The rest of the list stayed on the list.

So the deck starts from the sources, and you watch it being made. Each source is read and marked as read, the cards are written a topic at a time with a counter, and a big deck is split into topics small enough for one sitting. You can open the first topic while the rest is still being written.

Making the deck

Nursing flashcards, creating: 0 of 7 topics ready. A Reading your sources panel shows 0 of 58 cards and three sources, Pharmacology for Nurses.pdf, Pasted notes and Slides_from_last_class.pptx, each marked Reading. The topic list below is still grey placeholder rows.
Reading the sources.
Writing your flashcards, 15 of 58 cards. The three sources are ticked, read at 42 pages, 1,240 words and 18 slides, and a note says 58 cards is a lot for one sitting, so they are split into 7 topics of 7 to 10 cards, and you can start as soon as the first one is ready. Topic 1, Heart anatomy and function, is ready and New; topic 2 is Writing, 7 of 10.
Every source read. The first topic can be opened while the rest are written.
Writing your flashcards, 39 of 58 cards, 4 of 7 topics ready. Heart anatomy and function, The cardiovascular system, Heart rhythm and ECG basics and Common cardiovascular diseases are listed as New.
Written a topic at a time, with a counter.
The Nursing flashcards deck, saved: 58 cards in 7 topics. Deck mastery reads 0 of 58 known. An Up next panel tagged Start here offers Heart anatomy and function, saying the other six topics build on this one, so it makes a good first session, with a Start studying button. Four topics are listed as New, and a toast says Saved to Creations. 58 cards in 7 topics.
Saved, and Up next already points at the first topic.

Prototype. The deck and its sources are seeded, and the AI's answers are text written in advance, streamed on a timer.

The deck opens on one recommendation and its reason, not a grid of equal tiles. Up next picks, in order: a topic due today, the least known first; on a fresh deck, its first topic; a topic due tomorrow; otherwise the first topic you have not opened. The reason is written from the data, so on a return it says how many you knew last time. Under it, the topics in a table: known cards, state, and when each comes back.

The deck

2 states

Visit
The Nursing flashcards deck, saved: 58 cards in 7 topics. Deck mastery reads 0 of 58 known. An Up next panel tagged Start here offers Heart anatomy and function, saying the other six topics build on this one, so it makes a good first session, with a Start studying button. Four topics are listed as New, and a toast says Saved to Creations. 58 cards in 7 topics.
first visit

Nobody has studied the deck yet, so Up next is the first topic, because the others build on it.

returning

On a return, the topic due today comes first, and the reason says how many you knew last time.

Prototype. The deck and its sources are seeded, and the AI's answers are text written in advance, streamed on a timer.

One card, one rating

A card asks its question and nothing else. You show the answer with Space or the button, and only then can you rate it. Press a rating too early and the buttons stay muted while a line tells you to show the answer first. My reasoning is that rating before checking inflates Know it. That is a guess, and worth testing.

Left is Don't know and right is Know it, on the buttons, the arrow keys and a swipe, so one mental model covers all three. A Don't know puts the card back in the queue three cards later, marked Second try, and the session rail grows by one. A toast offers Undo. Every answer carries its source, the file and the page, so an AI-written card can be checked against your own material.

The AI help sits inside the card. Explain it simpler and Give me an example stream their text under the answer, with dots while it thinks and a caret while it writes. Ask about this hands the card to the Ask AI dock as context, so you can ask without leaving the session. In the prototype those answers are written in advance and streamed on a timer.

The keys, on the session only: Space shows the answer, left and right arrows rate, U undoes, E explains it simpler, ? opens the shortcuts and Esc closes them.

A review session

Review session, Heart anatomy and function, card 1 of 8. The card, marked Easy, asks What are the four chambers of the heart? with a Show answer button and its Space key. Don't know and Know it sit greyed out below, over the line Answer it in your head first, then press Space to check.
The question. The rating waits.
The same question after Know it was pressed too early. The ratings stay greyed out and the line under them now reads Show the answer first. Press Space or use the button on the card.
Know it pressed too early. The line says show the answer first.
The card turned to its answer: Right atrium, right ventricle, left atrium and left ventricle, a two line explanation and the source, Pharmacology for Nurses.pdf, p. 14. Three chips at its foot read Explain it simpler, Give me an example and Ask about this. Don't know and Know it are now live, and the line under them asks you to be honest: left arrow if you did not know it, right arrow if you did, and missed cards come back later in this session.
The answer, its explanation and its source. Now you can rate it.
Explain it simpler pressed, its chip now black. An In simpler words box inside the card reads: Think of the heart as a house with two floors. Upstairs, two rooms take blood in. Downstairs, two stronger rooms push it out. The right half sends blood to the lungs, the left half sends it to the body.
Explain it simpler, streamed into the card.
Ask about this pressed. The Ask AI field at the bottom right now holds a chip, Card 1: Four chambers, and the placeholder Ask about this card.
Ask about this hands the card to the Ask AI dock as context.
Card 2 of 9 after Don't know on card 1: the session has grown by one card, and the first segment of the progress rail is grey. The new card, marked Medium, asks which chamber pumps oxygenated blood into the aorta, over a grid of four chambers lettered A to D. A toast reads Marked as Don't know. It comes back in 3 cards, with Undo.
After Don't know: the card is back in three cards, the rail has grown by one, and Undo is one press away.

Prototype. The deck and its sources are seeded, and the AI's answers are text written in advance, streamed on a timer.

The answer can turn the card over or open beside the question. Same card, same states, and which one you get is a preference.

Showing the answer

2 states

Reveal
The card turned over, showing only its answer, Right atrium, right ventricle, left atrium and left ventricle, with its explanation, its source and the three chips.
flip · default

The card turns over.

split

The answer opens beside the question, on a wide screen.

Prototype. The deck and its sources are seeded, and the AI's answers are text written in advance, streamed on a timer.

A card can carry a diagram. This one is a four-chamber grid lettered A to D, drawn for the concept, and it asks which chamber does what rather than whether you recognise a picture. A small answer to the research's ask for visual material.

  1. Card 2 of 8 on its answer side: D, the left ventricle. A grid of four chambers, A and B above C and D, labelled Patient's right and Patient's left, has D filled black. The explanation says diagrams show the heart as if the patient faces you, so its left side sits on your right, and that the left ventricle has the thickest wall because it pushes blood around the whole body. Its source is Slides_from_last_class.pptx, slide 6.

Prototype. The deck and its sources are seeded, and the AI's answers are text written in advance, streamed on a timer.

What the deck does next

A session ends on a decision, not a score. The ring shows how many you knew first try, the state says where the topic stands, and there is one primary action: review the cards you missed, or move on to the weakest topic. The topic comes back on a date you can plan around: tomorrow if it needs practice, in three days if it is almost there, in a week if it is mastered.

After a session

3 states

Result
Session complete for Heart anatomy and function. A ring reads 38% first try over the state Needs practice: 3 of 8 on the first try, normal for a first pass, and the 5 you missed are to be gone over again tomorrow. The state stays Needs practice. A black Review the 5 you missed button sits over Back to topics. On the right, five cards to revisit, each with its answer and an Explain it simpler chip.
needs practice

Under 60% known: the missed cards are the next step, and the topic is back tomorrow.

almost there

From 60%: one more pass, in three days.

mastered

From 85%: on to the weakest topic, and a check in a week.

Prototype. The deck and its sources are seeded, and the AI's answers are text written in advance, streamed on a timer. Each result is a scripted run through the same seeded topic, with three, five and seven of its eight cards known on the first try.

The figure draws the whole loop with the prototype's own numbers. There is no spaced repetition algorithm behind it, only these rules.

From one rating to the next session

Every value is the prototype's own rule. Prototype.

  1. A rating

    Know it or Don't know, the same by key, click or swipe.

    A Don't know comes back after 3 more cards, in the same session.

  2. The card's level

    Known on the first try: a new card goes to level 2, any other card up one, to 3 at most.

    Missed on the first try: level 1.

    The results ring is the share known on the first try.

  3. The topic's state

    The share of its cards at level 2 or 3.

    New
    not studied yet
    Needs practice
    under 60%
    Almost there
    from 60%
    Mastered
    from 85%

  4. When it comes back

    Needs practice
    tomorrow
    Almost there
    in 3 days
    Mastered
    in 7 days

  5. Up next

    What the deck offers first, in this order.

    1. Due todayTopics due today, the one with the least known first.
    2. Start hereOn a deck nobody has studied yet, its first topic.
    3. Due tomorrowTopics due tomorrow, the one with the least known first.
    4. Not startedOtherwise, the first topic not opened yet.

    Studying it starts again at 01.

The same rating on a phone

On a phone you swipe. After the answer is shown the card follows your finger and tilts, a stamp fades in and is full at 60 pixels, and letting go past 96 pixels rates it, right for Know it and left for Don't know. Short of that it snaps back. The buttons stay for anyone who does not swipe, undo reverses a wrong one, and the first card you flip nudges left and right once to show the stamps.

On a phone

The Nursing flashcards deck on a phone: 58 cards in 7 topics, 26 of 58 known. Up next, tagged Due today, is Heart anatomy and function with a full width Start review button, and the topic list starts below it. A bar at the foot holds Materials and a black Ask AI button.
The deck, with Up next.
Card 1 of 8 at full width: What are the four chambers of the heart? with Show answer. Don't know and Know it sit greyed out below, over the line Answer it in your head first, then tap the card to check.
The question. Tap the card to flip it.
The card's answer, its explanation and source, with three chips, Simpler, Example and Ask AI. Don't know and Know it are live, over the line Swipe right if you knew it, left if you did not. Missed cards come back later.
The answer. Swipe right if you knew it, left if you did not.
The answer card dragged to the right and tilted, a black Know it stamp across it, the next card waiting behind.
Dragged right: the stamp is full at 60 pixels, and 96 commits.
Simpler pressed, its chip black, and an In simpler words box inside the card with the house of two floors.
Explain it simpler, on the phone.
Session complete: a ring reads 75% first try beside Almost there. 6 of 8 on the first try, the 2 missed came back right, and one more pass in 3 days should lock them in. Review the 2 you missed, Back to topics, and the first of two cards to revisit.
Results: the state, the next step, and the cards you missed.

Prototype. The deck and its sources are seeded, and the AI's answers are text written in advance, streamed on a timer.

The phone runs live below. Flip a card, swipe, get to the results. Start over resets it.

The Nursing flashcards deck on a phone: 58 cards in 7 topics, 26 of 58 known. Up next, tagged Due today, is Heart anatomy and function with a full width Start review button, and the topic list starts below it. A bar at the foot holds Materials and a black Ask AI button.

Prototype. The deck and its sources are seeded, and the AI's answers are text written in advance, streamed on a timer. The concept was only designed in light, so the phone stays light in both themes.

Mastery in greys

The prototypes run on a small colour layer made for this concept on top of Studocu AI's tokens. It is monotone: ink, greys and white carry everything, mastery included. Blue is left for the focus ring and the AI gradient lives only in the sparkle. I wanted nothing on a study screen to need decoding, and I did not want red used to grade a student.

So every signal is fill, weight or position. Know it is filled ink, Don't know is white with an ink outline. Mastery is a ramp of greys and an ink ring that fills up, so the level never depends on hue. The session rail is steps of lightness. Due today is a filled pill, later dates are plain text.

A few of the values I started from failed WCAG AA when measured, so the meta grey went darker, primary buttons went to ink, and links and the focus ring took a darker blue. The ratios below are worked out from the hex, not typed in. Two marks pass 3:1 narrowly and ship as measured: the Needs practice step, and the missed tick on its track.

  • text.ink#0A0A0ATitles, the primary button, the Know it fill.19.80:1 on surface.page, AA18.49:1 on surface.workspace, AA17.46:1 on surface.tint, AA
  • text.strong#2F3E4ELabels and icons.10.94:1 on surface.page, AA10.22:1 on surface.workspace, AA
  • text.body#4C5966Explanations, reasons, later review dates.7.17:1 on surface.page, AA6.70:1 on surface.workspace, AA
  • text.meta#66707ACounts, dates, overlines, placeholders.5.04:1 on surface.page, AA4.71:1 on surface.workspace, AA
  • text.inverse#FFFFFFWords on ink: Know it, the toast, the Today pill.19.80:1 on on-ink.surface, AA13.97:1 on on-ink.chip, AA
  • on-ink.surface#0A0A0AThe toast, Know it, the Today pill.
  • on-ink.chip#2C2C2CThe key cap on Know it.
  • surface.page#FFFFFFCards and panels.
  • surface.workspace#F6F7FBThe workspace, the AI answer block, a rating before the answer shows.
  • surface.tint#EEF1F4The context chip, row dividers, loading blocks.
  • line.divider#E6EBEFHairlines, and the empty track.
  • line.border#D3D9E0A secondary button's edge, where the label names the control.
  • line.input#8A96A3An input's outline and the empty glyph's ring.3.01:1 on surface.page, AA for a mark
  • mastery.new#E6EBEFNot studied yet, the track.
  • mastery.needs-practice#8A96A3Needs practice.3.01:1 on surface.page, AA for a mark
  • mastery.almost-there#4C5966Almost there.7.17:1 on surface.page, AA for a mark
  • mastery.mastered#0A0A0AMastered.19.80:1 on surface.page, AA for a mark
  • signal.rail-missed#7A838CA missed card's tick on the session rail.3.85:1 on surface.page, AA for a mark3.21:1 on line.divider, AA for a mark5.14:1 on text.ink, AA for a mark
  • focus#1168C3The focus ring, the only blue.5.54:1 on surface.page, AA for a mark5.17:1 on surface.workspace, AA for a mark
  1. New#E6EBEF
  2. Needs practice#8A96A32.51:1 from New
  3. Almost there#4C59662.38:1 from Needs practice
  4. Mastered#0A0A0A2.76:1 from Almost there

The concept's own colour layer, built on Studocu AI's tokens. Every ratio is worked out from the hex. Prototype.

The components on the prototype's white: the rating pair, the mastery marks, topic rows, the swipe stamps and the result ring.

The rating pair in four rows. Before reveal, Don't know and Know it are pale and grey with their arrow keys. Answer shown, Don't know is outlined and Know it is black. Hover, Know it turns slate. Mobile, 56 px, both are taller with arrows instead of keys.
The mastery marks: a filled circle with a tick for Mastered, a three quarter filled circle for Almost there, a quarter filled circle for Needs practice, an empty grey circle for New, and an open spinner for Writing.
Topic rows under the headings Topic, Known, Status and Review. Heart anatomy and function, studied 3 days ago, 3 of 8, Needs practice, due Today in a black pill. The cardiovascular system, studied yesterday, 9 of 10, Mastered, in 5 days, highlighted with an arrow. Heart rhythm and ECG basics, Writing cards, 5 of 8. Then a grey placeholder row.
The two swipe stamps, tilted: Don't know outlined in black, and Know it in white on black.
The result ring: a thick black arc three quarters of the way round a pale track, 75% first try in its middle.

Prototype.

What is still open

This is a vision as a prototype. The deck and its cards are seed data, the AI's answers are written in advance, and the results were reached by script. None of these screens is the shipped product. There is no spaced repetition behind the loop, and rating after checking is a guess nobody has tested.

The research asked for more than this takes up: customising, studying together, and maths beyond a diagram card.

Accessibility is computed, not tried. Nothing was tested with a screen reader or with students who use one, the artboards are fixed at 1440 and 390 pixels so zoom and reflow were not tested, and the concept is light only. Whether streamed text is harder to take in than text that appears at once is untested too. A show full answer option would be the first thing to try.

More case studies

See all 27