Recursive Flora
Making the experience of overthinking visible to those who live it, and legible to those who don’t
Objective
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.
role
User Research
Data Visualization, Content, and Interaction Design
Prototyping
Front-End Development
Illustration
tools
Figma
ChatGPT & Claude Code (Vibe-coding)
Adobe Creative Suite
HTML, CSS, Javascript
Hugging Face ML API
context
The more overthinkers explain, the less understood they feel
Overthinking is layered and emotionally charged, yet language often flattens it into “worry.” While many overthinkers seek support, repeated attempts to explain themselves can increase social friction over time (Nolen-Hoeksema & Davis, 1999). With 73% of young adults reporting overthinking (Arbor, 2003), this creates a painful paradox: the more they communicate, the less understood they feel.
research & insights
Starting without answers: what does overthinking actually feel like?
User interviews
Conducted six 1-hour interviews (ages 21–27) to deepen qualitative insight.
I began this project without a predefined solution. Instead of jumping straight to a product, I focused on understanding what overthinking actually feels like, combining academic research with primary user data to inform the design direction.
Insights from research that informed the overall design direction
Every experience is different
Design should avoid a single lens or “correct” narrative.
Overthinkers often feel misunderstood
Design should help users feel recognized through shared experiences.
Sharing requires emotional labour
Design should build on existing stories rather than demand new vulnerability.
design challenge
How might design make deeply individual experiences collectively understood by everyone, not just those living it?
Competitive Analysis
Why current solutions still leave overthinkers feeling misunderstood
Professional therapy
Clinically effective, but frequently inaccessible due to cost, availability, or stigma.
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.
solution
Recursive Flora: translating individual overthinking into a shared visual language
I translated user-submitted metaphors into a standardized visual system, making diverse emotional experiences both relatable and comparable — without requiring repeated disclosure.
The project lives across two formats: an interactive website that quantifies thought patterns through data, and a printed publication that contextualizes insights through narrative, illustration, and research. Using a garden metaphor, individual experiences become flowers within a shared system — reframing overthinking as something organic and cyclical rather than something inherently negative.
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 publication: 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.
impact
From personal insight to shared understanding
Recursive Flora reached over 7000 people organically and sparked meaningful conversations online and in person, affirming that emotionally grounded, visually clear design can help make complex experiences easier to share.
7000+ organic views and 70+ comments, shares, saves
Many people shared that the project helped them finally put their experience with overthinking into words:
Presented to 60+ designers, engineers, founders
I presented this project at Telos.Haus in New York, and it 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.
process summary
Web and print: one visual language, two ways to experience it
website process
Designing the garden: translating emotional data into an interactive web experience
Lo-fi prototyping & testing
I asked participants: “If you could visualize your overthinking, what imagery comes to mind?” I expected similar answers — instead, I got 73 wildly different metaphors, each carrying its own emotional weight.
To make sense of it all, I used affinity diagramming to group responses into themes. These themes guided the visual system and interaction design for the website, and informed a key spread in the publication.
Affinity diagramming metaphor themes - seeing how differently people described the same feeling was one of my favourite parts of the process!
Using machine learning to transform abstract metaphors into measurable data
The metaphors revealed rich emotional patterns, but they were still trapped in language. I wanted to translate individual experiences into something universally comparable, without flattening them.
I used machine learning to quantify each metaphor across 11 emotions, translating qualitative stories into structured data that could be explored and compared — without losing individual nuance. I chose theTweetEval Emotion Multilabel (Cardiff NLP) model over others because it handles modern, expressive language, making it a good fit for how participants naturally wrote.
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
Decision: 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
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. My Figma file was my handy reference to keep design and implementation aligned, and ChatGPT became a troubleshooter too. 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.
Three ways I collaborated with AI
Be explicit about intent
I shared screenshots, prototypes, and code to communicate visual goals clearly — which sped up implementation.
Ask it to explain what’s happening
When things broke, I asked the AI to describe the issue in plain terms. This helped me build technical vocabulary and debug more effectively.
Use it as a learning companion
For new interactions, I asked for guided implementation — which led me to techniques like FLIP animations that I wouldn’t have discovered on my own.
Making the overthinking garden accessible with ARIA labels and colour contrast
I 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 flower grid isn’t yet fully keyboard navigable. A future iteration would add full Tab/Enter support and semantic HTML patterns.
publication process
Building trust through print: a publication that balances emotion with data and research
Lo-fi prototyping and testing
I chose a publication 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 publication 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 publication 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 publication content and story flow
Full storyboard with notes, references, and detailed plan for hi-fi design
Hi-fi publication design
I designed the publication 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 publication 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
key takeaway
Designing for connection over cure: looking beyond conventional solutions
Through this project, I learned that some experiences 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. The solution emerged from making the invisible visible: quantifying emotion and translating it into a shared visual language that worked beyond words.
This reframed my approach to problem-solving: sometimes the goal isn't to change behaviour or drive action, but to design spaces that make it easier to reflect, connect, and feel understood.
what's next
What's next for Recursive Flora?
Quantitative metrics
Would love to evaluate the project’s impact more directly through user interviews and digital analytics, moving beyond anecdotal feedback from presentations and social media.
Accessibility improvements
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.
Multi-sensory garden features
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