Scalable Demo
Role: Project Lead, UX/UI designer
Team: 3 designers and front-end development team
Tools Used: Figma and VSCode
Project Goal: To decrease the level of time and effort dedicated to creating unique demo applications. Each demo must be uniquely branded for each client and effectively showcase the applications’ functionalities for sales purposes.
Overview: After thorough research and collaboration with our development team, I designed a solution that prioritized minimal css edits and consolidated branding to asset updates.
Result: Our new design system decreased project turnaround time from 1.5 weeks to 2 days, including design and build time. Less back and forth between designers and the development team greatly streamlined our build process.
Background
TrueChoice is a SAAS company dedicated to creating specialized web-based surveys and providing data analytics to help companies understand the preferences of their employees and customers.
TrueChoice clients are primarily Fortune 500 companies, so it is important that TrueChoice designers can replicate each company's brand look and feel. With more professional designs, users are more inclined to trust the application and submit accurate responses. Providing clients with actionable insights leads to boosting satisfaction and increasing profitability.
Role: project lead and researcher.
It was my responsibility to create the core design, test iterations, and communicate with our developers to alleviate any potential pain points with subgames or meta data. Once we were able to build our first scalable demo, I created documentation to share the process with the rest of my design team. Together we were able to push our design capabilities, include new animation possibilities to our landing page, and continue to create new demos faster than ever.
Summary
One key marketing strategy is building functional prototype applications for our consulting partners to share with their clients. TrueChoice has multiple HR, B2B, and B2C solution offerings to choose from. Creating bespoke demos for each solution and partner was time-consuming and inefficient. Our goal was to drastically minimize the LOE dedicated to each of these demos and find a way to update them in batches.
Challenges
Demos are not scalable
Each partner demo is an independent project, consisting of its own range of assets, styles, and XML (Extensible Markup Language that provides structure to each app’s data)
Any features or platform updates are done manually to each build, on an ad-hoc basis
Designing and building demo requires consistent full team resources
Demo applications are obsolete if they are not updated regularly
Overview
How can we reduce LOE and improve demo build efficiency?
What type of constraints can we introduce to minimize custom CSS variation while still supporting brand customization for each partner?
What are our current platform capabilities? Can our current technology achieve this?
How will our framework scale when additional partners are added to each demo?
Parameters
Main application must be client agnostic, any styling that is code-based must apply to all clients, including Icons
Making CSS and HTML edits is the most time-consuming for the designers and most likely to become disorganized when linking multiple apps to a single file
Differentiated brand elements are embedded within assets (welcome, headers, background)
Welcome is our most prominent visual indicator for each partner demo application
Content for each demo must be identical for the demos to be linked
initial design test to showcase multiple partners
Design Result
Our final design is primarily black, white, and a cool toned grey so that it would match any client’s branding. We dedicated time to choosing the right shades so that our demos would feel modern and cool, instead of an unfinished wireframe or prototype. It is also important for us to reach for the most eye-catching elements of our clients’ branding in order to accomplish our goal of creating a well branded demo for each of our stake holders.
With each demo, we are able to use our extra time to push our design skills and explore new styles and animation possibilities.
