Turning scattered class notes into a shared quest for knowledge
ClassQuest is an AI-assisted class wiki that helps students consolidate fragmented course material into citation-backed flashcards, quizzes, and daily study quests — designed and validated across three research-driven iterations.
- Role
- UX Researcher & Designer
- Duration
- 3-Phase DSR Study
- Methodology
- Design Science Research
- Tools
- Figma · Lovable AI · Hotjar
By exam season, every student’s "study system" is a graveyard of tabs
University portals hold the lecture slides. A WhatsApp group holds someone’s handwritten notes. A shared Drive folder — named by no one in particular — holds the rest. Most students cope by pasting slides into ChatGPT and hoping the summary is right, with no way to check.
This isn’t a willingness problem — students share constantly. It’s an infrastructure problem: no tool combines collaborative contribution, AI transformation, retrieval practice, and source transparency in one place.
11/18
rely on WhatsApp / Telegram as their main note-sharing channel
18/18
had used AI tools to summarize notes — none fully trusted the output
0
existing tools combine collaboration + AI curation + retrieval + citations
"Scattered and inconsistent... messy uploads without the right document name... no tagging or searchability."
— Phase 1 exploratory survey, open-ended responses⌗ n=18
Existing tools each solve a sliver of it: Anki and Quizlet handle spaced repetition but not collaboration. ChatGPT transforms content but keeps no shared memory or source trail. Notion AI supports individual writing, not collaborative curation. The gap sits exactly where contribution, AI curation, and retrieval-based learning should meet.
Design Science Research: build, evaluate, learn, rebuild
Rather than a single design-test-ship cycle, this project followed Design Science Research Methodology (DSRM) — every design decision in the final prototype is traceable back to a specific empirical finding from the phase before it.
Phase 1
Problem Grounding
Anonymous exploratory survey, n=18, via Google Forms
Phase 2
Mid-Fidelity Cycle
Task-based testing + semi-structured interviews, n=7
Phase 3
High-Fidelity Cycle
Task testing + survey + Hotjar analytics, same n=7
Reusing the same seven participants across Phases 2 and 3 was a deliberate choice — it enabled within-participant comparisons, a more sensitive way to measure whether a redesign actually improved things, rather than just collecting fresh opinions each round.
Validating that the problem is structural, not motivational
An 18-person exploratory survey tested whether students actually wanted a shared wiki, and why current habits fell short. Four themes shaped everything downstream.
Theme 01
AI is already in the workflow — and already distrusted
Heavy ChatGPT use for summarizing slides, paired with no way to verify accuracy or sourcing. Cost was the second-biggest complaint.
Theme 02
Knowledge lives in informal, unsearchable channels
WhatsApp/Telegram (11/18), Moodle/ILIAS (8), Drive/Docs (7) — three students had no shared system at all.
Theme 03
Students want to contribute, with minimal friction
All 18 contribute notes at least occasionally; 17/18 cite "helping others" as their motive — not badges or karma.
Theme 04
Interest is genuine but skepticism is real
12/18 rated the concept 4–5/5; the rest were unconvinced existing LMS tools didn’t already cover it. The design needed to prove value immediately.
These findings pointed to a three-stage architecture rather than a single feature: Contribute → Curate → Learn — students add material, AI extracts and surfaces it for confirmation (never silently), and the system turns it into retrieval-first practice.
The concept worked. The interface didn’t get out of its own way.
A mid-fidelity prototype (built in Lovable AI + Figma) was tested through task-based sessions and 15–20 minute interviews with 7 students. The core idea landed — every participant understood the purpose, rating it 7–10/10 informally — but six consistent usability themes surfaced.
Theme 1
Landing page undersold the concept
"Explore Demo" misled 4/7 participants into expecting a tutorial; it dropped them into a live dashboard instead.
Theme 2
The upload function hid behind "Wiki"
4/7 participants struggled to even locate where to contribute material.
Theme 3
"Explain & Cite" was the breakout favorite
The most consistently praised feature across every interview.
Theme 4
Weak concepts felt like an undifferentiated dump
Participants wanted a "portion-wise" breakdown by topic, not one long list.
Theme 5
Gamification needed calibration
Loved, but one participant warned it needs to feel tied to something tangible to sustain engagement.
Theme 6
Interface felt heavy for new users
"There are a lot of things for a new user to understand" — plus low dark-mode contrast.
"At some points I think the UI is a little bit heavy. It can be a bit more cleaner, a bit more easy to understand."
— P6, mid-fidelity interview⌗ Theme 6
Twelve changes, each one traceable to a participant’s exact words
Every Phase 2 finding became a specific, documented design decision — the core discipline of Design Science Research. Three of the highest-impact changes:
Insight
"Explore Demo" created false expectations of a guided tour
Action
Replaced with "See How It Works" + a study-themed hero illustration
Insight
4 of 7 participants couldn’t find the upload entry point under "Wiki"
Action
Renamed to "Sources & Wiki," added a descriptive subtitle, surfaced "Upload Sources" directly on the Dashboard
Insight
Horizontal nav + dense panels felt "heavy" to new users
Action
Restructured into a vertical sidebar; replaced the abstract XP counter with a concrete "Exam Ready %" metric
The rebuilt Dashboard — vertical sidebar, surfaced upload action, weak spots grouped by topic, and a single Exam Ready metric replacing raw XP.
"Navigation was very intuitive now. Previously I was unable to even find it whereas this time I felt completely in control. The text load was reduced which is a win-win for me."
— R5, high-fidelity evaluation⌗ Table 4.4
The symbol students spend four years earning the right to wear
Every study tool talks about progress. ClassQuest shows it through the one object that has meant academic accomplishment for centuries — the graduation cap. No mascot to learn, no metaphor to decode. Students already feel what the mortarboard means the moment they see it. The design task wasn’t to invent new meaning; it was to take that pre-loaded emotional resonance and rebuild it into something that felt modern, energetic, and credible enough to sit in a sidebar at midnight before an exam.
Logo exploration
Four directions were considered before arriving at the final mark. Each was tested against the same question: does this immediately communicate student achievement — without looking like clip art?
01
Shield / Badge
Felt institutional and defensive — more "university seal" than student tool. Said authority, not progress.
02
Stacked Flashcards
Described a single feature, not the destination. Communicated "quiz tool," not "you’re going to graduate."
03
Cap — flat 2D outline
Right symbol, wrong form. Flat and strokework made it feel like a placeholder icon rather than a considered brand mark.
04
Cap — 3D gradient
Faceted planes give depth and energy. The deep-navy-to-sky-blue gradient reads like the cap catching light mid-motion. Immediately legible at both 16 px sidebar and large hero sizes.
Why faceted and 3D?
A flat outline cap is accurate but passive — it reads like a label, not a brand. Rendering it with faceted geometry and a directional gradient does two things: it implies depth (the cap has mass, it’s real) and motion (the gradient shifts as if the cap is rotating, mid-air, after the toss). The resulting mark carries the meaning of the symbol without looking like something pulled from an icon library.
Lockup & usage
The full lockup — cap mark plus the "ClassQuest" wordmark — is the primary unit. Three surface treatments cover every context the product appears in.
Light surface
Default. Used on the landing page, dashboard, wiki editor — anywhere the background is white or off-white.
- ✓Cap shows full gradient
- ✓Wordmark in deep navy → #13182B
- ✗Never use on yellow or green surfaces
Dark surface
Used in dark mode, deep-panel headers, or the leaderboard podium screen where the background is navy or near-black.
- ✓Cap gradient unchanged — it reads against dark
- ✓Wordmark flips to white → #FFFFFF
- ✗Never invert the cap to white outline
Icon-only
Favicon, app icon, sidebar collapsed state, and any context under 48 px wide where the wordmark would be unreadable.
- ✓Cap mark only, no wordmark
- ✓Minimum size: 24 × 24 px
- ✗Never crop or clip the tassel tail
Why "ClassQuest" stays one word, one weight
"Class" and "Quest" describe two different things — the cohort you belong to and the journey you’re on — but splitting them visually (different weights, different colors, a line break) makes the brand name feel like a tagline, not a product name. The wordmark stays in a single heavy weight at a fixed tracking so it reads as one destination, not two ideas stapled together. The cap provides all the visual variation the lockup needs.
Color system
Color in the UI is a signal, not a decoration. The palette is deliberately minimal so that when color appears, it’s always telling the student something actionable — and so the cap’s own gradient remains the most vibrant thing on the screen.
Brand
Graduation Gradient
#1B2A6B → #6BA3EF
Cap icon only — never applied to UI elements
Ink Navy
#13182B
Wordmark, headings, body text
Interaction
Action Blue
#2F5FE0
CTAs, active states, links
Blue Tint
#E6ECFD
Selected states, hover fills
Semantic
Mastery Green
#1F8A5C
Topic complete, correct answer
Review Amber
#D9971F
Review due, streak at risk
Urgent Red
#C24545
Weak concept, wrong answer
Typography
A single typeface family covers all product type — chosen for its geometric roundness that echoes the wordmark’s weight, and its exceptional legibility in dense information contexts like a flashcard at 1am.
Display — Dashboard metrics & topic titles
Aa Bg 12 Sc
Weight 800 · size 28–38 px · tracking −0.02em
UI Labels & navigation
Sources & Wiki
Weight 600 · size 14–16 px
Body & quiz content
What is Mutual Authentication?
Weight 400 · size 15–17 px · 1.55 line-height
Monospace — Citations & chips
Lecture_04_Slides.pdf · Slide 8
IBM Plex Mono 400 · size 11–12 px
The monospace face used in citation chips is the one exception to the single-family rule. Its literal "document" feel reinforces that a chip is pointing at a real file — not an AI hallucination. The contrast between the rounded product typeface and the typewriter-style citation face is exactly the visual cue that says "this part was verified."
Voice & tone
Plain, never patronising
"2 weak concepts detected" beats "Uh oh, time to catch up!" The product’s whole value is trustworthy information — the copy can’t be chattier than the data it’s presenting.
Verbs, not labels
Every button says what happens when you press it: "Generate Quests," "Upload Sources," "Review Weak Spots." Never "Submit," never "Go," never "Click here."
Numbers earn the encouragement
"You’re 23% better than last week" is a fact the system can stand behind. "Great job today!" is not. The cap on the completion screen does the celebrating — copy stays grounded in the numbers.
Walking through the contribute → curate → learn loop
The high-fidelity prototype’s nine core screens, each carrying a specific job in the pipeline.
1 — Sources & Wiki: Topics are scoped by week, each tagged Healthy / Review Due / New, with mastery and contributor counts visible at a glance.
2 — Wiki Editor with AI Assist: Students write or paste notes; AI Assist tools (Summarize, Extract key terms, Generate questions) act only on selected text — never silently.
3 — Course Library: Every uploaded source stays visible and attributed, with outdated material flagged rather than hidden.
From curated material, the AI generates retrieval-first micro-learning units — never passive summaries alone — across three formats:
Flashcard
MCQ
Cloze
Every answer self-rates ("I knew this / I was unsure / I didn’t know") and surfaces an Explain & Cite panel — the single most trusted feature across every evaluation phase.
Source Preview Drawer: One tap from any citation chip opens the exact highlighted excerpt it came from — the deepest layer of a trust architecture built in three tiers: chip → explanation → full excerpt.
Sessions close with a clear summary rather than a generic celebration screen, and feed straight back into a topic-level Progress Dashboard:
Quest Complete
Progress Dashboard — weak spots grouped by topic, not dumped together, directly addressing Phase 2 feedback.
Leaderboard & Hall of Fame: Tier-based "Silver Division" framing with promotion/relegation — social motivation without exposing anyone’s real identity or punishing a single bad week.
From "tricky to find the upload button" to an 8.14/10
The same seven participants who flagged Phase 2’s friction returned to evaluate the high-fidelity rebuild — enabling a genuine before/after read, not just a fresh first impression.
8.14/10
mean overall rating · range 7–9
7/7
said the redesign was a clear improvement; none missed anything from the old version
7/7
would use ClassQuest regularly if it were fully functional
"The previous version seemed a little tricky to use when I had to find the option for uploading sources, but now it was way quicker and easier to do so."
— R7, Phase 3 evaluation⌗ Table 4.4
Behavioral data from Hotjar — recorded across four full sessions — corroborated the self-reported scores rather than contradicting them:
Engagement
~12 min
average session length, ~12 pages visited per session
Friction
0 rage clicks
across 156 recorded clicks
Attention
89.8%
average scroll depth — most of each page was actually read
Top-clicked buttons — Upload Sources, Next, Generate My First Quiz — confirmed participants were moving through the intended contribute → learn pathway, not wandering the edges of the prototype.
15 guidelines distilled for AI-assisted class wikis
Beyond the prototype, the thesis’s second contribution is a set of empirically grounded guidelines — organized into five clusters — for anyone designing a similar system.
Content architecture & contribution
G1
Consolidate materials, AI output, and practice in one course-scoped space.
G2
Make the contribution entry point discoverable through multiple paths.
G3
Surface contribution needs contextually, on the topic card itself.
AI transformation & micro-learning
G4
Design around retrieval demand, not passive summaries.
G5
Offer differentiated study modes for different goals.
G6
Let students confirm AI extraction before content generation.
Trust calibration & transparency
G7
Use source citation chips as the default trust mechanism.
G8
Layer trust: chip → explanation → full source excerpt.
G9
Make AI edits and regeneration visible, never silent.
G10
Communicate that AI output is provisional, not authoritative.
Engagement & motivation
G11
Favor light gamification: streaks and tiers over leaderboards alone.
G12
Use a daily set to operationalize spaced review as habit.
Usability & information density
G13
Reduce density with vertical nav and progressive disclosure.
G14
Use action-oriented labels that match user mental models.
G15
Invest deliberately in onboarding the contribute → curate → learn loop.
What this project actually taught me
Tension
Transparency vs. simplicity
Citation chips, the Explain & Cite panel, and the AI extraction preview all add density in service of trust — exactly what participants also asked to see less of. There’s no clean resolution; only continuous calibration.
Tension
Voice UI isn’t the only "AI interface"
Designing for a conversational, AI-driven system doesn’t have to mean designing a chat or voice interface — this system stayed fully visual and still felt AI-native through citations and inline assists.
Next
Recurring-feedback → routine suggestions
If a device or topic keeps generating the same correction, the system could proactively suggest converting it into a saved routine — extending an existing pattern rather than inventing a new one.
Next
Test with a functional AI backend
The current evaluation used pre-authored AI content. Real generation latency, occasional errors, and live citation accuracy all need testing before any claims about learning outcomes can be made.
The contribution upload flow remained the single hardest problem across both redesign cycles — proof that even a well-validated concept can be undone by one mislabeled button, and that discoverability deserves the same rigor as the feature it’s gating.
Case study by Sohaib Bin Kamran · Master in Human-Computer Interaction, University of Siegen · Based on the thesis "User Experience (HCI) for AI-based Knowledge Transfer in Education."
