Recursive Flora: Overthinking, Visualized
A digital experience designed to help users articulate and explore the often-invisible experience of overthinking. Community-contributed metaphors are transformed into generative “data flowers” that visualize emotional complexity in a way that is both intuitive and reflective.
The site combines a data visualization gallery with a digital zine reader, integrating emotional analytics with narrative context to support multiple modes of understanding and engagement.
Live Site
https://recursive-flora.vercel.app/
Overview
Objective
Turn intangible emotional patterns into an interactive, narrative experience that supports both curiosity and reflection.
About
This project began as a way for me to understand my own spirals of overthinking — and grew into a tool for others to articulate theirs.
I led everything from concept → data model → interaction design → front-end build (with lots of help from AI on the technical side!).
To explore the narrative and physical design side of the project (including a companion zine), see the full case study here:
https://www.christina-lu.com/work/recursiveflora/
Role
- UX Research
- Interaction & Visualization Design
- Data Modeling
- Prototyping
- Front-End Development
- Illustration
Tools & Technologies
- Figma
- GitHub + VS Code
- HTML / CSS / JavaScript
- Hugging Face ML API (TweetEval Emotion Model)
- ChatGPT & Claude (AI pair-programming for code generation + debugging)
- Adobe Creative Suite
Team & Timeline
Solo project
Duration: 6 months
Emotional Data Visualization
Each metaphor becomes a generative flower built from ML-based emotion analysis:
- 73 metaphor submissions from overthinkers
- 11 emotions → 11 petals
- Petal length = intensity (0–100%)
- Petal color = valence (positive / neutral / negative)
- Consistent petal orientation enables comparison
This system gives structure to subjective thoughts — allowing them to be visually compared.
Interaction & Navigation
Two exploration modes, for different mindsets:
- By Category (7 themes): Meaningful patterns + thematic focus
- Shuffle Mode: Casual, curiosity-driven browsing
Designed for smooth usage across desktop, tablet, and mobile.
Interaction Flow
| User Action | System Response | Experience Goal |
|---|
| Hover / Tap | Reveal metaphor text | Quick scanning + emotional resonance |
| Click again | Expand emotion breakdown | Reflection + deeper understanding |
Supports both quick browsers and deep readers, based on user testing insights.
Design & Development Process
Phase 1 — Metaphor Modeling & Emotion System
- Collected + affinity-mapped metaphors
- Applied TweetEval classifier to score emotional dimensions
- Refined geometry, spacing, and color rules for clarity + consistency
Phase 2 — UX/UI Design in Figma
- Lo-fi → hi-fi prototypes with interaction testing
- Component library + responsive motion guidelines
- Iterated to maintain calm, reflective tone
Phase 3 — AI-Augmented Development
First-time web developer — learning by asking AI to code, and then asking them questions about what they're building. This was way harder than I expected, by the way! Vibe-coding is not just vibes.
- Pair-programming with ChatGPT & Claude
- GitHub + VS Code workflow for deployment + versioning
- Implemented FLIP animations for smoother transitions
- Designed the system; AI accelerated execution
This was as much a skill-building journey as a product build!
Future Opportunities
- Create-your-own-flower feature
- Sharing + export functions
- More expressive motion transitions
- Accessibility enhancements (alt text, color-blind optimization)
Author
Created by Christina Lu
https://www.christina-lu.com/
