Client

Christie Digital Systems

Role

UX/UI & Visual Design

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

Terra logo icon (one variation):

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.

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.

Wireframes

As in the example below, I would sometimes combine user task flows and wireframes together to present to the team; other times, I would construct straight wireframes.

Responsive image

Below: another example of wireframes for the global page within Terra Manager.

Responsive image

Whiteboarding and Sketches

Responsive image
Responsive image
Responsive image
Responsive image
Responsive image
Responsive image
Responsive image

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 (icons & vectors) and Adobe Photoshop 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.

Print copy of Terra Configuration guideline. Included in the hardware box for initial setup.

Responsive image

Final design for Terra Configuration manager

Responsive image