Indeflex Case Study · Mimi Newman

Client: Indeflex
Role: Senior UX Designer & Builder, embedded
Duration: July 2025 to present, ongoing retainer
Products: Partner portal, executive portal, merchant portal
Users: Sales partners, Indeflex executives, merchants
Scope: Research, UX, UI, design system, prototyping, production front-end code, design QA
Tools: Figma, Figma Make, Claude Code, Cursor, structured QA checklist
Outcome: Two portals shipped in production code. Merchant portal in development. Design system in the repo.

01 · Situation

A payments platform serving three audiences on one interface.

The unknowns

Three audiences, one surface. Partners, executives, and merchants with different jobs on the same platform.
No dedicated design investment. MVP worked, but the UI had grown organically with no system.
A new merchant portal to build from scratch against incumbents whose design is their marketing.
Payments means trust. Every inconsistency reads as a bug in a product that moves money.

The risk

Partner churn. Partners are the growth engine.
Executives flying blind when the dashboard buries the metric that matters.
Merchants land on a portal that looks less legitimate than Square and churn before the first transaction.
Every feature as a one-off, burning engineering time on patterns already solved.

02 · Task

Build the system before building the screens.

Embed in the stack, set the design system, blueprint three audience-tiered experiences, and ship in production code at WCAG AAA.

03 · Action

The strategic blueprint.

Pillar A

De-risking via UI audit and proxy pattern research.

Partner portal audit, turned into tickets

End-to-end UI audit turned into 16 prioritized tickets so engineering shipped the highest-impact fixes first.

Proxy patterns

What we needed	Precedent I studied	What I kept
Partner reporting	Shopify Partners, Stripe Connect, Toast for Restaurants	Metric-forward layout, inline search, drill-into-detail without full-page reloads.
Executive dashboards	Stripe Dashboard, Linear Insights, Looker	One number that matters per card, context under it, next action obvious.
Merchant portal	Square, Stripe, Toast	Consumer-grade polish, trust cues (PCI badge, money formatting, status).
Data tables	Linear, Retool, Stripe	Sortable columns, hover states, no column clipping, status chips with text + color.
Design system	Vercel Geist, Shopify Polaris, Stripe primitives	Tokens-first, components documented alongside the code, not a Figma island.

Pillar B

UX and system architecture.

One design system under three portals

Brand colors extended into tokens (color, type, spacing, status). Components built once, consumed by all three surfaces, documented in Figma and shipped as code.

A merchant portfolio partners actually scan

Filterable directory with searchable merchants, inline status chips, and the one number that matters per row (monthly sales + residual).

Merchant Portfolio page showing a searchable directory of 54 active merchants with filter chips (Non-Compliant, Underwriting, Activations, Advanced filters), a table with columns for Merchant DBA Name, Point of Contact, Merchant ID, Monthly Sales, Residual, Status, and Actions, and an Add Merchant button. — Merchant Portfolio. Filter chips above, status chips inline, the number that matters at a glance.

A merchant detail that holds a 360° view

Every merchant has seven tabs (Overview, Processing, Residuals, Documents, Support, Transactions, Notes) on one shell. Each tab holds its own system of chips, inline edits, and status cues.

1 of 6

Merchant detail Overview tab for Animal House Pet Styling. Contact information, PCI compliance panel with renewal date and Overdue status, financial summary ($767,211.71 processing, $3,406.42 lifetime residuals, 0.444% avg margin), equipment table, and transactions and notes previews below.

Transactions tab showing 5 records for Animal House Pet Styling. Credit and Charge rows with dates, type codes (TU True Up, LE Ledger), register action status chips (Pending, Executed), amounts, and description.

Residuals tab showing $3,406.42 lifetime, 12 active months, $283.87 average, $404.04 last month, and a Monthly residual statements table with 12 months (January 2026 back to February 2025) listing Merchant Processing, Transactions, Avg Ticket, Margin, and Residuals columns.

Notes tab for Animal House Pet Styling showing threaded notes and history entries with timestamps and author attribution.

Documents tab for Animal House Pet Styling listing attached contracts, voided checks, and underwriting documents with upload dates and file types.

Support tab for Animal House Pet Styling listing open and resolved support tickets, status chips, and assigned owners.

Overview. Contact, PCI compliance with explicit renewal date, financial summary, equipment, recent transactions, and notes, on one page.

Money, residuals, and formatting trust

Currency spacing and formatting standardized across every surface. One spec for separator, decimals, alignment, and zero-state. In payments, inconsistent numbers erode trust.

Money page showing pending payout ($17,748) and lifetime paid ($286,599.80) up top, a residual performance chart for 2025 ($176,823 earnings, +60.98% vs 2024) with earnings/volume/margin lines, and a monthly residual statements table listing December back to January 2025 with Residual Total, Processing Volume, Margin, and Merchants columns. — Money. Pending and lifetime up front, residual performance in one chart, every monthly statement a click away.

Compliance status people can trust

PCI icons now tied to actual status and paired with a text label (plus renewal date), so meaning never depends on color alone. WCAG AAA respected.

Learning that fits between client calls

In-portal courses, workshops, and live sessions, with progress tracked and recommended-for-you based on recent conversations.

Learning and Development page with KPIs for courses completed (8), learning streak (4 weeks), and time invested (6.5 hrs), a current course Close the Deal in Sales Mastery with progress bar and Resume course button, and recommended-for-you cards for Building merchant trust and Pricing conversations. — Learning and Development. Progress visible, next lesson ready to resume, recommended on recent sales conversations.

An executive view that leads with the metric that matters

Metric-forward cards, context under each, next action one click away. Executives land on the dashboard and know where to act.

A merchant portal built to compete

Designed to the polish bar of the leading small-business payment platforms. Currently in development.

Pillar C

Managing ambiguity and cross-functional alignment.

Three audiences, three jobs, one system

Audience	Primary job	How the surface serves them
Sales partner	Report, check on merchants, train, between client meetings	Partner portal: financial reports, merchant detail, sales training.
Indeflex executive	See company and partner performance at a glance	Executive portal: metric-forward dashboards, tables that scan.
Merchant	See payments, trust the platform, do business	Merchant portal: consumer-grade polish, trust cues, clear status.

Sequence by business risk, not by scope

Partner portal fixes shipped first because partner churn was the sharpest risk. Executive portal next. Merchant portal got the longest design runway without blocking the others.

AI-native build, shipped in the stack

Figma into Claude Code to production front-end code, reviewed against the design system and a structured QA checklist I wrote for the project. Engineers review branches, not design files.

Decide at 70 percent, revisit at 90

Weekly working sessions with product and engineering made trade-off calls together, in the room.

04 · Result

Scalable guardrails, not just screens.

Quantitative impact

3Audience-tiered portals (2 shipped, 1 in dev)

16Prioritized partner-portal audit tickets delivered

1Design system under all three surfaces

AAAWCAG baseline, every surface

0Figma handoffs. Engineers merge branches.

12+Months embedded, ongoing retainer

“Mimi fits right into our team and works faster than we can even build.” Justin Tanis · Indeflex

Scalable legacy

Design system. Dark Blue and Light Blue brand tokens, components, type scale, documented in Figma and shipped as code. Holds the next ten features without rework.

Status, money, and compliance conventions. One spec for currency formatting, PCI status, and status chips reused across every surface so the product reads consistently.

Partner, executive, and merchant portal patterns. Three audience-tiered templates on top of the same system, so adding a new audience is a template, not a redesign.

AI-native build workflow. Figma plus Claude Code plus structured QA checklist is now part of the team's velocity, not an experiment.

Brand surface

The Indeflex palette anchors on two brand colors used throughout the operator and merchant surfaces.

Dark Blue#005D95

Light Blue#68C9CD