Recursive Flora
Making the experience of overthinking visible to those who live it, and legible to those who don’t
Design an interactive visualization tool that makes overthinking legible - giving overthinkers a shared reference point to feel less alone, and non-overthinkers an accessible entry point to build empathy.
User Research
Interaction, Content, and Data Visualization Design
Prototyping
Front-End Development
Illustration
Figma
ChatGPT & Claude Code (Vibe-coding)
Adobe Creative Suite
HTML, CSS, Javascript
Hugging Face ML API
The more overthinkers communicate, the less understood they feel
Overthinking is often described as looping, layered, and emotionally charged - but language tends to flatten it into something that sounds like worry or complaint. Many people in my life struggle to express what overthinking truly feels like because they fear others won’t understand.
This isn't just personal: overthinking is widespread, affecting 73% of young adults ages 25-35 (Arbor, 2003). While overthinkers actively seek social support, they experience increasing social friction and decreasing understanding over time (Nolen-Hoeksema & Davis, 1999). Friends and family grow frustrated with their need to continuously process thoughts, creating a painful paradox: the more overthinkers try to communicate, the less understood they feel.
73%
of young adults ages 25-35
experience overthinking
The more overthinkers try to communicate, the less understood they feel
This isn't just about effort; it's about lacking a shared language. Non-overthinkers don't have a framework to understand what overthinking actually feels like, and overthinkers exhaust themselves trying to explain something that feels impossible to articulate.
I wanted to explore how design might bridge this communication gap.
What does overthinking actually feel like? 152 voices and the psychology backing them up
User interviews
Held six one-hour interviews with participants aged 21–27 (4 women, 2 men), reflecting the survey’s demographic skew.
Insights from research that informed the overall design direction
Each account of overthinking is different
This means: the design cannot use a single lens or overgeneralize one experience as the “right” one.
Overthinkers often feel misunderstood and alone
This means: the design should help them feel recognized and show that others genuinely understand this experience.
Sharing overthinking requires emotional labour
This means: the design should build on existing stories rather than demand new vulnerability, and create a shareable reference point.
How might design create a shared framework for understanding overthinking; one that helps non-overthinkers build empathy and helps overthinkers feel less alone, without demanding additional vulnerability?
Why current solutions still leave overthinkers feeling misunderstood
Professional therapy
Evidence-based and clinically effective for addressing overthinking.
Problem: Effective but often inaccessible - financially or socially stigmatized.
Current solutions either demand direct disclosure (which exhausts overthinkers) or offer only validation without deeper understanding. Overthinkers want to feel seen and connected, not fixed or temporarily reassured.
This gap pointed to a different approach: a shared reference point that both groups could explore independently - understanding overthinking without requiring disclosure, building connection instead of validation, and remaining accessible beyond clinical settings.
Recursive Flora: translating individual overthinking into a shared visual language
A digital-physical ecosystem that translates individual overthinking experiences into a shared visual language - creating a reference point that both overthinkers and non-overthinkers can explore without repeated explanations.
The solution uses the metaphor of an 'overthinking garden' as its core visual language. Flowers visualize individual experiences; no two are exactly alike. The garden reframes overthinking as something organic that grows and cycles through seasons, rather than a problem to fix. This metaphor runs through both the interactive website and the printed zine.
Interactive website: a garden of quantified thought patterns
Explore different thematic categories of overthinking
Seven thematic categories allow focused exploration, while a shuffle mode supports casual discovery.
Overthinkers can use categories to find patterns and reflect on their experiences, while non-overthinkers can browse and build empathy.
See metaphor breakdown by emotion
Translates 70+ user-submitted metaphors into generative “data flowers,” each mapped to 11 emotions using a Hugging Face model (TweetEval).
Each flower visualizes emotion through petal length (intensity, 0–100%) and colour (positive/neutral/negative).
Fixed petal positions allow quick comparison between metaphors, helping quantify the emotional experience of overthinking for those who might not grasp it intuitively.
Responsive to different screen widths
The responsive design adapts seamlessly across desktop, tablet, and mobile.
Editorial zine: recognition for some, education for others
Visualizations that bridge data and art
Merges illustration and data visualization to turn patterns of overthinking into expressive visual metaphors.
Uses a cohesive graphic language to humanize data and show shared emotional experiences.
Helps readers recognize they’re not alone and understand overthinking through both logic and feeling.
Narrative flow balancing research and emotion
Alternates dense analytical spreads with open, expressive layouts to mirror the rhythm of overthinking.
Combines academic analysis with illustration and personal storytelling to engage both emotional and logical perspectives.
One visual language, two ways to experience it: web and print
Designing the garden: translating emotional data into an interactive web experience
Lo-fi prototyping & testing
In the survey, I received 73 metaphors responding to the prompt: “If you could visualize your overthinking, what imagery or metaphors come to mind?” I initially expected similar responses, but the results revealed surprising variety and emotional depth, showing how differently people experience overthinking.
To organize the data into digestible themes that users could easily explore, I used affinity diagramming. Grouping the metaphor text made it easier to spot patterns, find related content, and understand the distribution across thematic categories. These themes guided the visual system and interaction design for the website, and informed a key spread in the zine.
Affinity diagramming metaphor themes
Using machine learning to transform abstract metaphors into measurable data
The metaphors convey qualitative feelings, but not everyone interprets abstract language the same way. So I decided to explore quantifying qualitative text: splitting each metaphor into basic emotions that anyone - even non-overthinkers and people with lower language literacy - could understand. Plus, this quantification opened up the possibility of data visualization, which makes different metaphor entries more comparable across the board, normalizing them across the same metrics to analyze.
I used theTweetEval Emotion Multilabel (Cardiff NLP) model to analyze each metaphor across 11 emotions, including fear, joy, and anticipation. I selected this model because it:
handles informal, creative, and conversational language,
detects multiple emotions simultaneously,
is grounded in a validated emotion framework, and
interprets modern, internet-style expression - aligning with how participants wrote their metaphors.
Analyzing metaphors’ emotional composition using the Cardiff NLP emotion model
Sketching with data: which visual language would make emotion legible?
Building on the garden metaphor established earlier, I sketched multiple variations of the metaphor flower to explore how line, shape, and placement could express emotion while remaining legible.
Rough ideas for metaphor data visualization
I decided to use petal length as emotional intensity
Why? This design makes it easy to see the magnitude of emotions and compare them across flowers. The tradeoff is that some flowers may appear visually uneven, but clarity and interpretability were prioritized over aesthetic symmetry.
Lo-fi prototypes and user feedback: users wanted a garden, not a grid
The sketches were translated into low-fidelity digital prototypes, and tested to see how the visual language behaved in an interactive format.
Lo-fi prototypes tested for ease of navigation and overall 'joy factor'
Decision: home page
Why? 4/5 users tested preferred this layout because it felt more lively and organic - like a garden of diverse flowers - while other lo-fi options felt boxed into grids. Functionally, it also made it easier to see how many metaphors belonged to each category.
Decision: category page
Why? 5/5 users preferred this layout for its clear link between metaphor text and visual form. Other lo-fi options felt too disconnected or required excessive scrolling to view everything.
Hi-fi prototyping in Figma
Although I planned to implement this design in code, creating and prototyping the design in Figma first allowed me to clearly envision, and later communicate, how it should look to Claude Code and ChatGPT, the AI coding platforms I chose.
Desktop hi-fi design and prototyping blueprint
Mobile hi-fi design and prototyping blueprint
Component library for desktop and mobile prototypes
Implementing and coding with AI
I began by creating a Product Requirements Document (PRD) to guide the build and communicated with Claude Code through the VS Code integration. I organized files into HTML, CSS, and JS folders and followed both the PRD and Figma specifications closely to maintain consistency between design and implementation.
My VSCode environment with working HTML, JS, and CSS files
Three strategies that made AI collaboration work
Describe the requirements in detail
I combined language, images, and code files to communicate my intent as precisely as possible. The working prototype helped me point to examples instead of explaining abstractly.
E.g. I shared three Figma screenshots with ChatGPT and asked it to make inactive flower sections fade into the background using a specified colour and opacity. Being explicit about the visual goal and design intent helped speed up the coding process.
Ask for guided implementation advice
When I wanted to add new interactions but didn’t know how, I used AI as a learning companion.
E.g. I asked how to make the flower animations transition smoothly between pages - which led me to discover FLIP animations, a technique I hadn’t known existed.
The process taught me how crucial clear communication is when coding with AI — and how to troubleshoot creatively when things don’t go as planned.
Making the overthinking garden accessible with ARIA labels and colour contrast
Added ARIA labels for interactive controls (PDF navigation, mobile menu, and info tooltips) and improved colour contrast to meet WCAG AA standards using the WAVE web accessibility tool. All modal content - emotions, valence, intensity, and metaphor descriptions - is available as accessible text for screen readers.
The main flower metaphor grid is not yet fully keyboard-operable, as the interactive flowers can’t be navigated with Tab/Enter. A future iteration would add complete keyboard support and ensure all interactive components follow semantic HTML patterns.
Building trust through print: a zine that balances emotion with data and research
Lo-fi prototyping and testing
I chose a zine as the second medium because it's informal and approachable: less intimidating than a textbook for someone curious about overthinking. But I also needed to build trust, so I grounded the narrative in published research, interview and survey data, and a cohesive visual system. A balance between visual accessibility and analytical credibility helps make the content both engaging and trustworthy.
I mapped early zine concepts in FigJam, storyboarding how the narrative would unfold while mirroring the "overthinking garden" motif - from the first spark of a thought to its recursive cycle. Early user feedback helped refine the pacing and flow before I moved into visual design.
First zine layout draft shared with users for testing and iteration
I then gathered visual references to define the tone and rhythm of each spread, aligning survey insights with key emotional themes. By planning which sections should feel dense or minimal, I could guide the reader’s pace: balancing information with breathing space and maintaining a rhythm that reflects the mental cadence of overthinking.
Legend of notes used to organize and plan zine content and story flow
Full storyboard with notes, references, and detailed plan for hi-fi design
Hi-fi zine design
I designed the zine in Adobe InDesign, using a grid system to align text and imagery. The layout includes citations, research explanations, and narrative content, balancing structure with visual rhythm.
I iteratively refined the spread aesthetic based on feedback, focusing on improving cohesion, pacing, and graphic polish to create a reading experience that felt both analytical and expressive.
Demonstrating grid alignment on InDesign
When 'textbook-like' data needed to become hand-drawn art
I asked a few users to read the zine and share feedback on tone and presentation. While they felt the balance of content worked well and the visuals were expressive, the data visualizations came across as too static and technical. Non-overthinkers described it as “textbook-like,” creating a sense of duty to learn rather than curiosity to explore. Overthinkers, while engaged by the insights, didn’t connect with the visual style.
The main change was to rework these data visuals into standalone art pieces - illustrated by hand or redesigned with vector forms that better reflected the organic “overthinking garden” motif and invited emotional discovery rather than analytical reading.
Before example
After example
Spread of data visualizations post-feedback
Bringing emotional design from personal insights to public dialogue
The response to Recursive Flora was deeply affirming. Online, people shared how the zine helped them feel seen or express overthinking in new ways. In person, presenting at Telos Haus opened conversations with designers and engineers who connected the project to their own thought patterns.
These reactions confirmed what I hoped to explore - that design, when emotionally grounded and visually clear, can make complex mental experiences feel relatable and worth discussing
Reception online
Without any paid promotion, the project still found its way to over 6,000 people and sparked more than 70 thoughtful comments, shares, and saves - far more than I usually see on my personal posts. What meant the most, though, was how many people said it helped them finally put their experience with overthinking into words.
Some comments include:
Presented to 60+ designers, engineers, and start-up founders
I presented this project at Telos.Haus in New York, and it really meant a lot when people came up afterward to say it reflected their own thought patterns and even helped them understand friends they’d never quite “gotten” before.
Telos.Haus is a creative studio that hosts community events for artists and designers. The event was organized with the Design Engineering Club, a group that connects creative practice with technical experimentation.
Not everything needs fixing: designing for connection over cure
Sometimes a problem doesn’t need a traditional product solution
My first instinct is to solve problems: to uncover what’s wrong and fix it. But through this project, I learned that some experiences, like overthinking, call for a different kind of design response. Many wished they could “turn off” their thoughts, yet recognized that overthinking is part of how they process the world. What they really needed was not a cure, but understanding and connection.
This project reframed my approach to problem-solving: sometimes the goal isn’t to eliminate a behaviour or make someone do an action, but to design spaces that make it easier to reflect, connect, and feel understood.
Full keyboard navigation, user contributions, and multi-sensory exploration
I plan to expand the research to include a broader range of demographics and to deepen the project’s accessibility. The current version meets baseline accessibility standards for contrast and ARIA labeling, but I want to explore more inclusive patterns, edge cases, and assistive-tech testing. I also hope to evaluate the project’s impact more directly through user interviews and digital analytics, moving beyond anecdotal feedback from presentations and social media.
Looking ahead, I hope to revisit several conceptual features to create a richer, multi-sensory “garden”:
DIY Flower Builder → users contribute metaphors (requires moderation + privacy design)
Bouquet Creator → shareable collections
Haptics / Audio Flourishes → engaging beyond the visual sense