Balance visualizations Gagan

Four different hero-card visualization approaches for the home screen. Each fully owns the upper pane of the hero card. From Gagan's Home screen prototype. The choice between them is a product decision — not a system decision. All four share the same data model.

R
P
K
Y
01 · Constellation
Orbital nodes
Nodes orbit "you" at center. Size maps to amount, distance to recency, color to direction — teal for money in, coral for money out. Dashed orbit rings. Nodes bob gently.
340×210 viewBox Teal / coral direction encoding Most expressive, most novel
Priya
+₹840
owes you
Rohan
₹2,400
you owe
06 · Postcards
Fanned stack
Each open balance is its own postcard with a colored stripe, amount, and name. Cards fan into a stack. Swipeable with dot indicators.
Swipe to browse balances Dot nav indicators Most tactile, most focused
you owe
₹2,400
you get back
₹840
NET −₹1,560
07 · Typographic
Pure type
No chart. Dominant number towers with odometer animation. Smaller "you owe" figure tucks under. Hairline rule separates the two. Mono NET summary.
Odometer animation on numbers Hairline rule divider Most minimal, most clean
Farzi Cafe · Aarav paid
−₹1,400
Rohan settled Goa trip
+₹600
Swiggy Biryani · You paid
₹640
3 open NET −₹1,560
08 · Feed (since)
Event feed
Shows what happened since you last opened the app. Colored dots per event, inline amounts. Hairline rule. NET + open count at bottom.
Colored dot per event type NET + open count footer Most informational

Comparison

Viz Data shown Interaction Personality
Constellation All balances at once View only Playful, spatial
Postcards One balance at a time Swipe to browse Tactile, focused
Typographic Aggregated owed/owe View only Minimal, clean
Feed Recent events + net View only Informational

Shared data model

All four visualizations accept the same props. The choice of viz is a product decision made at the composition layer — the data layer doesn't change.

// Shared props — passed to any viz variant
interface BalanceVizProps {
  items: BalanceItem[];    // one entry per person
  owed: number;           // total others owe you
  owe: number;            // total you owe others
  allSettled: boolean;    // triggers empty state
}

interface BalanceItem {
  name: string;
  initials: string;
  amount: number;          // positive = they owe you
  lastActivity: Date;
  color: string;            // avatar palette token
}

Empty state — all settled

All four variants handle allSettled: true with the same empty state: a teal ✓ glyph, "All settled up." title, and one line of quiet copy. No action button — there's nothing to do. The viz slot collapses to the empty state; the settle strip below remains present but shows no rows.

✓
All settled up.
Nothing to settle. Enjoy it while it lasts.

Notes

The choice between these four is a product decision, not a system decision. Each has real tradeoffs: Constellation is the most expressive but the hardest to implement reliably on small screens. Postcards is the most tactile but shows only one person at a time — risky for users with many open balances. Typographic is the most minimal and fastest to render. Feed is the most informational but ages poorly if the user has no recent activity.

None of these should animate on page load. The hero card appears before the visualization data is available — use a skeleton pane until data resolves, then fade in the chosen viz.

All four live in the upper pane of Hero card. They do not own the settle strip below the dashed divider.