UI for real-time tracking system


The Project

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.


Discovery Phase

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:

Inconsistent visual style for iconography, some users weren’t clear on their functionality
No separation between widget screens. Cluttering borders was making it hard to focus on tasks
Lack of basic states for buttons and elements such as selected, hover, active, disabled
Blacktrax old interface screenshot

Design Phase

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.

Blacktrax old fixture widget: unnecessary nested borders made me confused on which widget I was actually using


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.

New drag and drop functionality that allowed the user to assign beacons to moving targets (trackables) and check the status of each beacon


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”.

Using Color to Convey Meaning

Color coding was implemented to show a different state, how much the level was increased in relation to the total possible.

Interaction that Enhances Usability

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.

Final UI Screen Comp

The Outcome

increase in sales year-over-year
total in sales revenue in 2016
in sales revenue in 2017

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.



All in one software to manage Cast employees and customers

View Project