Project Brief & Our Approach
Every section of the Product Brief, addressed with our design rationale and linked to live prototype screens.
Laundromat Growth Intelligence Platform -- Product Designer Brief
Confidential | February 2026
This document module contains the full project brief with 16 sections. Each section shows the original brief requirement, our design approach, and a link to the live prototype screen. All sections have been addressed.
Information Architecture Recommendation
Evaluate the preliminary ~10-screen list, propose the right product structure, and explain our rationale.
We evaluated the 10-screen list and organized it into four navigation groups: Overview (Portfolio + Store), Analytics (Marketing, Segments, Customer Detail, Search), Performance (Goals, Referrals), and System (Documents, Settings). Rationale: operators think in terms of 'how is the business?' then 'why?', then 'what do I do about it?' -- our IA mirrors that mental model. We kept Marketing Attribution as its own top-level view rather than nesting it under individual stores because operators evaluate ad spend at the portfolio level. We added Customer Search as a standalone screen because identity resolution across fragmented card systems is your core differentiator and deserves prominent placement.
Wireframes for Key Flows
Wireframes for key flows before high-fidelity work begins.
Instead of static wireframes, we delivered a fully interactive prototype with real navigation, filtering, chart rendering, and drill-down interactions. Every flow is navigable: Portfolio overview > drill into store > view customer segments > search for a specific customer > view their unified profile. Marketing Attribution includes expandable campaign drill-down. Goal tracking shows monthly progress with event overlays. This lets you demo actual product behavior to PE firms rather than static mockups.
Interactive Prototype + Design System
Fully clickable, navigable, polished enough to demo to PE firms and strategic partners. Color palette, typography, spacing, and a reusable component library (no brand kit exists).
The prototype is a production-grade Next.js application you can share as a URL with demo audiences. Design system created from scratch: Primary Blue (#0066ff), Success Green (#10b981), Warning Amber (#f59e0b), Problem Red (#ef4444), dark navy sidebar (#0f1729), light content area (#f8f9fb). Typography: Inter for all text, monospace for numeric data. Reusable component library: KPICard, StatusBadge, AppShell, chart patterns, info banners. All implemented as CSS custom properties and React components, ready for production handoff.
Mobile-Optimized Customer Referral Screen
One mobile-optimized screen for the customer-facing referral program.
Built as a standalone page (/referrals/customer) outside the operator dashboard. Large touch targets, friendly greeting ('Hi, Sarah!'), 3-step visual guide (Share > Visit > Earn), copy-to-clipboard referral link, progress bars instead of numbers for referral tracking. Designed for users with limited technical or English literacy. No navigation chrome -- just the referral experience.
Developer-Ready Specs
Developer-ready specs for frontend implementation.
Because the prototype is built in the same stack a production frontend would use (Next.js 16, React 19, TypeScript, Tailwind CSS v4, shadcn/ui, Recharts), the prototype itself IS the developer spec. Component architecture, data shape, chart configuration, responsive breakpoints, and design tokens are all defined in code. A frontend engineer can reference any component directly rather than interpreting a static design document.
Brief Sections & Approach
Client-Provided Context
The data layer is real and production-tested: marketing attribution with full-funnel tracking from ad click to in-store repeat visit, customer segmentation across five lifecycle stages, identity resolution that unifies fragmented records across card systems and locations, and store-level KPIs including true CAC, ROAS, churn rate, and growth rate. Current reporting lives in Power BI and works but looks subpar.
Our Approach
We built the prototype around your actual data capabilities. Every metric shown (CAC, ROAS, churn, segment counts, identity resolution) reflects what your backend already produces -- we're designing the presentation layer for data that exists.
The identity resolution callout is front and center: Customer Detail shows '3 cards across 2 locations resolved into a single record.' Customer Search explains unified search across all systems. This is your technical moat and we highlight it everywhere.
Marketing Attribution includes an explainer banner: 'We track from ad click to in-store conversion to repeat visit' -- communicating the sophistication of your tracking pipeline to demo audiences in plain language.
The visual quality gap you identified (Power BI looks subpar) is directly addressed: every chart, table, and KPI card is polished to a Stripe/Linear standard while preserving the analytical depth your team has built.
Why a Working Prototype, Not Just Mockups
Your data layer is production-tested. Your reporting layer (Power BI) is the bottleneck. We built this prototype as a fully functional Next.js application using the same component architecture and design system a production build would use -- because the fastest path from “demo to PE firms” to “production product” is to start with real code, not static mockups. Charts render with realistic data, navigation works across all 10 screens, filters are interactive, and the design system is implemented as CSS custom properties and reusable React components ready for your frontend team.