IGN Ent. • 2018-Present
IGN Video Player V6 Redesign/Relaunch
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
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
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
The new v6 Video player
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
mark ryan sallee about the v6 goals
closed caption options and UI
The previous player had no support for captions and with the opportunity to make a new player from scratch, it felt like a no-brainer. We started off simple with the options with the desire to expand them in the future but we never reached that point of development
post video screen showing recirculation
This recirc screen was something myself and Mark Ryan prototyped early on in the dev process for V6. We coded up a version very similar to this in Codepen and tweaked the responsiveness and UX so that this screen could be effective at all sizes.
We also added an auto countdown to the next video with the option to turn it off if the users wanted to opt out of autoplay
Screens for "whos in this video" compared to amazon x-ray
As a media brand with a wealth of personalities, it made sense for us to think about how they could be included and further linked to other parts of the IGN web experience. We took inspiration from Amazon's X-Ray feature and thought we could try something similar in a much simpler form for the v6 player
the mini sizes of our player in action
All Shapes and Sizes
As stated in the original goals for v6, we wanted this player to be able to handle sizes of any kind and adapt accordingly. To do that myself and Mark Ryan worked on the responsiveness of the UI and what was deemed necessary in each state to stay for functionality and clarity.
What you see here is a representation of the primary states and how they are resized. We were even able to continue serving ads down to our mobile player size without the need for a separate instance. I was very proud of the way we engineered this into a player that could function anywhere it was placed no matter the viewport
our version of commerce served directly in-player
Commerce
Like any business, IGN needs to make money somehow, and in an instance where pre-rolls and post-rolls already existed, we wanted to try adding another option for advertisers to utilize. I and Mark prototyped a version of this and tried to keep it as unobtrusive as possible to our user's viewing. It was only shown when the player UI was present and never during playback with controls hidden.
Our advertisers liked having the option to directly advertise products within the existing experience and saw an uptick in referrals coming from our player after the launch
The new version of an ad playback on v6
Ads Playback
As I was just stating when it comes to commerce, IGN needs to make money somehow and the primary form when it comes to video is serving pre, mid, and post-roll ads (where a short 30-second to minute-long video ad plays before, during, or after your chosen video).
With an update to the player also came updated ad practices however, the most important of them all was the ability to now skip ads after 10-15 seconds of watching them. This was added into v6 and made our fans who long decried our ads much happier to use the player once this was implemented at launch
the vast number of variations and player states for v6
the many many many versions of the player Ui
Getting to a final visual design for the new UI took quite a few iterations, to say the least. The initial idea was to remove the background UI from the tools (ala more Youtube-like) meant all the elements needed to look unified as well as have enough visual contrast while placed against any screen brightness or color
all final iterations of the player ui and its variants
Designing the UI for any project means designing every single possible edge case (outliers of the normal design states) that you can think of. This means a fun exercise like the one above where I build out all possible versions of the player in different states to show our devs a reference point to build from.
doing visual qa for the player
Doing QA for any of my products is always important and I spend a sometimes painstaking amount of time to make sure our designs match the live product. This is where myself and Mark Ryan really utilized Codepen to tweak and adjust the details to make sure the v6 player had the polish it needed and more importantly functioned how we intended
IGN's player UI and UX is still in use to this day on all pages
To this day the player and its UI continue to be in use across all of IGN's instances on the web. It has shown to be a reliable and rigor-tested player that IGN has used consistently since the launch of V6 back in 2017.
Upgrades have been made on the back end of the player for performance and codec reasons but the primary core of the player still remains to this day from a UI/UX standpoint. Complaints about the player still persist but overall we saw a drastic downturn in negative feedback in the years following the launch.