Branches

• 

  Grove Tab

• 

  Branch Details

• 

  Tend Actions

• 

  Tending Successfull

• 

  Insights Tab

• 

  Tend Tab

Inspiration

We started with a simple observation: the average person has 300+ contacts, Six messaging apps, and yet loneliness has never been more widespread. We weren't lacking tools for communication — we were lacking a way to "feel" the health of our relationships.

We were inspired by the concept of proprioception — the body's ability to sense its own position in space without looking. We asked: What if you had that same unconscious awareness for your relationships? What if you could "feel" when a friendship was quietly fading before it was too late to tend it? That question became Branches.

What it does

Branches is a relational awareness app that makes the invisible health of your relationships visible — turning unconscious signals into a living, growing ecosystem you can tend.

Every person in your life becomes a branch on your tree. The tree's health reflects your relational health:

• Recency — how long since a real conversation affects branch color
• Reciprocity — who reaches out more affects how branches lean
• Depth — a call vs. a like vs. a letter affects leaf density
• Rhythm — the app distinguishes natural dormancy from quiet drifting

Branches doesn't tell you what to do. It shows you what's true. The tending is yours.

Key features:

• 🌳 The Grove — a living tree visualization of your entire relationship ecosystem, glanceable and beautiful, with four branch states: Healthy, Fading, Bare, and Dormant
• 🌿 Tending— tiered micro-action suggestions ranked by effort: send a voice note, a quick text, or have the deeper conversation
• 📊 Insights — warm, prose-based weekly reflections on your relational patterns, including a Give & Take reciprocity visualization
• 👨‍👩‍👧 Add a Branch — add anyone from your life with a relationship type (Friend, Family, Colleague, Mentor, and more)
• ❄️ Dormancy — users can intentionally mark relationships as "in season," because some distance is healthy and the app knows the difference

How we built it

We built Branches entirely in Figma, using Figma Design for the full iOS prototype and Figma Make for interactive components.

Our process:

1. Started with the core metaphor — the tree — and worked outward, ensuring every design decision served the metaphor
2. Mapped the full user journey across a real use case: Tom, a close friend whose branch was quietly fading
3. Built a custom design system in Figma: organic botanical illustration style, a forest green and warm amber palette, Lora serif headings paired with Inter body text
4. Prototyped all five core flows: the Grove, Add a Branch, Branch Detail, Tending (voice note → text → call), and Insights
5. Designed the complete tending flow end-to-end — from noticing a fading branch to "Tom's branch is greener" with a falling leaves animation
6. Embedded the live prototype in Figma Slides for the final presentation

Challenges we ran into

Making data feel human, not clinical. Every tracker we looked at turns relationships into numbers and scores. We had to fight that instinct constantly. The breakthrough was committing to never showing a number on the main Grove screen — only visual, organic states.

Avoiding guilt mechanics. Early versions had streak-like features that felt punishing when broken. We scrapped them entirely. The app needed to feel like a gentle mirror, not a disappointed parent.

The dormancy problem. Not all distance is bad — some relationships are naturally cyclical. Building a system that could distinguish intentional seasons from quiet neglect required careful thinking about how we framed and visualized each state.

Designing the tending flow to feel native. We wanted tending actions to open real iOS interfaces — voice memos, iMessage, the phone dialer — so the action felt immediate and natural, not trapped inside the app.

Safeguards without friction. Privacy and consent needed to be genuinely prominent, not buried in settings. Designing privacy as a first-class consideration — not a footnote — was both a design and an ethical decision.

Accomplishments that we're proud of

• A core metaphor strong enough to carry the entire product without ever feeling forced
• A privacy model where we track only the user's own behavior — never other people's — which we believe is a meaningful ethical line
• The falling leaves animation on the "branch is greener" screen — a small moment of quiet delight that captures the entire emotional premise of the app
• A tending system that offers genuine agency without pressure, streaks, or gamification traps
• The Give & Take visualization in Insights — representing reciprocity as two bars rather than a percentage, keeping it human and non-clinical
• Designing for all relationship types: close friends, family, colleagues, mentors, and more

What we learned

Designing for something as delicate as human connection forced us to slow down in ways that productivity-focused design rarely does. Every interaction had emotional weight. A poorly chosen word in a notification could make someone feel guilty about a friendship they cherish. That responsibility shaped every decision we made.

We also learned that the best interface for emotional data is often not a dashboard. Prose, metaphor, and visual language communicate nuance that charts and scores simply can't.

Most importantly: the metaphor is the product. Every time we got lost in a design decision, returning to the question "what would a tree do?" gave us the answer.

What's next for Branches

• Wearable integration — ambient grove awareness on Apple Watch, so your relational health is always gently present without requiring you to open an app
• Relationship rituals — recurring prompts tied to meaningful moments (anniversaries, shared memories, seasonal check-ins)
• Family Grove — a shared tree for families requiring mutual consent from all members, creating ambient awareness without surveillance
• Longitudinal insights— watching your grove evolve over years, not just weeks, as a record of a life well-tended
• Therapist mode — a professional view for practitioners supporting clients working on social anxiety or isolation

Built With

• figma
• figmamake