Scalable Demo
Role: Project Lead, UX/UI designer
Team: 3 designers and front-end development team
Tools Used: Figma and VSCode
Project Goal: Decrease level of time and effort dedicated to creating unique applications for demonstration and sales purposes. Each demo must be uniquely branded for each client.
Overview: After thorough research and collaboration with our development team, I designed a solution that prioritized minimal css updates and consolidated branding to asset updates.
Result: 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 development team.
Background
TrueChoice is a SAAS company that is dedicated to creating specialized web-based surveys and providing data analytics to help companies understand the preferences of their employees and customers.
Most of our clients are Fortune Global 500 companies so it is important that the designers at TrueChoice are able to replicate the look and feel of each company’s branding. Users must trust our application so we receive accurate responses and provide our clients with actionable insights into boosting satisfaction and increasing profitability.
Role
I was the project lead and head 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
We were requested to dedicate our time this past year to update all of our “Demos” for each of our consulting partners. One of our key marketing strategies is building clickable demos of our application for our consulting partners to share with their clients. TrueChoice has multiple HR, B2B, and B2C solutions offerings to choose from and 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 its own range of assets, styles, and XML
(Extensible Markup Language that provides structure to each app’s data)Any features or platform update is 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
as a key requirement to each partner?What is 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 be applicable 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 to each partner demo application
Content for each demo must be identical in order 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.
