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.

USER PERSONAS

Production Manager

Male, mid 40’s, Business-oriented. Signs the check. Needs information on costs, sales process, and deliverables

Lighting Programmer

Male, mid 30’s, Artistic. Focused on Execution. Wants to know technically how things work

Lighting Designer

Male, mid 30’s, Artistic. Defines creative vision. Wants try new techniques and research new technologies to wow the public

Projection Mapping Artist

Male, mid 30’s, Artistic. Creates 3D content with VFX and 3D tools

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

Problem
Execution
Feedback
Too many questions about pricing
Dedicated page for projection mapping
Inquiries reduced
Projection mapping is growing
Sell product as solution based
Survey1 - problem solved
No understanding of sales process
Sell product as solution based
Inquiries reduced
People don't understand the content
Replace jargons, use grade 10 English
Survey1 - problem solved
Users don't understand Blacktrax
Step by step explanation - how it works
Survey1 - problem solved
Lack of client testimonials
Include Client Testimonials
Survey1 - problem solved
Lack of endorsement
Partner logos on application subpages
Survey1 - problem solved
Complaints on grammar mistakes
Review text with copywriter
Needs improvement
People are not reading text
Reduce copy, more white space
Survey1 - problem solved
Users want to see all components
Photos of all components together
Survey1 - problem solved
Lack of trust if it really works
Client production showcase
Survey1 - problem solved
Layout inconsistency
Grid, typography, color palette
Survey1 - problem solved
Meaningless images
Remove "decorative" and stock image
Survey1 - problem solved
Users said website is  boring
Add 2 or 3 additional color accents
Needs improvement
Difficult navigation
Contain most links on menu
Needs improvement
Quote form is too complicated
Reduce fields, rewrite form questions
Reduced 50% of questions
Slow time for response for quote
Triggered email with estimated time
Survey1 - problem solved
Blacktrax features are not clear
Group and separate features
Needs improvement
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
m
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