Proven Experience Design Leader

Product Design, User Experience Design

Christie Phoenix New Product Development

Christie Phoenix (hardware) thumbnail

Christie Phoenix node

My first foray into new product development for Christie Digital, the Phoenix project, was a labor of love. What started as a rudimentary spec document ended up being a true industry game changer.

A video wall solution consisting of hardware nodes powered by web-based management software, The Phoenix system enables access and control of audiovisual data from virtually anywhere, through a single system. Its comprehensive tools allows thousands of users to simultaneously view, listen to, and interact with any source of information found in a control room environment, regardless of their location.

Phoenix was actually a dual move for the company; an entrance into the “Command & Control” market and a video processing solution we had hoped would resonate with an emerging market segment of consumers seeking a more affordable option (than that of our flagship video processor, Spyder X20).

Though the hardware would be too divergent from its incumbent, Spyder (a hardware-based processor), it seemed the Phoenix software could certainly leverage  many features from Spyder’s “Vista Advanced” software.  With the tremendous success of the Spyder product, I started there…

Vista Advanced software navigation

Vista Advanced software navigation

After sifting through the Vista Advanced software, the site architecture was not wholly intuitive.  It felt like features had been shoehorned into the application over its near 10 years on the market.  In order to be useful for Phoenix, the information would need to be reorganized and recategorized. So, I asked a handful of my most knowledgeable engineers to help me with a proper card sort.

Vista Advanced software topics

Vista Advanced software topics

Two engineers attempting a Vista Advanced software card sort

Engineers attempting to recategorize Vista Advanced software topics

I also started researching the competitive landscape and developing a handle on the information architecture, in order to understand how the project pieces would fit together. Out came the dry erase markers.

An early sketch of the Phoenix system

Whiteboard sketch 1

An early sketch of the Phoenix system

Whiteboard sketch 2

Then, with my new found information, an analysis of my card sort, and re-review of the project requirements, I was able to start fleshing out the logic, user flow, and several wireframes.

Phoenix Web Manager UX logic flowchart

Web Manager UI Flow

An early sketch of the Phoenix system desktop client

Desktop client: Dashboard sketch

Phoenix desktop client - dashboard wireframes

Desktop client: Dashboard wireframe 1

Pushing on multiple fronts, including the branding and hardware, necessitated a highly iterative (Agile) process. This juggling act and frequent refinement served to strengthen the fidelity of my wireframes, and to further the development of the interaction models and eventual prototypes.

Phoenix software authentication wireframe

Auth screen wireframe

Phoenix software Wall Manager wireframes 1

Desktop client: Wall Manager wireframe 1

Phoenix software Desktop client dashboard wireframe 2a

Desktop client: Dashboard wireframe 2a

Phoenix software Desktop client dashboard wireframe 2b

Desktop client: Dashboard wireframe 2b

Phoenix source list schematic

Source list schematic

Phoenix network schematic

Network schematic

It was time to engage the Engineering Team and to add the interface (UI) design layers. For a couple of elements (like the Installer App), the Engineering team decided it was best to use an off-the-shelf product. Though these pre-packaged solutions were deemed easier for our developers to implement, they brought more design complexity for me. I find most of these apps can only be skinned at a light level and often necessitate additional research, in order to get them to adhere to the overall project branding.

Phoenix software loader style schematic

Loader style

Phoenix software login style schematic

Login style

Phoenix Web Manager software color guide

Web Manager software color guide

Phoenix software styles sticker sheet

Sticker sheet of styles

From a Phoenix [software] standpoint, I would end up designing a desktop manager/dashboard, web manager, video wall, controller wizard, boot screens, various pre-loaders, a software loader, authentication screens, error screens, the installer application, test apps (e.g. a network tester), a mobile app, and more.

I am also responsible for the project branding, the design and development of the hardware (alongside mechanical and electrical engineers), the product labeling, the packaging and shipping containers, and the main collateral for product, sales, marketing, user & technical support (digital and traditional).

Phoenix "No connection" error screen design

“No connection” error screen

Conceptual design of the Phoenix chassis, drawn in Illustrator

Conceptual design of the Phoenix hardware

Piece-by-piece (over the course of about a year and a half), the Phoenix system had come together in front of my eyes. This once Word document had not only become a tangible product, but a fierce market competitor.

Phoenix had risen from the ash.

Phoenix website landing page

Website landing