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 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 only improve the look of the website. But their old website 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 and the launch of the product, we saw an increase of $1.4 million dollars in sales.

  • Daniel Vianna

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

  • Petras Nargela

    Layout, iconography, and illustrations

  • Eva Chan

    Research and wordpress implementation

  • Thiyagu S.

    Layout, iconography, and illustrations

DATA INSIGHTS

Discovery Phase

As previously mentioned, I was tasked to do a redesign of the website 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 for the business and user. Cast didn’t have an analytics or UX team nor intelligence reports on how the website and conversions were performing so I started doing an exploratory quantitative research as well as heuristics analysis, taking notes on problems I found. The most accessed page was the one that explained the system (BT Systems), 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:

  • 01

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

  • 02

    Nobody was reading the copy which I saw on Hotjar recorded sessions

  • 03

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

FOREIGN VISITORS

FOREIGN VISITORS

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

REPEATED QUESTIONS

REPEATED QUESTIONS

Website viewers were frequently asking about the system on Olark Chat. They didn’t know exactly what Blacktrax was, its applications and components and had questions about pricing. Sometimes these questions came written in French or Chinese.

SPOTTING TRENDS

Blacktrax was initially designed to make robotic lights follow performers in-real time without humans, and the old website had a very small section that talked about media in general and not so much information on projection mapping. Using Google trends I found that Interest in lighting design was declining, while interest in projection mapping was increasing. Following stakeholder and user interviews I validated the increasing interest in projection mapping for Blacktrax. Using Google trends I found that Interest in lighting design was declining, while interest in projection mapping was increasing. Following stakeholder and user interviews I validated the increasing interest in projection mapping for Blacktrax.

USER & STAKEHOLDER INTERVIEWS

Research phase

After documenting the hypothesis found in the first research and heuristic evaluation I started scheduling sessions with both clients, leads and stakeholders to better understand their thoughts and gather important insights to improve the website. While doing research started breaking down how the system worked visually 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.

STAKEHOLDER RESEARCH

I decided to take a very low-key approach and conduct individual open interviews because I wanted to gather people’s sincere opinions and avoid group conformity. 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?” and “How can we improve?”.

The product team gave me great insights on user personas. Three types were uncovered: the Lighting Designer, the Lighting Programmer, and the Production Manager.

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 that Blacktrax should be perceived as selling a solution to a creative problem that needed tracking, so our 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. When I asked questions such as “What are your growing pains?” he mentioned the request quote form was terribly confusing (a four-page long PDF that needed to be downloaded and sent via email). The CEO was manually copying and pasting the answers to make proposals. People contacted him several times before sending the PDF quote because they were just plain confused.

Marketing was able to tell me that there were still persistent questions on product features and how the system worked, despite the old site having this explanation on features pages and in the FAQ section. These interviews revealed we needed some serious work done in order to make things more clear.

USER RESEARCH

I wrote and conducted customer 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. It focused too much on technical aspects and used too many jargons. 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 Blacktrax was the perfect solution for that.

Tupac Martir of London's Satore Studio Lighting Designer and Creative Director

User Personas

  • Production Manager

    Male in his mid 40’s who is managing teams and projects. He is Business-oriented and the person who signs the cheques for acquiring new equipment. He needs information on costs, sales process, and deliverables in a summarized way.

  • Lighting Designer

    Cool artistic male in his mid 30’s who is responsible for the creative vision of multiple live shows. His goal is to try new techniques and research new technologies that allow him to be more creative and wow the public. The final decision depends on the production manager.

  • Lighting Programmer

    Artistic & logical male in his early 30’s who executes the creative vision of the lighting designer. Also does lighting design work. His goal is to ensure design implementation is feasible, stable and looks good. He wants to know technically how things work.

TRANSFORMING GOALS INTO DELIVERABLES

Sandwich Method

After establishing personas and collecting information from the research it was time to refine the goals. I did that by using the “sandwich method”. Maybe you’re selling a burger - your bun is great, you have quality lettuce but your clients don’t like the cheese. That means you need to focus on the cheese instead of redoing the entire sandwich. 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.

CRAFTING DESIGN & CONTENT TOGETHER

Information Architecture

Research showed we lacked specific content so I started thinking about how these organize new sections. After working with content teams before I knew that receiving Word docs and trying to fit them into placeholders and lorem ipsum was never effective. I figured the best approach was to incorporate the content writing process together with sitemap and wireframing. Drawing from my previous experience with AdWords conversion optimization and PPC landing pages, I tried to treat every page of the website as a landing page because users sometimes bypass website architecture by using google as the primary entry point.

PROTOTYPE AND WEB DESIGN COMPS

Design Phase

In semiotics, increasing redundancy can be used to improve efficiency when trying to relay a message. In order to increase understanding of the technology behind Blacktrax, I used a lot of redundancy in a step by step sequence to try and get the message across. Images are used to convey the idea featured in the copy and vice-versa.

Based on my sandwich spreadsheet goal and information architecture structure I started designing high fidelity wireframes that were sent to Petras and Thiyagu for visual enhancement. I also designed some of the layout and final pages myself.

To reduce complexity I replaced complicated charts from the old website and created smaller sections (with huge illustrations) like the LED section below combined with a short and sweet copy. The “how it works” page worked almost like a static storyboard, explaining how the signal traveled through the system sequentially. We had no budget for professional photographers but that was not a problem, resourcefulness did the trick. I rented a studio and took all the photos we needed together with another designer. My own hand ended up in the final LED design comp.

How it Works page LED section design comp

IMPROVING READABILITY

We also 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 on the image size with more white-space helped break the huge blocks of text, making the copy easier to read and understand.

How it works section wireframe and final design comp

REDUCING ABSTRACTION

While the previous website made assumptions that the user knew technical jargon such as 3D and 6D tracking, that was one of the root causes user confusion, as per the feedback we received. I solved this problem by eliminating acronyms such as 6D and replacing it for X, Y, Z, Yaw, Pitch, and Roll. On the visual side, I combined redundancy with visual cues. By drawing a physical representation of rotation and movement, I eliminated the need for the brain to imagine something that it might not be familiar with, thus making it easier for the person to assimilate the concept itself.

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

SHOWING REAL EXAMPLES

As previously mentioned, 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 using Blacktrax. Later, that page was voted one of the most useful sections on the website when we performed user testing.

Showcase gallery page design comp which was also used in a mood board for color reference

COLOR PALETTE

Color Inspiration arose not only as a result of the design research but, interestingly, from colors commonly used in the industry and relevant to what our clients wanted to achieve as lighting designers. While before Blacktrax had a monochromatic blue, white and black look, we were able to add vibrant secondary colors that made all the difference when designing illustrations and backgrounds.

#f21860
#8518f2
#18cef2
#5d779b

REDUCING FRICTION

As mentioned earlier, I learned during the interview phase that users needed pricing information. Blacktrax was sold as a custom solution for custom projects so providing pricing on the website was challenging. However, having an average price point was better than no information at all. I looked into many shows and was able to calculate an average cost based on common setups using simple maths. This not only cut down steps in the sales process but also reduced dramatically our customer inquiries and helped free up the CEO’s inbox. It also resulted in filtering unqualified leads that would never turn into a sale because they would never be able to afford Blacktrax in the first place. After the new website was launched, pricing inquiries were significantly reduced.

Pricing page 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. Although the previous website assumed people knew about these connections, they were not clearly mentioned anywhere, and when there were any mentions they were usually buried in text. I contacted the product team and 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, RESEARCH & IMPACT

The Outcome

Sales grew substantially since the launch of the website: the total revenue in 2016 was $6.6 Million and $8 Million in 2017, a $1.4 Million or 22% increase year-over-year. The initial goal I was tasked with by Marketing and the CEO -- to make Blacktrax sexier -- was achieved after another round of interviews that revealed that the new website's aesthetics achieved a higher average score compared to all big tech company websites except for Oculus and Apple. I also recruited users via userinterviews.com without any prior exposure to Blacktrax and found 100% of respondents were able to explain what Blacktrax was after two minutes of navigation, solving one of the website's problems found during the initial research. We also reduced 50% of email inquiries about Blacktrax through chat channels and CEO inbox.

  • $1.4M

    Increase in sales revenue year-over-year

  • 50%

    Reduction in chat and email inquiries asking for clarification about the product

  • 100%

    Of the interviewed users without prior knowledge of Blacktrax were able to define and understand