IGN Ent. • 2018-Present

IGN Ent. • 2018-Present

IGN Ent. • 2018-Present

IGN Video Player V6 Redesign/Relaunch

IGN Video Player V6 Redesign/Relaunch

IGN Video Player V6 Redesign/Relaunch

Product Design

UX Design

User Research

Visual Design

User Research

Visual Design

Overview

Overview

Overview

Role(s): Lead Visual Designer, Lead Lead UX Designer


Many community members have been expressing their frustration with the IGN video player, citing it as a daily source of poor user experience for years now. While some of these claims were user errors, an overwhelming amount still existed that we knew needed to be addressed after years of inactivity. The solution was to rebuild the video player (hence v6) and use more web-friendly and performance-friendly codecs and dev techniques to address the large share of user issues reported thus far. This also presented the opportunity to update the interface and adopt more modern design principles


My Responsibilities:


• Redefine the UI and visual design for a modern update to the IGN player

• Define and develop all necessary screens + their UX

• Work with Engineers and PMs to deliver end product and perform design QA to deliver a polished end product

Approach

Approach

Approach

This was a project that I and a fellow PM, Mark Ryan Sallee made into a bit of a passion project. We were both dedicated to improving the player that had been so regularly decried by our user base. Once we decided internally to move forward with the V6 project, myself and Mark Ryan would regularly get together and prototype versions of the new player together.


We eventually built it up enough in Codepen that it was fairly functional and represented a living example that our engineering team could take and create the newly reengineered IGN video player. The desire was to bring our player in line with what our competitors were doing but also to try and peel away users from using primarily youtube. If our new player could achieve many of the same features, we felt there was a chance to gain those users back


I worked over the months with Mark and our engineering team to deliver user interface assets and provide design QA once they had working code previews all the way until full release on ign.com

IGN's video player from about 2013-2018

Old Homepage (2012-2017)

Old Homepage (2012-2017)

Old Homepage (2012-2017)

IGN's previous player was (despite many user comments) a well-built and fairly modern player for the time of its release. It was mostly lacking in that as we got closer to HTML 5 and other modern video web codecs being produced, our player basically needed a full rebuild to take advantage of them. This is where the project between myself and MRS truly began more as a skunkworks task for its initial months-year of development

using codepen for quick visual qa and editing

New Video Player (2017-Present)

The biggest differences we were looking to hit with a new player were basically as follows:


• Improved UI that adopted modern design styles

• Improved UX around the playback experience

• Adding accessibility features like closed captions

• Ability to live stream and keep up with modern video codecs

• Fully responsive player size able to be used anywhere on site

• Ability to display ads within playback/controls

"We were addressing user needs, a new demand for 4K content as consoles gained 4K capabilities, but also the need to support low bandwidth mobile viewing, so we adopted HLS technology and designed a UI around giving users a seamless automatic experience + the ability to dive in and control things when they wanted."

"We were addressing user needs, a new demand for 4K content as consoles gained 4K capabilities, but also the need to support low bandwidth mobile viewing, so we adopted HLS technology and designed a UI around giving users a seamless automatic experience + the ability to dive in and control things when they wanted."

"We were addressing user needs, a new demand for 4K content as consoles gained 4K capabilities, but also the need to support low bandwidth mobile viewing, so we adopted HLS technology and designed a UI around giving users a seamless automatic experience + the ability to dive in and control things when they wanted."

mark ryan sallee about the v6 goals

IGN's video player from about 2013-2018

Old Video Player (2013-2017)

Old Video Player (2013-2017)

Old Video Player (2013-2017)

IGN's previous player was (despite many user comments) a well-built and fairly modern player for the time of its release. It was mostly lacking in that as we got closer to HTML 5 and other modern video web codecs being produced, our player basically needed a full rebuild to take advantage of them. This is where the project between myself and MRS truly began more as a skunkworks task for its initial months-year of development

using codepen for quick visual qa and editing

New Video Player (2017-Present)

The biggest differences we were looking to hit with a new player were basically as follows:


• Improved UI that adopted modern design styles

• Improved UX around the playback experience

• Adding accessibility features like closed captions

• Ability to live stream and keep up with modern video codecs

• Fully responsive player size able to be used anywhere on site

• Ability to display ads within playback/controls

© Justin Vachon 2023