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
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
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 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
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”.
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.
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.
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.
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.
Final UI Screen Comp