Scalable Demo System
Cutting partner demo build time from 1.5 weeks to 2 days
Role: Project Lead, UX/UI designer
Team: 3 designers and front-end development team
Tools Used: Figma and VSCode
Result: Demo turnaround dropped from 1.5 weeks to 2 days, including design and build, with far less back-and-forth between design and development.
The Problem: TrueChoice builds working demo applications that consulting partners use to show the platform to their clients, most of them Fortune 500 companies. Each demo had to look like the client's own brand, so every one was built from scratch with its own assets, styles, and code.
That approach didn't scale. Each demo took about a week and a half of design and development time, and any platform update had to be applied by hand to every build. Demos fell out of date quickly, and the team spent more time maintaining old work than creating new work.
My Goal: to design a system that let us brand a demo for any client quickly, without rebuilding it each time.
Key Questions:
How can we cut the time each demo takes without losing the custom feel clients expect?
Which parts of a demo need to change per client, and which can stay the same?
What can our current platform support?
How will the system hold up as we add more partners?
Constraints:
The core application had to work for every client, so any styling in code applied to all of them.
Custom CSS and HTML edits were the slowest and most error-prone part of each build, so the system had to minimize them.
Client branding had to live in swappable assets (welcome screen, headers, backgrounds) rather than in code.
Content had to be identical across demos so they could be linked together.
My Role
I led the project from research through rollout. I created the core design, tested iterations, and worked closely with our developers to solve technical issues as they came up. Once the first scalable demo was built, I shared the process with the rest of the design team so everyone could build demos the same way.I led the project from research through rollout. I created the core design, tested iterations, and worked closely with our developers to solve technical issues as they came up. Once the first scalable demo was built, I shared the process with the rest of the design team so everyone could build demos the same way.
Documentation
To make the system usable by the whole team, I wrote a guide covering everything needed to start a new demo:
Which backend code each new demo affects, so designers knew what to flag for developers
The CSS designers change to apply client-specific styling
How the subgames work
Which image assets can be swapped, and how to link them correctly
Best practices, plus an FAQ built from questions that came up during development
A key priority was making sure no client could ever see another client's assets. The documentation spelled out how to keep each partner's materials separate.
Results
1.5 weeks → 2 days: Demo turnaround, including design and build
5 branded demos built using the system
Smoother handoffs: Less back-and-forth between designers and developers
Room to grow: The time we saved went into exploring new styles and animation for our landing page
initial design test to showcase multiple partners