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 infrared beacons and cameras to track objects in real time and send its data to third-party applications such as robotic spotlights to follow performers in live shows or create moving projection mapping. I was tasked to improve the interface of the product that made a $200,000 product "looked cheap" without having permission to perform user research. Working with a small back-end C++ team with no time to think about user experience, I discovered serious issues that didn't allow the UI to be scalable and front-end code that was done with a "duct-tape method". I created a design language from scratch and implemented the front-end without any prior exposure to the QT framework.

  • Daniel Vianna

    Research, prototyping, design, front-end, team management

  • Petras Nargela

    Layout, iconography, and illustrations

  • Thiyagu S.

    Layout, iconography, and illustrations

HEURISTICS INSIGHTS

Discovery Phase

As previously mentioned, I was tasked to improve the interface of the Blacktrax without having permission to perform user research. In QT - a framework used to develop BlackTrax - most widgets are created as different layers of classes. In the old user interface, borders were added to most of those classes contained within these widgets in order to “help” separate layers resulting in a royal mess. The interface also had been neglected for a long time. Lacking a clear consistent design system, the dev team started using temporary solutions as “permanent”, putting duck tapes everywhere. I used heuristics to evaluate problems combined with feedback that the product manager collected being in touch with beta testers:

  • 01

    Inconsistent visual style for iconography and some users weren’t clear on their functionality.

  • 02

    No clear separation between widget screens, unnecessary cluttering with borders making it hard to focus on tasks

  • 03

    Lack of basic states for buttons and elements such as selected, hover, active, disabled

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

USER INTERFACE COMPS

Design Phase

I started off with an inspiration in flat design and quickly learned the application framework (QT Widgets by Nokia) wouldn’t support advanced transitions, only its successor (QML). QML, however, wasn’t a safe bet for a product that needed to rely on performance. But why not just sticking with Microsoft Design Language or something like Human Interface Guidelines? Blacktrax was built to be multiplatform (With QT) from the beginning, which means our Blacktrax "brain server" could be running in any OS. Although skeuomorphic is ideal for user interfaces in terms of usability it was not the best solution of development speed, at the time for our small team that needed to develop and maintain such a huge and complicated application in a short period of time. We applied some basic spacing rules and alignment to reduce cognitive load. On top of that, we removed the unnecessary nested borders that didn't help to separate these widgets, and improved contrast with typography and the widget label to make sure they looked separated without feeling confusing.

Blacktrax new fixture widget design removing borders and bigger labels to reduce cognitive load

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.

Blacktrax new modular responsive UI Widgets design comps

Designing For Usability

I designed a simple drag and drop system, allowing the user to assign beacons to move 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 (trackable) and check the status of each beacon

Creating Consistency With Icons

My mom always says being different is cool but I quickly realized the importance of standardization of icons. I believe, just like my interaction design hero Jef Raskin, that a user interface objective involves creating a “flow” experience between user and machine. 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”. Petras and Thiyagu did a great job we a system of icons that would be easily scalable and editable.

Using 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. color coding was used to reinforce the same meaning. Labels worked as the third level of redundancy, and to help overcome ambiguity. In the old interface lacked states for buttons.

Color for States

In addition to redesigned icons for battery status with more clear charging levels, color coding was used to reinforce the same meaning. Labels worked as the third level of redundancy, and to help overcome ambiguity. In the old interface lacked states for buttons. I've used different black and saturation values with the same hue to help their behavior and help with affordance discovery.

Interaction that Enhances Usability

In the old UI, the user was forced to find an invisible line between different screens edges in order to resize each widget - they weren’t clearly separated. Now, the user can hover over clear edges that become highlighted, making it much easier to resize.

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.

Front-end code recreated with comments using the QSS (markup styling language for QT framework)

DEPLOYMENT & IMPACT

The Outcome

Blacktrax started selling with a total revenue in 2016 of $6.6 Million and $8 Million in 2017, a $1.4 Million or 22% increase year-over-year. The goal that I was tasked to make sure the new interface was not ignored by back-end developers and to create consistency was accomplished. On top of that, I also became more familiar with front-end, a skill that became very important to communicate with developers and plan my other projects. However, without permission to perform user testing and the lack of analytics considering that the system was running without plugged to the internet was a challenge to evaluate how user experience improved. I and my team were removed from the project and I was tasked to another project before polishing the front-end. The interface was still very complex from my point of view and I realized that evangelizing UX and selling design was equally important (or even more) than just having technical skills. Those lessons were carried to my next project (Blacktrax Website) which I became better. For contract reasons, I cannot show the implemented interface.