IGN has an amazing team of working on a massive amount of videos produced for their website with an excellent motion design added in post production. Growing into live video has been an entirely different beast, where all graphics and camera work is combined into a single video feed on the fly. With E3–the biggest video game expo in the world–fast approaching and only static images for graphics, it was my task to design and develop a new system that could handle all of IGN's animated live graphics needs for E3.

Nicholas Macias provided an excellent proof of concept that we could use web browsers to run a new system instead of using an expensive software alternative like Kyron. I ran with that concept and was able to design, test and develop an entirely new live graphics system for IGN running within a web browser.

Role
Product Designer &
Developer

Deliverables
Wirefrawmes
Visual Mocks
Animations
Production Code

View Live E3 Videos
View Up At Noon Live

Planning  for a
new future

This project began with interviewing the video team about how live video production works, what the competitors use and what our features our ideal in house solution could have. From there product goals were established.

Product Goals

• Integrate seamlessly with the current video work flow.
• Intuitive enough to for any onsite assistant to learn.
• Prepare an entire show's worth of content before airing.
• Flexibility to change content while a show is live.

Consistent design language 

IGN Live didn't have a consistent visual design language yet so as part of this project we established a design system that worked as part of the IGN experience. This included establishing a consistent animation style. 

Developing  an intuitive controller interface

This is an early prototype that allows a user to edit each graphic and see the updates live in a preview before it is put into the live stream. Along with the studio workflow I also add features to make prepping for live streams easier with spreadsheet import functionality.

Working in the studio

Part of the process of using this new system was actually working in the studio with the video team on how to best implement this graphic system and how the director should call for graphics. This lead to some modifications to the system to make it an effortless transition for the team.

Effects of a streamlined system

Having this system saves IGN thousands of dollars for every live event they cover as they no longer need to rent a Kyron like system and operator for each event as this system can easily be taught to any on set assistant in mere minutes. This product has also be modified to run other live graphics packages for other branded live streams with minimal code changes due to being css based. The final product is now used for all of IGN's live stream graphics.