USER INTERFACE FOR REAL-TIME TRACKING SYSTEM

BLACKTRAX

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.

The Team

Petras Nargela

Iconography, and animations

Daniel Vianna

Product design, front-end, and team management

Thiyagu S.

Iconography andlayout

HEURISTICS INSIGHTS

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, and 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

USER INTERFACE COMPS

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: unecessary nested borders made me confused on which widget I was actually using

DOCKABLE WIDGETS

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.

DESIGNING FOR USABILITY

I designed a simple drag and drop system, allowing the user to assign beacons to moving targets. 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 an 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

CREATING CONSISTENCY WITH ICONS

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 TO CONVEY MEANING

The previous generation of Blacktrax UI did a poor job at this by using color merely as a form of artistic style as opposed to having a practical function. Color coding was implemented to show a different state, how much the pan 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 in order to resize each widget - they weren’t clearly separated. Now, the user can hover over clear lines that become highlighted.

FRONT-END PROGRAMMING

Implementation

QT didn’t have a visual inspector like browsers do - you needed to compile to see changes. BlackTrax’s front-end code also used to lack comments, proper formatting and many elements such as borders being rendered on top of other borders.

To fix this, I organized objects that visually formed a “component”, adding comments to mark what each one did. This structure allowed any new employee to continue this job - no hassle.

Development, Research & Impact

The Outcome

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.

1.4 m
Increase in sales revenue year-over-year
8 m
in sales revenue in 2017