Objective
To translate emotional complexity into interactive visuals and narrative – giving overthinkers tools to recognize and articulate their experience, while inviting non-overthinkers to engage through curiosity rather than obligation.
Role
User Research
Interaction, Content, and Data Visualization Design
Prototyping
Front-End Development
Illustration
Tools
Figma
ChatGPT & Claude Code (Vibe-coding)
Adobe Creative Suite
HTML, CSS, Javascript
Hugging Face ML API
Design Challenge
Overthinking is often described as looping, layered, and emotionally charged — but language flattens it into something that sounds like complaining or anxiety.
In a survey of 152 self-selected participants, 97% identified as overthinkers, revealing a fundamental mismatch: the people most willing to understand this experience already live it.
Interviews showed that overthinkers crave understanding not only from peers but from those who don’t overthink — yet that second group rarely engages. So the real gap isn’t emotional expression; it’s empathic participation.
Overthinkers are building empathy infrastructure for each other, while the people whose understanding they most need aren’t showing up.
How might we create a shared artifact that works for both — validating overthinkers’ internal experience while making it compelling enough that non-overthinkers choose to look?
The Solution: A Two-Part System for Shared Understanding
Editorial Zine: Framing the Experience
Dual Narrative Voice
Combines first-person storytelling with academic analysis to make overthinking both relatable and credible. The alternating voices help non-overthinkers feel the experience while validating it through research for overthinkers seeking understanding.
Visualized Emotion
Data visualizations merge illustration and analysis, turning quantitative insights into expressive visual metaphors. This approach humanizes the data, bridging feeling and fact in a cohesive graphic language.
Narrative Structure
Organized around the “overthinking garden” — a cyclical story of growth, overwhelm, and renewal. Pacing alternates between dense and minimal spreads to mirror mental fluctuation and sustain engagement across 50+ pages.
Interactive Website: Extending the Research
Emotional Data Visualization
Translates over 70 user metaphors into generative data flowers, each mapped to 11 emotions using a Hugging Face ML model (TweetEval). Each emotion becomes a petal - length shows intensity (0-100%), color shows valence (positive/negative/neutral). Fixed petal positions let users compare flowers at a glance.
Dual Navigation Model
Seven thematic categories allow focused exploration, while a shuffle feature supports casual discovery. Overthinkers can use categories to find patterns; non-overthinkers can browse casually. The interface adapts to different device sizes, including desktop, tablet, and mobile.
Layered Interaction
Hover/tap reveals metaphors for quick scanning; click/tapping a second time opens detailed emotion data for reflection. This layered flow supports different engagement styles—casual curiosity or focused analysis—without breaking immersion.
Research
Mixed Methods Approach
Academic Literature Review
Reviewed research on overthinking, rumination, and worry to connect psychological theory with survey findings and guide the artifact’s design.
Survey
Ran a 152-participant survey (97% self-identified overthinkers, 3% non-overthinkers) recruited via social media and Reddit, with no compensation.
User Interviews
Held six one-hour interviews with participants aged 21–27 (4 women, 2 men), reflecting the survey’s demographic skew.
Data Analysis
Analyzed survey data using 30+ statistical tests to uncover user patterns, and conducted competitive analysis of existing tools to identify market gaps.
Market Analysis
Current Solutions
Mood Trackers
Quantify emotions but lack narrative context needed for non-overthinkers to understand why this person might feel that way.
Therapy Apps
Focus on meditation/CBT techniques, which helps overthinkers, yet does not connect the bridge between an overthinker and a non-overthinker.
Beyond digital solutions, there are also real-world options. These include support communities, which can foster connection but sometimes turn into echo chambers for overthinkers. Stories and media can provide emotional validation, yet they’re not easily searchable or tailored to this specific need. Therapy remains one of the most effective approaches, but based on research, my survey, and user interviews, many people—though aware of its benefits—still choose not to pursue it.
Gap in Market
No tools effectively bridge overthinkers and non-overthinkers through shared understanding.
Existing solutions either:
Require professional guidance
Focus on "fixing" rather than understanding
Fail to engage non-overthinkers
Top 4 Insights Shaping Design Decisions
It's hard to talk about overthinking.
Visual metaphors bypass verbal barriers.
→
Transform 73 collected metaphors into a systematic visual language for easy comparison.
97% of participants were overthinkers.
Non-overthinkers won't seek out resources to "understand overthinking" but they might engage with something beautiful or curious.
→
Design as exploratory media that attracts through curiosity or beauty, not stated purpose.
Overthinking feels personal but socially risky.
People fear dismissal when sharing, especially around triggering topics.
→
Anonymized metaphors, stories, and real-life accounts let users explore and share without self-exposure.
Advice often backfires.
Overthinkers look for understanding before solutions, trusting what feels personally true even when it isn’t the healthiest choice.
→
Build for reflection and pattern recognition, not prescription.
Design Process: Zine
Translating Research into Visual Form
Phase 1: Research & Planning
First Draft
Explored narrative structures through annotated sketches and story flows.
Second Pass
Digitized handwritten concepts for user testing and faster iteration.
Page Planning
Recorded visual inspiration, and designed spreads through typography, layout, illustration, and data—layering sketches, references, and colour-coded notes to balance exploration with structure.
Planning Data Visualizations
For each data visualization spread, I explored different ways I could visually represent this information. The particular challenge with this project is that the visualization had to be clear, yet evoke the theme of an "overthinking garden" - not too clinical or purely for quick insights.
Phase 2: Designing & Iterating with Users
Combined data visualizations with writing and custom illustrations. User feedback: "Feels partially like an elementary school textbook, and partially like a graphic design pamphlet." Technically sound but lacked cohesive visual voice. So I iterated. At the same time, I was creating and rendering the illustrations.
Illustration Rendering
Polished drawings for a softer, more expressive feel.
Before
After
Data Visualization Improvements
Redesigned confusing graph into a flower-inspired visual with clearer legend.
Before
After
Softened rigid visuals using gradients and expanded the layout for breathing room.
Before
After
Transformed simple lines into an expressive hand-drawn spread.
Before
After
Phase 3: Professional Critique & Refinement
I consulted my Pratt Institute professor during refinement since she had extensive zine creation experience and worked in editorial design for many years (thank you Prof. Nancy!). The micro-details didn't match the macro vision. Citations cluttered the margins. My typography played it too safe—still too textbook-y.
After I applied her feedback, the text became easier to read and felt more polished.
Layout Refinements
Improved readability: removed text margins, clarified highlight font, added subtle illustrations.
Before
After
Added texture and improved readability with more consistent letter spacing.
Before
After
Increased typographic impact based on feedback—larger title text and staggered layout for case examples.
Before
After
Design Process: Website
Bridging Design and Code with AI Tools
Phase 1: Technical Planning
Planning out the Metaphor Visualization
In the survey, I received 73 metaphors responding to “If you could visualize your overthinking, what imagery or metaphors come to mind?” This would be the main function of the website.
Using affinity diagramming, I sorted these metaphors into thematic categories.
Then, I used the TweetEval Emotion Multilabel (Cardiff NLP) model to analyze each metaphor across 11 emotions, including fear, joy, and anticipation. This model was selected because it:
Handles informal, creative, or social language
Detects multiple emotions simultaneously
Is based on a psychologically grounded emotion framework
Recognizes modern, internet-style expression (matching the writing style of my participants)
Sketched early emotion visualizations—testing petal dimensions, color, and layout variations.
Final design: a sectioned flower with fixed emotion zones and colour-filled dominant emotions. Once I finalized the zine layout, I was ready to adapt the flower visualization for the web experience!
Creating a PRD with AI Tools
Since this was my first time coding a website, I wanted to have a good understanding of what I needed to build, what pages I would make, and the logical implementation of the flower metaphor visualization.
This process is more iterative than I expected! I revised the PRD 60+ times.
After refining the scope, I cut extra features like “create your own flower" (with user input) and “share flower.” The MVP focused on sharing user metaphors to connect insights and validate experiences. It also gave non-overthinkers both the metaphor itself to learn from and the data behind it to deepen understanding.
Phase 2: Design in Figma
Lo-fi Designs
Using the mock-ups I made on Illustrator, I explored lo-fi layouts with the assets I had already made. Chosen layouts are outlined with thick black pen.
Category Page
Users preferred the chosen layout because it created a clearer connection between the metaphor and the image. In the other options, the meaning was harder to grasp since the text and image were separated, forcing users to look in two different places to understand the full concept.
Modal Page
Users felt that the chosen modal layout was the most expressive and aligned best with the zine’s visual theme. The alternative designs, with their boxy shapes, appeared too rigid and didn’t capture the organic tone of the project.
Home Page
Users found most layouts easy to understand, but I chose this one for its organic, garden-like composition. The others felt too stiff and geometric for the aesthetic I was aiming for.
Mobile Considerations
I adapted the desktop design for mobile by simplifying the layout and reducing visual load. With a smaller screen and limited performance, the home page had to stay clean and lightweight.
Hi-fi Prototypes
Although I planned to implement this design in code, I wanted the prototype to resemble the final product as closely as possible. This allowed me to clearly envision—and later communicate—how it should look to Claude Code. For this project, I aimed to maintain full creative control, using AI as an enabler and coding advisor rather than as the designer itself.
So I did what we all do…
Design + Prototyping Blueprint - Desktop
Design + Prototyping Blueprint - Mobile
Component Library
Phase 3: Coding with AI
This is where things started to feel intimidating. I come from a background in SQL, Excel, and R — but I’d never written a line of HTML or CSS. I was basically an infant coder.
Luckily, I had vibe-coding to lean on: using AI to help write and debug code. But is vibe-coding really as easy as it looked? (Spoiler: no, it wasn't!!)
Translating Designs to Verbal Specs
Starting out, I had three things to learn:
GitHub,
file setup, and
how to talk to Claude Code through VS Code.
My PRD turned out to be really useful here. On day one, everything seemed to be going great!
I slowly chipped away at the project, collaborating with Claude Code to bring my design to life. However, I soon ran into a major limitation of working directly with Claude Code inside my coding environment—it couldn’t read images. When I tried to fix the home page layout, I realized how hard it was to describe visual changes with only words. For example…
Output to Fix
Desired Outcome
Using the Right AI Model
New Workflow: Adding ChatGPT
When I was working on the flower modal, the petals were meant to grow outward from the centre and align with the background grid. Instead, they kept appearing off-center and uneven in scale. Explaining these visual issues to Claude Code through VS Code was difficult since there’s no way to attach images in the prompting window. I switched to ChatGPT, where I could share files, screenshots, and talk through what I was seeing.
n-th Prompt with ChatGPT: Fix Their Mistake
Fixing one issue often led to another, and I found myself prompting my way through each step. Eventually, I reached the final version I wanted. Moving between ChatGPT, Claude, and my own notes taught me how to communicate code logic more clearly, even without writing it myself.
Debug, Debug, Debug
I used Claude Code to make updates in my repo, but since its credits refreshed every few hours, I couldn’t prompt continuously. For more complex issues, I turned to ChatGPT, which let me work without those limits. Over time, I learned how to explain what wasn’t working and guide the AI toward a fix.
Strategy 1: Describe the Requirements
I tried to be as clear as possible, combining language, images, and code files. The working prototype I made helped me point to what I meant instead of trying to describe it abstractly.
Strategy 2: Try to Understand the Problem
When I wasn’t sure what was wrong, I asked the AI to describe the issue back to me. Without a coding background, I often lacked the right technical terms. Letting the model explain it gave me the vocabulary to ask better questions.
Strategy 3: Ask for Implementation Advice
Sometimes I wanted to add something new but didn’t know how to code it. For example, I asked how to make the flower animations move more smoothly between pages. That’s when I learned about FLIP animations — something I didn’t even know existed, since I’d never done coded motion design before.
In the end, almost everything I did was a form of debugging: rephrasing, clarifying, and testing ideas through conversation. This process showed me how valuable clear communication is in coding, and it’s helping me slowly build a deeper technical understanding.
Key Takeaways
Restraint creates clarity
Cut nonessential web features from the MVP, simplified data visualizations, and focused the zine on only the most meaningful research insights. The result is a curated, spacious product with room to breathe.
Empathy gaps are solved by design, not detail
Non-overthinkers may not lack facts, they lack experiential understanding. Data visualization + metaphor + narrative bypassed intellectual resistance better than explanations alone. Right format matters as much as right content.
"Vibe-coding" isn't just vibes
270 commits in 5 weeks from a girl with zero coding experience. It was a loop of explaining, asking, debugging, and revising—over and over. AI assisted, but every fix took effort and iteration.
Sharing the Work
Presented at Telos.Haus, Brooklyn NY (with Design Engineering Club)
This was my first time sharing the project publicly — and the room was full, about 60 people! I was both nervous and thrilled to launch it in New York, and genuinely touched when several attendees reached out afterward to talk about the concept, illustrations, and themes behind it.
Telos.Haus is a creative studio that hosts community events for artists and designers. The demo night was organized with the Design Engineering Club, a group that connects creative practice with technical experimentation.
Next Steps
Pursue Print Publication Opportunities
I’m exploring risograph printing and digital printing services in New York, and I’d also love to collaborate with a small publisher. If you know someone who might be interested — let me know!
Track & Measure Impact
Now that the project is live, I want to understand if it's actually working as intended:
Set up analytics to understand how people actually use the site (which categories resonate, time spent, drop-off points)
Collect post-interaction feedback: Does this actually help people feel understood? Can non-overthinkers articulate overthinking better after exploring?
Define success metrics beyond "people liked it"
Improve Digital Accessibility
As I learn more about coding and accessibility — visual, screen reader, and otherwise — I want to make the experience more inclusive. Making something truly accessible can't rely on "vibe-coding" alone—it requires technical rigour:
Deepen semantic HTML and ARIA label implementation for screen readers
Test with assistive technologies to identify barriers
Improve keyboard navigation and focus states
Test with Diverse Users
My initial research skewed heavily toward one demographic, and I want to validate the design works more broadly:
4/6 interviewees were women aged 21-27, and most survey respondents were women too. Expand testing to different demographics, cultural backgrounds, neurodivergent populations
Validate whether the visual language and metaphors work cross-culturally
Understand if different groups have different needs from this tool
Add Digital Website Features
Now that the MVP is complete, I'd love to revisit some of the social and interactive ideas I set aside, along with immersive enhancements:
DIY Flower Builder: Users input metaphors → AI generates personal emotion flower
If launched: content moderation, data privacy infrastructure, API considerations
Bouquet Creator: Curate and share collections of meaningful flowers
Multi-sensory: Add sound/haptic feedback for a richer, multi-sensory experience