UI for real-time tracking system
Blacktrax
In 2015, Cast Software was planning to launch the Blacktrax system worldwide. A real-time tracking system that created a new kind of magic in live entertainment. This system used real-time tracking to make spotlights follow performers and make projection mapping move.
I was tasked to improve the interface without having permission to perform user research. Working with a small back-end C++ team with no time to think about front-end or design, I created a design language from scratch and implemented the code without any prior exposure to the QT framework.
In the old user interface, borders were added to most of those classes contained within these widgets in order to “help” separate UI elements resulting in a royal mess.
The interface had been neglected for a long time. Lacking a clear consistent design guideline, the dev team started using temporary solutions as “permanent”, putting duck tapes everywhere. I used heuristics to evaluate problems combined with client feedback that the product manager collected:
I applied some basic spacing rules and alignment to reduce cognitive load. On top of that, I removed the unnecessary nested borders and improved contrast with typography for widget labels to make sure they looked separated.
One of the requirements of the project was that the UI needed to be dockable (just like Adobe Photoshop) based on the fact that users needed the flexibility to work with multiple screens and complex setups so everything needed to be modular and responsive.
I designed a simple drag and drop system, allowing the user to assign beacons to targets that were moving. Each target could have multiple beacons, and each beacon displayed a slew of information (i.e. rotation, battery, position, visibility).
While before the user needed to use two data tables and assign a beacon to a target by using a button, that was not only a tedious task for large live shows but also required mental effort to imagine what was inside what.
An inconsistent set of icons brings chaos and confusion to the brain while consistency and familiarity help the interface become invisible to form a habit.
Known patterns were used for actions such as “delete, while new ones were created for unfamiliar actions such as ”fixture calibration”.
Color coding was implemented to show a different state, how much the level was increased in relation to the total possible.
In the old UI, the user was forced to find an invisible line between different screens to resize each widget - they weren’t separated. Now, the user can hover over clear lines that become highlighted.
Blacktrax started selling with total revenue in 2016 of $6.6 Million and $8 Million in 2017, a $1.4 Million or 22% increase year-over-year. The initial goal to create consistency was accomplished. I also became more familiar with front-end.
However, without permission to perform user testing and lack of analytics (Blacktrax was running without an internet connection) was a challenge to measure quantitative improvements. Getting buy-in for research became an obsession for the next projects.
