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/