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

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

SPOTTING TRENDS

Blacktrax was initially designed to make robotic lights follow performers, and the old website talked very little about projection mapping. I found increasing interest in projection mapping, so our website focusing backwards!

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
Tupac Martir of London's Satore Studio Lighting Designer and Creative Director

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.

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.

I started compiling real uses that could only be possible with Blacktrax
PROTOTYPE & DESIGN COMPS

Design Phase

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

How it Works page LED section design comp

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.

color palette

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.

Home Page 3D & 6D positional data section final design comp

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.

Media Servers (Projection Mapping ) third Party Connections design comp
DEPLOYMENT AND IMPACT

The Outcome

1.4
m
increase in sales year-over-year
50
%
Reduction in clarification inquiries
8.1
m
in sales revenue in 2017

The initial goal I was tasked -- to make Blacktrax sexier -- was achieved. The last round of user interviews revealed 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.

NEXT CASE

Blacktrax UI

Improving usability for a real-time IoT tracking system.

View Project