← back to selected work resume →

Case study 05 · May 2023 — 48-hour take-home

Momence

One customer profile. Four businesses. Same four primitives, reshuffled.

Role
Sole designer · self-initiated case study
Timeline
May 2023 · 48 hours, brief to submission
Stack
Figma
Audience
Yoga / coaching / wellness admins

The brief

One screenshot. A wall of fields. Forty-eight hours.

This is the entire customer profile Momence already had — identity, money, behavior, and configuration, every field at the same flat weight. No hierarchy. No per-business flex. No mobile. The brief said redesign. The real problem was that nothing in here had a name.

The original Momence customer profile, un-annotated: a dense two-column screen. A left identity rail (avatar, contact, membership, store credit, documents, custom info fields, customer tags) sits beside active subscriptions, active packs, and a long recent-activity feed mixing check-ins, payments, and email threads — every region rendered at the same flat visual weight.

Decompose before you draw

Before I drew a single box, I named what was actually in the mess. The first artifact wasn't a layout — it was four nouns.

The same Momence profile, annotated. Four large color-coded labels overlay regions of the UI: 'Client Contact' on the left identity rail, 'Business-Specific' on the active subscriptions and active packs, 'User Interactions' on the recent-activity feed, and 'Flex / Custom Fields' on the bottom-left custom info area.
Four functional categories sit under every Momence profile: Client Contact (identity, comms), Business-Specific (financials, subscriptions, credits), Flex Fields (per-tenant custom config), and User Interactions (activity, messages, notes). Name them first, and everything downstream can reshuffle per business without losing coherence — or adding a single net-new component.
Decompose before you draw. The schema is the contract. The layout is the implementation.
0
functional categories in the schema
0
tenants, zero net-new components
0
form factors paired (web + mobile)
0 h
from brief to submission

You named the four. Watch what they buy you.

One customer — Yaz Kahrouf — dropped into a yoga studio, a B2B coaching practice, a pilates reformer, a wellness spa. The schema on the left never changes. Only which primitive gets to lead. It's already cycling — take it over.

SCHEMA — STAYS CONSTANT
  • Client Contact Identity, communication.
  • Business-Specific Financials, subscriptions, credits.
  • Flex Fields Per-tenant custom configuration.
  • User Interactions Activity, messages, notes.

Same four primitives. What changes per tenant is priority, density, and flex.

YK

Yaz Kahrouf

Joined Aug 2022 · attended today

Yoga studio · LoHi Studio · Denver

Sessions attended 44 ↗ +11%
Total spend $863 ↗ +17%
Subscriptions
  • Barre Fit Advanced · 1st renewal
  • Vinyasa Pro
Flex fields
  • Mat preference
  • Instructor pref
  • Injury notes
Tags
  • Yoga
  • Pilates
  • Core Series
  • Concession
Recent activity
  • · Check in · Gentle Vinyasa · 3h ago
  • · Payment · $37 · Feb Guest Pass · 2d
  • · Email · May Availability · 3d

The white card is the specimen; this cream-and-mono page is the lens on it. Same four primitives every time — yoga leads with sessions attended, coaching with hours and a contract value, pilates with reformer sessions, wellness with treatments. One profile, four businesses, zero net-new components.

The same four, rendered

Schema first, surfaces second. Web and mobile aren't two designs — they're the same four primitives re-prioritized for two readers. Nothing net-new; just a different lead for a different screen.

WEB · 1366px
The Momence web customer detail redesign. Left rail: Yaz Kahrouf identity, custom info fields, customer tags. Center: large KPI cards (Sessions Attended 44, Total Spend $863.65), Active Subscriptions chips, Available Credits, Email Subscriptions toggle. Center-right: a Recent Activity feed with category filters and date-sorted entries mixing check-ins, payments, and email threads. Right rail: collapsible Upcoming Events calendar, Documents, Automations, Attachments, Tickets.
Full width gives Business-Specific and User Interactions room to lead; a collapsible right rail keeps events, documents, automations, and tickets one click away. Same four categories, more breathing room.
MOBILE · 360px
The Momence mobile customer detail. Dark hero band with avatar 'YK' and 'Yaz Kahrouf', 'Joined Aug 2022 · Attended today.' Below: mobile/email fields, three tab buttons (Info, Activity, More). Two KPI cards: $863.65 Total Spend and 44 Sessions Attended. Active Subscriptions chip row, Tags chip row, Available Credits and Email Subscriptions rows. Bottom tab bar: Overview / Customers / Support / Settings.
360px. The same four primitives re-stack so the most time-sensitive one leads for an admin glancing between classes; collapsible flex menus keep density without losing thumb-reach.

One screenshot, two days, no users

The honest version — and why it's the argument, not the apology.

48 hours from brief to submission. One screenshot to work from. A written spec for a single yoga-studio admin. Not shipped. Every decision mine.

That used to read like a column of caveats. It's the opposite. The four-noun schema didn't come from a research budget or a quarter of iteration — it came from looking at the mess and naming what was in it. That's the part that travels to any data-dense admin redesign.

Structural insight doesn't need a marathon. It needs a model.
← back to selected work