WEBSITE FOR REAL-TIME TRACKING SYSTEM

BLACKTRAX

The Project

In 2016, Cast Software started to sell 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 asked to only improve the look of the website. But it lacked many things that could jeopardize the launch of the product. I transformed the website in a powerful education tool for people to understand what they could do with Blacktrax. After the redesign, sales increased in $1.4 million dollars.

The Team

Petras Nargela

Layout, iconography,
and illustrations

Daniel Vianna

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

Thiyagu S.

Layout, iconography,
and illustrations

Eva Chan

Research and wordpress implementation

Thiyagu S.

Layout, iconography,
and illustrations

DATA INSIGHTS

Discovery Phase

I was tasked to do a redesign thinking only of improving the visuals. However, as a UX guy, I know that applying design as a coat of paint doesn’t result in great gains. Cast didn’t have intelligence reports on how the conversions were performing so I started doing an exploratory quantitative research and heuristics analysis.

The most accessed page was the one that explained the system, but people still contacted the CEO and support to ask about the same questions. I dug through every piece of data and came up with some hypothesis:

The old website visuals were failing to catch the user’s attention

Nobody was reading the copy based on Hotjar recordings

Text content used jargon & abstract concepts distant to visitor's mental models

FOREIGN VISITORS

Google analytics data showed the majority of visitors accessing the old website were non-English speakers. A great insight as to why some people couldn’t understand the content.

USER & STAKEHOLDER INTERVIEWS

Research Phase

I interviewed every single employee in the Blacktrax team. It was not just important to get every person’s perspective on the product but also to ensure everyone had a voice.

Personal sketches trying to understand the big picture of how Blacktrax components worked together

I started compiling real uses that could only be possible with Blacktrax

USER RESEARCH

By using triggered Hotjar surveys and Skype calls with current customers and leads. While at it, I learned many images were purely decorative, with no meaning or function on the old website.

The website was wordy, images were too small, not enough opportunity for products to be featured and to showcase their functionality. Things were shown in a boring way.

Users could not understand what Blacktrax could solve for them - “Alright, you have a complicated tracking system, but what can I do with it?”.

Interviews also revealed users needed to see real-life examples of Blacktrax in action. On another call, I was able to confirm that projection mapping was on the rise, requiring a dedicated page showcasing how Bracktrax was the perfect solution for that.

USER PERSONAS

Production Manager

Lighting Programmer

Lighting Designer

Projection Mapping Artist

STAKEHOLDER RESEARCH

By approaching marketing and product teams I asked questions such as:
•What are the major problems with the current website?
•What would you change on the website if you were in charge?
•How does the current website impact your work?

The interview with the CEO was one of the most insightful ones because he was not only one of the people who had a better understanding of the system but also because he was directly handling sales. He said:

"Blacktrax should be perceived as selling a solution to a creative problem that needed tracking"

Cast role was to hand the client's hand until it's fully working. Those amazing nuggets of information were not communicated on the old website but they needed to be there.

WE USE REAL-TIME TRACKING
TO MAKE IT HAPPEN
Mazda’s Sounds of Tomorrow was
only possible with BlackTrax

I started compiling real uses that could only be possible with Blacktrax

TRANSFORMING GOALS INTO DELIVERABLES

Sandwich Method

Each important point from the research was labeled as an individual problem in a spreadsheet so the team could think of a solution and re-test it to see if the problem was resolved.

TRIMMING THE FAT

Making a quote for Blacktrax between the CEO and the client was a nightmare. Clients needed to fill a four-page long PDF, sent by email to Cast CEO who needed to go back and forth between outlook and the PDF copying.

The CEO's was copying and pasting (a four-page long PDF with 60 fields that needed to be downloaded and sent via email).

PROTOTYPE AND WEB DESIGN COMPS

Design Phase

The "how it works" page worked almost like a static storyboard, explaining how the signal traveled through the system sequentially.

TINY INFRARED LEDS PULSES POSITION
Active light sources send unique InfraRed light pulses to cameras, so each beacon has its unique ID and can be tracked individually.

I started compiling real uses that could only be possible with Blacktrax

IMPROVING READABILITY

I solved some of the initial content readability issues brought up by the analytics data Creating a stronger hierarchy by defining larger typography, larger images and a higher image/ content ratio.

SHOWING REAL EXAMPLES

During the research phase, people asked for real examples that proved Blacktrax was not just vaporware. I created a new showcase section that displayed several real-life projects.

I started compiling real uses that could only be possible with Blacktrax

COLOR PALETTE

#f21860
#8518f2
#18cef2
#5d779b

REDUCING ABSTRACTION

The previous website talked about 3D and 6D tracking, and that was one of the root causes user confusion. I solved this problem by demonstrating X, Y, Z, Yaw, Pitch, and Roll.

WE TRACK 3D & 6D POSITIONAL DATA
Blacktrax can capture and pass positional 3D (X,Y, Z) and 6D rotation (yaw, pitch, roll) data to automation controllers.

I started compiling real uses that could only be possible with Blacktrax

ALL SOFTWARE INSTALLED

We ship BlackTrax server with all of its software already
installed including BTwyg, Blacktrax, and Motive.‍

THIRD PARTY CONNECTIONS

Blacktrax doesn’t work by itself, it needs to connect to third-party systems such as robotic lights to trigger actions such as the act of making the spotlight follow the person anywhere.

I listed all functional supported systems and created this design component to be used on different pages.

CONNECT WITH
7th Sense Media Server
Avolite AI Media Server
D3 Media Server
Green Hippo V3 & Shape
Pandora's Box Media Server
X-Agora Media Server

Media Servers (Projection Mapping ) third Party Connections design comp

SIMULATE FOLLOWSPOT OPERATORS IN IMPOSSIBLE LOCATIONS
BlackTrax automates followspot operators allowing robotic lights to be placed in locations that would be
impossible for human beings to operate.
PERFORMERS CAN MISS THE CUE AND IT'S ALL RIGHT
When performer improvisation would lead to a lighting design disaster in the past, now Blacktrax allows performers to move freely on any stage without worryingabout hitting marks on stage.

Media Servers (Projection Mapping ) third Party Connections design comp

Development, Research & Impact

The Outcome

The initial goal I was tasked -- to make Blacktrax sexier -- was achieved. The last round of user interviews revelead that the website's aesthetics achieved a higher average score compared to other industry websites

I also recruited people via userinterviews.com without any prior exposure to Blacktrax and found 100% of respondents were able to explain what Blacktrax, solving one of the website's problems found during the initial research.

1.4 m
Increase in sales revenue year-over-year
100%
Of the interviewed users without prior knowledge were able to define it