Work 作品 About 關於 Creative 創作 Contact 聯絡 Resume 履歷
All Work全部作品
本案例研究以英文呈現
Product Design UX Prototype AI

miirr.ai

From concept to investor-ready demo in 4 weeks — acting as product architect, not just a designer.

Role
Product Architect & UX Designer
Tools
Figma · Base44
Timeline
4 weeks
Industry
Fashion Tech · B2B SaaS
4 wks
Zero to prototype
2
Core flows built
100%
Investor ready
Overview

The founder of miirr.ai had a compelling vision — using AI to revolutionize fashion buying workflows. But the concept was too abstract to pitch. What they needed wasn't just a design, but a product structure tangible enough for investors to believe in.

Dianne stepped in not as a hired-hand designer, but as a product architect. In four weeks, she went from zero concept to a fully functional interactive prototype, building two complete user flows and the visual foundation the brand still runs on.

The Problem

Fashion buying involves enormous amounts of manual data work: vendor documents, product specs, order tracking, spreadsheet exports. The status quo is error-prone and time-consuming, but it's what the industry knows. The challenge wasn't just making a better tool — it was making one that felt trustworthy enough for a conservative industry to adopt.

The added pressure: an investor pitch deadline that couldn't move.

01 Domain Expertise as UX Strategy

Most designers would have spent the first two weeks just learning the vocabulary. Dianne didn't need to.

Her background in retail product data management meant she already understood the pain points of manual entry, the logic of vendor-to-order relationships, and what "a batch export" means in real-world buying contexts. That domain knowledge became the foundation of the information architecture — every AI workflow was mapped against how fashion buyers actually think, not how software engineers imagined they did.

Handwritten discovery notes from founder sessions
Discovery notes from early founder sessions — user flow sketches, feature groupings, and the first rough IA on paper, before any design tool was opened

These sessions shaped the core structure: how users upload documents, what the AI processes, and how buying data flows from ingestion to export. The handwritten notes were the first filter — separating what the founder imagined from what users actually needed.

From there, Dianne mapped the real people behind the workflows. Fashion buying isn't one job — it's four distinct roles with different levels of technical comfort, different pain points, and different stakes. Understanding that split was what made the product structure hold up under scrutiny.

User personas — four fashion buying roles
User personas developed after the founder sessions — E-Commerce Manager, Senior Merchandising Manager, Independent Boutique Owner, and Head of Digital Transformation. Each role shaped a different part of the product structure.

The persona work surfaced a critical tension: the tool needed to serve both tech-savvy operators and traditional buyers who still work in spreadsheets. That gap became the design constraint — every feature had to feel simple enough for Emily (a boutique owner handling everything herself) without being underpowered for Priya (scaling data operations across teams). Only then did the work move into Figma.

IA Map — Information Architecture for miirr.ai
IA Map — the paper notes formalised: mapping the relationships between vendors, orders, and documents at a system level

The IA map clarified the system at a level that gave the engineering team a clear blueprint and the investors a coherent mental model of what they were funding.

02 Hybrid Prototyping for Speed

Four weeks is not enough time to be precious about process. The approach was deliberately pragmatic: use Figma for early structural planning — flows, hierarchy, key screens — then move directly into Base44 to build the live prototype. No handoff document, no redlines, no translation layer.

Every design decision was immediately testable in a real interface. When something didn't work, it got fixed in the product, not re-drawn in a design file. The speed came from collapsing the gap between "how it should look" and "how it actually behaves."

Figma sketch — Documents view
Figma — structural sketch before development
Live product — Documents view in Base44
Base44 — the same view, built and live

The core product flow — document upload → AI processing → data review → export — was designed to demystify the "black box" of AI. At every stage, users can see what the system is doing.

The review step was the most critical UX decision in the entire flow. AI makes mistakes. Fashion data is high-stakes — a wrong SKU or a mis-read quantity has real commercial consequences. Giving users full edit access at the review stage wasn't a compromise; it was the feature. It reframes the AI from an autonomous operator into a capable assistant: fast first draft, human final call.

The export phase was equally deliberate: two paths (CSV for legacy systems, Shopify for modern e-commerce) directly addressed the persona split between traditional buyers still working in spreadsheets and digital-native teams already running on e-commerce infrastructure.

Core product flow — 8-step process
Document upload → AI processing → data review → export — the full 8-step flow
03 Visuals that Build Trust

For an early-stage AI startup, visual language is a trust signal before it's anything else. The design challenge wasn't just aesthetics — it was convincing a conservative industry that this tool was worth adopting.

The original brand used deep purple. But miirr.ai's core job is processing dense information — product photos, vendor documents, spreadsheet data. Deep purple at that density becomes oppressive. The decision was to pull back: shift the palette to light pink and blue, used sparingly as accents and borders only. Content — the photos, the data — stays the hero. The background stays white.

Typography was equally deliberate. Dianne presented the founder with several pairing options, but the guiding constraint was readability first: a clean sans-serif base for all data-heavy views, with the option to introduce a more editorial weight at headline level. The result is a product that feels like a serious business tool without looking like enterprise software.

miirr.ai style guide — colour system and typography
Style guide — colour system, typography choices, and component rules. Pink and blue as accents only; white backgrounds keep the product data front and centre.

The landing page was structured around a single goal: make visitors want to try the product. Rather than leading with technical features, the copy hierarchy was built around outcomes — what fashion buyers gain, not how the AI works. Every section drives toward one CTA, positioning miirr.ai as infrastructure for modern buying rather than a novelty tool.

miirr.ai landing page
Landing page — outcome-led copy, editorial visual system, single CTA. Designed to convert fashion buyers who are evaluating AI tools for the first time.
Outcome

Four weeks in, the founder walked into investor meetings with a fully functional prototype and a coherent visual identity. Two complete user flows — document ingestion and product export — were working end-to-end. The design system built during the sprint became the foundation for all subsequent product development.