I designed and built a working school-partnership flow in two days for an enterprise sales demo.
Role
Product Designer and Design Engineer
Duration & company
2 days
My Squad
Solo design and prototype build
Context
A manual process blocking enterprise sales
MyStudio is a studio management platform used by independent art and fitness studios across the US. One untapped opportunity was B2B partnerships — studios running programs inside schools and community organisations. The entire workflow (outreach, interest collection, agreement signing, invoicing) was manual: emails, PDFs, spreadsheets. To pitch a major enterprise school district, the sales team needed something a principal could click through and see themselves using — not a deck, not wireframes. Something that felt like product.
Problem
No product existed. The demo was in days.
The full partnership lifecycle had to be designed and prototyped from scratch: a studio sends an email, the school fills out an interest form, the studio creates a partnership, adds sessions, sends a waiver, the school signs it, the studio tracks attendance and sends invoices. Eight distinct screens, two user perspectives, multiple states per screen — and it all needed to work end-to-end in a browser with no engineering support.
Problem image 1 → Screenshot of the manual email/PDF process or blank MyStudio Partnerships section Problem image 2 → The full 15-screen flow map / demo bar showing all screens
Problem image 3 → s5 Partnerships table (Requested state) — before any partnership exists
Problem image 4 → s6 Partnership detail showing the empty draft state
Research
Working from the real product, not assumptions
There was no time for formal research. Instead the process drew directly from three sources: the existing MyStudio Figma design system to match the V2 visual language, the actual product flows already in production to stay grounded in real patterns, and direct feedback from a Kidcreate Studio owner on what they needed operationally — session scheduling, minimum enrollment rules, per-student invoicing. The Figma MCP integration was used to pull live design specs and match tokens exactly: #1D6B45 green for CTAs, #2563eb blue for active states, warm off-white full-screen backgrounds.
Decisions and tradeoffs
Iteration 1
Decision:
Started with Figma. Switched to a browser-based prototype.
Tradeoffs:
The first instinct was to prototype in Figma — faster to start. But Figma prototypes break on edge cases, need explaining, and feel like mockups to non-designers. A browser-based build takes more effort but reads as real product to anyone who opens it.
Constraints:
No engineering support. Design had to own the full build end-to-end.
Result:
A single HTML file deployed on Netlify. One URL, no installs, works on any device. The demo felt like opening a real product.
Iteration 2
Decision:
Separated "proposals" and "partnerships" — then collapsed them into one.
Tradeoffs:
Early screens treated proposals and active partnerships as different sections. Mid-build it became clear that split created confusion in the demo story. Collapsing everything — sessions, waiver, attendance, invoicing — into one Partnership object with a tab-based interface made the lifecycle readable at a glance. Trade-off: less structural flexibility, but far more clarity.
Constraints:
The enterprise client needed to follow the full lifecycle in one walkthrough without needing it explained.
Result:
The left-nav tab layout gave reviewers a mental model of the product before they clicked anything. Details → Sessions → Waiver → Attendance → Invoicing read like a natural progression.
Iteration 3
Decision:
Moved from sidebar layout to full-screen takeover. Pulled the waiver into its own editor.
Tradeoffs:
The partnership detail originally lived inside the standard MyStudio sidebar — consistent, quicker to build. Switching to a full-screen takeover (matching the Figma design system) and giving the waiver its own dedicated editor screen added build time but changed how the whole thing felt. It went from "a feature inside a product" to "a product."
Constraints:
Had to match Figma design tokens exactly in raw HTML/CSS — no component library, no shortcuts.
Result:
The final screens held up under scrutiny in a live enterprise demo. The waiver editor in particular — with a contract, formatting toolbar, and signature blocks — gave the feature the credibility it needed.
Outcome
Enterprise school district client moved forward after the demo
Contributed to a $3M ARR increase for MyStudio
Validated the B2B partnerships feature as a priority product investment
Demonstrated that design engineering — building working prototypes without engineering handoff — can directly accelerate revenue
Behind the scenes
Behind the scenes The prototype was built iteratively using AI-assisted design engineering — writing and editing HTML/CSS/JS directly, pulling live Figma design specs via MCP integration to match visual tokens, and deploying to Netlify for instant sharing after each round of changes. The biggest technical catch: a key screen was referenced throughout the navigation but the actual HTML div didn't exist — it was silently failing. Caught and fixed before the demo. The biggest design shift: switching the partnership detail from a sidebar layout to a full-screen takeover. One decision that changed how the entire product felt.
