Christie Digital Systems

UX/UI & Visual Design

A multi-million dollar product launch called Terra - a audio video hardware and software solution providing 4K video over Ethernet networks.

Company Information

Christie Digital is an electronics company that manufacturers both hardware and software. Hardware includes digital movie theater projectors, video walls and large video displays like jumbotrons, found at large sport arenas.

Some Christie Digital clients include stadiums such as Mercedes-Benz Stadium, Atlanta GA and Angel Stadium, where the LA Angels play.

My Design Process

I began by identifying our users. We had another group of experience designers who identified our core customers and had already created personas from another remote office. I got a head start by using these personas to focus on main user groups.

Working alongside developers, subject matter experts and the product owner, I identified common user tasks that the user might have when working in Terra.

The concept of the Terra Manager was to show video and audio sources across a zero latency network and display them among various hardware or video walls.

At right, Terra transmitter (TX) and receiver (RX) which allows for sending audio/video across networks.

User Tasks

I started working with the team in deciding what tasks were most important to what users.

Tasks were all weighted by importance by what needed to be completed by the user in the software, by using a ranking card sorting technique. In working out user flows, I made sure to consider barriers that prevented users in completion of their responsibilities. For instance, one of the core tasks was to create a layout which is a way to set up a series of video sources. There was an assumption that a drag and drop interface for applying these layouts would be best from stakeholders. Upon doing a quick guerilla test by surveying some end users, I found out that most users liked an older method of applying layouts that was used in older previous and competitors software and having a simple button to press instead.

I tried to add structure around what a user would need to do with the system - the reason they were doing the task. Per Nielsen Norman, UX consultants, this adds motivation.

To do that, I wrote out all the necessary tasks and ranked them by importance and used this ranking system to assign importance.

Wireframes

Example of wireframes for the global page within Terra Manager.

Whiteboarding and Sketches

Tools

There were multiple tools I used throughout the UX and UI process. These included hand drawings and whiteboards for the roughing of ideas. Adobe Experience Design, Invision and HTML/CSS/jquery (Bootstrap 3 & 4) were used for prototyping for the dev and support teams. I used Sketch, Adobe Illustrator CC (icons & vectors) and Adobe Photoshop CC for user interface and photo manipulation.

The low fidelity prototype below was created in Adobe Experience Design. The concept was to come up with a way to create, save, manage and recall configurations (or presets) for settings. Click anywhere on the prototype to see what to click next.

Design for Terra Configuration Manager

New feature requests

The Terra team received feedback for a series of feature requests from the business as well as end users. These were compiled in software called Aha!.

From a ux perspective, due to working with a smaller team and having limited resources, it was important for me to sometimes question if a feature was absolutely needed to be added to the software. The request to add features needed to be balanced with why it was needed and if the request was important to allow users to benefit.

Questions that I ask the business from a UX standpoint include:

Why do we need this functionality?

What do we gain by having this functionality? Will it save time, allow the user to complete tasks (i.e. work) faster, or increase conversion by a certain percentage?

What percentage of users will this feature positively impact?

New feature requests

Any updates to the Terra software were aligned through an agile process, through three-week sprints. The team would take feature requests through several funnels, including Aha! compiled from user feedback and the project management team.

We recently implemented a larger feature update called master layouts. This feature request was added after consideration of user needs, while balancing technical feasibly and meeting project timelines.

Master Layouts

To start this request, I got feedback from customers stating that they needed a way to take a snapshot of layouts within screens displayed in the center section of Terra called display arrays. A user takes a video source and can assign it to a display array (also called a wall) that they use to represent a physical grouping of displays.

Terra already had the ability to create layouts, which are user created groupings of sources, but no way to set up a master layout which encompasses one or many layouts sets. In other words, a master layout was needed which is simply a group of other groups.

At right, a high fidelity protoype showing developers how the master layout feature would work. After the second master layout group is created, you can drag it to the top to see it better.

Next

Fender Musical Instruments