CARLETON × CITYSTUDIO·CASE STUDY·2025
The Kindness Quest
I helped The Kindness Quest find its story after our documentary plan collapsed: a child-friendly web quest where children meet a young explorer and a Hate Monster, then use visual data and quiz moments to approach a serious civic topic.
PROMOTIONAL VIDEO — SCRIPT, VOICE, EDIT, MIX
Promotional video production
I treated the promotional video as the trailer for the quest: I wrote and recorded my own section, edited the cut, mixed audio, and helped teammates tighten their scripts so the story felt consistent.
Open promotional video
OPENING TURN — WHEN THE DOCUMENTARY PLAN COLLAPSED
The project did not start as a monster quest.
At first, our Anti-HateCrimeCampaign_Proposal_Slide framed the work as a Web-Based Project with Embedded Documentary: research, data, expert interviews, and a call to action. After nearly two months, nobody was willing to be interviewed. I remember that moment as the real beginning of the project: if we could not ask adults to explain hate crime on camera, could we build a safer story that children could enter themselves?
OPENING EVIDENCE — ORIGINAL PLAN AND WINTER PIVOT
PRODUCTION PROCESS — FROM WIREFRAME TO DATA WORKFLOW
COLD OPEN
TC 00:00
PROBLEM
Hate-crime awareness is serious, abstract, and difficult to explain to children.
Legal definitions, incident reports, and raw statistics can overwhelm young audiences when they appear without structure. The goal was to give children and youth enough hate-crime evidence to understand the issue without turning the experience into fear.
DIRECTION
How might we turn a sensitive civic topic into a child-friendly learning journey?
Replace dense explanation with a guided quest: modular pages, visual storytelling, interaction.
Replace dense explanation with a guided quest: modular pages, visual storytelling, interaction.
CHALLENGE
Make the topic approachable without making it feel harmless — a safer metaphor and clear choices that still respect the seriousness of hate, unfair treatment, and community safety.
SOLUTION
A web quest that introduces hate-crime awareness through a Hate Monster and child-superhero story, then guides children through recognition, protection, data storytelling, and a quiz-based learning path.
THE CAST
TC 00:33
The Young ExplorerTHE HERO
"Is this safe to look at? Where do I start?"
Needs: pacing, tone, and navigation that support curiosity without overwhelming — the first decision is whether the topic feels safe enough to approach. — audience: children, youth, and future generations
The Hate MonsterTHE VILLAIN
Grows a little every year the reported incidents climb.
Needs: to be understood, not just feared — the metaphor keeps the issue approachable without erasing its seriousness. — the story frame of the quest
STORY CONFLICT
TC 00:44
Defeat the monster?
The first monster-game framing sounded clear: teach children how to defeat the Hate Monster. Then the team pushed back. If the site asks children to fight a monster, are we answering hate with another form of violence?
We brainstormed again and even argued: can we be friendly with the monster if it represents hate crime? Or does the monster lose power when children understand what it is, where it grows, and how to respond safely?
The final framing: learn about the "Hate Crime" monster to "make friends" with it. Not to accept harm, but to name it, inspect it, and weaken the fear around it.
HIGHLIGHTS — THE PAYOFF, UP FRONT
TC 00:55
Three moves that carried the site, each traceable to the observation that demanded it. The process plays in Acts I–III.
HL 01
The homepage is the door into the quest
I created the homepage and helped optimize the site content so the first screen works as an entry point: a large illustrated scene introduces the Hate Monster, the child hero, and the quest structure — before asking anyone to read detailed content.
obs.032 — nobody skips the hard topics. they skip the boring ones.
HL 02
Data that grows the monster
I contributed to the data visualization work. To make the bar chart easier for children to understand, I reframed hate-crime growth as the Hate Monster's growth speed: as reported incidents rise over time, the monster gets taller and harder to ignore. It supports understanding; it claims no measured outcomes.
obs.033 — a statistic becomes evidence when it enters the story.
HL 02B
Monster body as a pie-chart interaction
I mapped hate-crime categories and targeted groups onto the monster's body parts, then made a pie-chart interaction where each part represents a share of the monster. On hover, children can see what that body part stands for and how much of the monster it occupies.
obs.033b — categories become memorable when children can inspect them as parts of one character.
BEFORE HOVER — body parts as category shares
AFTER HOVER — explanation and percent copy
HL 03
A quiz that makes the lesson participatory
The quiz path turns the website from a reading experience into a learning activity — a role, a challenge, and a way to check understanding, extending the monster-and-hero metaphor into a checkpoint.
obs.034 — children remember what they got to decide.
ACT I — OBSERVE
TC 01:40
I treated the design problem as translation, not information access. The Carleton × CityStudio brief already had a serious civic purpose; my challenge was to help children, youth, and future generations meet that topic through pacing, metaphor, and evidence they could actually hold.
CAPSTONE Carleton × CityStudio Ottawa
AUDIENCE children · youth · future generations
PURPOSE public education · community safety
INSIGHT 01
NEXT GEN
Young audience first
Pacing, tone, navigation, and visual language had to support curiosity while still giving young audiences enough evidence to recognize the issue.
"Invite exploration before explanation."
INSIGHT 02
OTTAWA
A real civic context
CityStudio tied the project to hate-crime awareness and community safety in Ottawa — a public education purpose beyond a class exercise.
"This had to work outside the classroom."
INSIGHT 03
6 HANDS
One story, many contributors
Research, writing, illustration, navigation, implementation, quiz design, data viz, and exhibition materials — combined from multiple teammates.
"The site had to read as one voice."
SHOT 1A — the topic broken into recognition, protection, data, and quiz modules
ACT II — MAP
TC 02:40
I did not want to make hate-crime awareness feel like a slogan. I wanted the site to give children a role, then move step by step: meet the monster, recognize how it grows, see evidence visually, and test understanding through a quiz.
SHOOTING RULES — A CAREFUL FRAME, NOT A SLOGAN
RULE 01
Metaphor makes it approachable without erasing seriousness
RULE 02
Modular pages reduce cognitive load
RULE 03
Visual data turns statistics into story evidence
RULE 04
Quiz interaction reinforces learning through action
ACT III — RESOLVE
TC 03:40
FEATURE PRESENTATION — A PUBLIC WEBSITE, SHOWN IN PUBLIC
By the showcase, the idea had become two public pages: a CityStudio gateway for context, team, and purpose, and the child-facing quest site with themed pages, illustration, embedded data, and a quiz path.
GATEWAY CONTEXT
The CityStudio gateway frames the work as a public capstone: team, partner, showcase setting, and project purpose.
PROJECT BODY SITE
The child-facing site: themed pages, illustration, navigation, embedded data, and a quiz path for active exploration.
TEAM DELIVERY
A five-person core team plus one honorary member; my page describes my contribution without claiming sole ownership.
CAPSTONE EXHIBITION — FROM WEBSITE TO ROOM
The capstone was also exhibited in person. We brought the web experience into the room with stickers, postcards, a laptop demo, a large-screen walkthrough, and a visitor drawing board where people could draw their own monsters.
EXHIBIT 01 — team booth, QR codes, postcards, and live site demo
EXHIBIT 02 — participatory board for visitor monster drawings
EXHIBIT 03 — public walkthrough with the website on the room display
CREW CREDITS — MY ROLE ON SET
I focused on shaping the story concept, delivering the homepage, translating hate-crime data into visual evidence, coordinating production tasks, and supporting the public showcase.
CREDIT 01
Concept & coordination
Helped shape the child-friendly concept; created the timeline, allocated tasks, checked progress weekly, and supported communication with the professor and community partner.
CREDIT 02
Web & visual contribution
Created the homepage, uploaded and optimized website content, compressed and exported images in Photoshop, and contributed to the project's data visualizations.
CREDIT 03
Showcase support
Produced presentation slides and exhibition video materials; contributed to exhibition setup and on-site activity planning for the public showcase.
CREDIT 04
Promotional video production
Produced the promotional video as a short story trailer: script, copy, recording, editing, teammate script support, recording coordination, and audio mixing.
FINAL FRAME
TC 04:40
I can verify the delivery: a completed capstone website and a public showcase.
"For me, designing for children around serious topics means building a careful path into the issue: enough structure, metaphor, pacing, and evidence for young audiences to approach it safely — and still understand why it matters."
2 sites
gateway + child-facing quest, both public — the verified outcome, no invented metrics
Apr 10
public showcase with CityStudio Ottawa — slides, video, and on-site activities
Next Gen
children, youth, and future generations shaped the pacing, tone, and evidence design
EXPECTATIONS VS REALITY
delivered — a completed public capstone website and an offline showcase.
claimed — nothing we didn't verify: no usage, adoption, or learning metrics.
keep — treat the verified outcome as the outcome.
claimed — nothing we didn't verify: no usage, adoption, or learning metrics.
keep — treat the verified outcome as the outcome.
RESHOOT NOTES — WHAT I'D DO DIFFERENTLY
test — run structured sessions with children, parents, and educators.
measure — compare understanding and recall before and after the journey.
refine — keep the visuals engaging and legible without trivializing the seriousness of hate crime.
measure — compare understanding and recall before and after the journey.
refine — keep the visuals engaging and legible without trivializing the seriousness of hate crime.
CUT TO: SCENE 01 — FROM THE TOP
ArtFac — Designing trust in commission-based systems →
Opening problem: money between strangers is awkward.
