Work/CotonAI Modes
Case study ( 02 ) · CotonAI
Designing structured, mode-based UX in an AI platform for fashion teams.
End-to-end design of Modes at CotonAI: replacing prompt-heavy AI with structured entry points mapped to real fashion workflows.
Overview
Great AI visuals shouldn't require a prompting degree.
At CotonAI we're building the Figma for fashion: an AI workspace fine-tuned for fashion and adjacent industries. As founding product designer there was no brief. I owned the problem, the interaction model and the design system, working directly with the founder, PM and engineering.
This is how a prompt box became Modes, structured entry points mapped to the way fashion teams actually work, and how that decision helped turn our MVP into a paid enterprise pilot.
Problem: Prompting was a tax.
Great visuals needed great prompts, and fashion designers aren't prompt engineers.
Solution: Modes, not better prompts.
Edit, Render, Colourway and Studio, each mapped to a real workflow stage.
Outcome: +125% adoption
After the V2 Modes bar, alongside a paid enterprise pilot and 584 hours saved for one client.
Problem
To get high-quality visuals, users need strong prompting skills.
Our MVP opened on a canvas and a prompt box. Users who could write precise prompts got striking results. Everyone else got unpredictable images and stalled.
So the question became: can we make something so intuitive that any fashion user gets a high-quality result without writing a prompt?
Users don't know how to prompt
Blank-page prompting put the burden on the user's language skills.
Too much prompting makes AI hallucinate
Especially with visuals, long prompts led to unpredictable results.
Research
We shipped an MVP in 3 weeks to learn where it broke.
Our team has a combined 8 years of fashion industry experience, so we started from what we had observed and shipped an MVP in a record 3 weeks. Then we shadowed users on it and tested two ways of helping them prompt better. Both failed, and that was the most useful result of the quarter.
Fashion tools had broken user flows
Hypothesis from our industry experience.
Adoption of new tech is lower
Hypothesis from our industry experience.
Fashion pipelines are disconnected
Hypothesis from our industry experience.
They hesitated before typing prompts
Pattern noticed while shadowing users.
They reused vague prompts repeatedly
“change color”, “Make this editorial”, “Change the Model”.
Smarter prompt templates failed
Reduced the blank page problem, but still required language precision and did not reduce hallucination.
System-generated prompts failed
Still hid complexity instead of removing it, were hard to make predictable across fashion workflows, and users couldn't understand why results changed.
Principles
AI should adapt to designer intent, not the other way round.
Before redesigning anything, I set the rules every later trade-off would be judged against. They came straight from what failed in research.
Principles
- 01
Intent over syntax
Designers choose what they want to do, not how to phrase it.
- 02
Structure the entry, not the output
Modes guide where you start. Creativity stays open.
- 03
Familiar before novel
Borrow patterns fashion teams already know from design tools.
- 04
Every mode earns its place
Instrument adoption so each iteration has a verdict.
Solution
We replaced the prompt box with modes.
Instead of helping users prompt better, I removed the need to. Modes became structured entry points into AI capability, reducing ambiguity while keeping creativity open.
After the MVP we refined the direction, launched V1 for paid pilots on a more stable backend, and rolled out V2. Each mode maps to a real fashion workflow stage, and each iteration was decided by usage data, not opinion.
Mode-bar adoption: +125% (V1 → V2)
Indexed to V1 = 100. Visual annotation helped users pick a mode faster.
Clicks to a try-on: 8 → 3 (−5 clicks)
Editorial, V1 8 vs Figure submode, V2 3. No prompting needed in V2.
Figure submode
Try-on on a model
Took 8 clicks and prompting.
Figure submode
No prompting needed.
How it works
- 01
Edit
Multiple options alongside edit open.
- 02
Render
Add required material or fabric to your garment.
- 03
Colourway
Change garment colour and prints.
- 04
Studio
Create editorial-level photoshoots with a reference image.
Decision 1: Treat the canvas as a behavioural system
Architecture
Modes act as semantic layers between user intent and AI execution.
Flow
Mode logic → event → state → render loop.
It helped
Predictable outcomes, reduced hallucination, consistent visual logic.
Decision 2: Toolbar design evolution
Issue with V1
Users struggled to decide which mode they wanted, and onboarding took a long time. We used PostHog and trigger.dev to find this out.
Hypothesis for V2
Visual annotation will help users pick the desired mode faster.
Result
Adoption increased by 125%.
Decision 3: Colourway redesign
Issue with V1
Users had access to hex codes but low recall and cognitive load caused hesitation and friction, so weekly adoption was low.
Hypothesis for V2
A visual colour picker alongside hex input reduces cognitive load and matches familiar patterns from other design tools.
Result
Significantly improved user feedback and feature adoption.
Decision 4: Figure submode
Issue with V1
Creating a try-on on a model in Editorial took 8 clicks and prompting.
Change in V2
A Figure submode inside Edit mode.
Result
No prompting and 3 clicks to get results.
Sub-modes are for very specific use cases; they are not open-ended.
Decision 5: Scaling the design system with AI
Step 1
Designed tokens in the Figma library.
Step 2
Collaborated with dev to finalize the token specification, using shadcn as the base layer.
Step 3
Created an .md file and pushed it as a UI library.
Result
Every new custom UI pulls from the same GitHub repo, with no redesigning again and again.
The full system, and how a flow is specified before it is built, is case study 03.
Decision 6: Specify flows as states, not screens
Flow
In Editorial mode the user clicks + Look or + Reference, enters a temporary assignment state, and picks an image from the board or overlay. The system assigns it to the slot, shows the thumbnail, switches to Replace and exits with clear visual feedback.
Spec
Each flow is defined as states, events, constraints and acceptance criteria, so selection logic, slot mapping and Generate gating stay predictable and error resistant.
Ship
The spec goes into Cursor to prototype. A feature branch is created, slot state and overlay logic are implemented and pushed to GitHub, reviewed in check-in and finalized before merge.
Impact
A paid pilot, 584 hours saved for a client, and 125% higher adoption.
Modes changed what CotonAI could sell. The MVP converted into a paid pilot with an enterprise client, one client saved 584 hours in a single season, and the Modes bar redesign more than doubled adoption.
It also changed how we build: deciding UX flows before committing to AI models saved $5k+.
Images generated: 6000+
In editorial mode on CotonAI
Cost saved: $5k+
Deciding UX flows and which AI models to work with
Enterprise pilot: $$ (Paid)
Converted the MVP to a paid pilot with an enterprise client
Client time saved: 584 hrs
In one season, about 73 working days at 8 hours a day. Each square is one day.
Feature adoption: 125% (↑ vs V1)
After redesigning the Modes bar
Learning
Shape the interaction model, not more controls.
Designing CotonAI shifted my perspective on AI interfaces from feature design to interaction architecture. The real challenge wasn't model capability, but how people translate intent into action. Modes were a strategic move to reduce ambiguity, stabilize outcomes, and align AI behavior with how designers already think visually.
Successful AI products are not built by adding more controls, but by shaping interaction models that make complex technology feel predictable, trustworthy, and native to human workflows. The risks below are what I'm watching as Modes grow.
Risk: over-structuring
Could reduce creative freedom. Mitigation: modes guide the entry point, not the output style.
Risk: power users feel constrained
Mitigation: Open mode retained for advanced control.
Risk: mode explosion
Could confuse users. Mitigation: submodes nested inside parent workflows.
“While building CotonAI, I realized designers can directly influence business decisions through human-centered thinking, amplified by AI.”