Context
Momence is a B2B SaaS platform serving fitness studios, yoga instructors, and small businesses managing customer relationships, scheduling, and payments. Their existing customer profile interface was dense but undifferentiated, mixing identity data, financial metrics, behavioral history, and configuration into a single flat surface.
This case study redesigns the customer profile view as a component-driven schema that separates concerns, surfaces the right data at the right altitude, and scales across web and mobile.
The Problem
Audit of the live product surfaced three structural issues:
- Flat hierarchy. Identity, finance, behavior, and admin configuration shared the same visual weight.
- Static layout. Customers couldn't be tailored by business type. A yoga studio surfaces different priorities than a B2B coaching practice.
- Mobile parity gap. Dense desktop layout had no mobile-considered counterpart.
The Approach
I decomposed the existing UI into four functional categories:
- Client Contact. Identity, communication.
- Business-Specific. Financial metrics, subscriptions, credits.
- Flex / Custom Fields. Per-tenant configuration.
- User Interactions. Activity feed, communication history.
This component schema became the foundation for the redesign, with primitives sized for direct engineering implementation.
The Solution
Web. A customer detail page built on infinite, draggable modules. Primary KPIs (sessions attended, total spend) get prominent space with trend indicators (+11% last 3 months, +17% last month). A unified Recent Activity feed integrates messages, payments, class check-ins, and email threads with custom macro icons distinguishing activity type. Right rail surfaces upcoming events, documents, automations, and tickets, each collapsible.
Mobile. Collapsible flex menus preserve information density without sacrificing usability. Status indicators and a calendar surface time-sensitive context first.
Design Principles Applied
- Modularity. Every block is a swappable module, not a hard-coded layout.
- Density without noise. KPI cards lead, supporting context follows.
- Consistency at scale. Same schema works across customer types, business verticals, and device sizes.
- Trend over snapshot. Financial metrics show direction, not just current state.
Reflections
Decomposing the UI into four functional categories before any layout work is the move I'd repeat on any data-dense admin redesign. Categorization first ensures subsequent layout decisions inherit semantic structure rather than ad-hoc grouping. Without it, "drag to rearrange" becomes drag-to-rearrange chaos rather than a customer-tailoring feature.
The other repeatable pattern: trend indicators on KPI cards. A snapshot KPI is data. A snapshot KPI with direction (+11% last 3 months) is product. Trends move users from "read the number" to "act on the movement," which is where data-dense admin tools earn their keep.
Notes
Self-initiated case study to demonstrate UX/UI capability for data-dense admin interfaces, not shipped client work. All design decisions are mine.
