This week, the Vox Product team released a brand new video browser on Polygon. Response has been positive thus far, and I reached out to some of our Polygon team members to learn a bit more about the effort and process from design to development to testing for this great new feature. I asked developer Jake Lear, support manager Cory Williams, and designer Tyson Whiting a few questions, and their responses give a great insight into working on Vox Product.
What was the overall process from getting the video browser from thought to on the site?
Jake Lear: For Polygon in 2013, one of the things that the editorial team wants to focus on is highlighting the incredible content that our video team puts out. Polygon is rapidly ramping up video reviews, as well as video series such as “Today I Played” — getting these videos in front of more users is top priority.
The product team took that requirement (among others) and began thinking about solutions. Eventually, we will build a full scale video hub for Polygon as a place users can look to find all of the amazing video content, but as a short term solution, we came up with the idea of a compact video browser that could feature many videos in a low-impact way on the homepage.
After we established that idea, we cut Tyson loose on what would be his first major feature as a Polygon designer. Over the course of a few days, he developed a visual design with feedback from creative director Ted Irvine and designer Warren Schultheis. After a few rounds of feedback from the editorial team, we reached a design that everyone was happy with and started the development.
Tyson Whiting: The team and I spent a lot of time really thinking about the functionality; The functionality ultimately ended up driving design. We talked a lot about what makes a good video player, what makes a bad one, and what makes a confusing one. We wanted something that was easy to navigate and simple. “Here watch a sweet video” … ‘nuff said. I did sketches ‘til my fingers were bloody and eventually convinced myself I had an idea that met the criteria and could potentially look really badass.
Then we moved onto actually getting Polygon’s content in there and started moving things around. Things would start to look pretty good, and then I would show Jake, DZ [David Zhou] or Warren a mock or two and they would tell me I’m crazy. I would tweak a few things and share mocks again. There were a lot of rounds of making sure the functionality was fluid, or that it met the look and feel of Polygon’s brand. From a design standpoint I wanted to really make something that was special to Polygon. I utilized that corner notch and color overlays to make a video player that you’ll never find anywhere else. It was a blast to work on, and people really seem to enjoy it.
How did you ensure that the design was reproduced on the site as closely as possible and were there any major obstacles to that goal?
JL: We have a fairly robust visual library on Polygon that allows us to quickly develop new features without worrying too much about betraying the soul of the site’s visual design. Tyson, Ted, and Warren worked tirelessly to ensure that the visual design fit successfully into the Polygon aesthetic, and we wanted to give that effort the respect it deserved in the development of the feature.
Tyson and I worked closely together during development, reproducing the design as closely as possible. During the design phase, Tyson had not fully explored how the video browser would respond at smaller browser sizes, such as tablets and mobile, so together we fleshed out ideas in markup and CSS to make the feature fully responsive.
What is the most interesting part of the video browser from a design standpoint? A technical standpoint?
Cory Williams: I think that creating a brand new addition to the front page of your site is a rare opportunity. Tyson and the design team were able to create a look that fit naturally into the Polygon front page, while standing out as a fresh new piece of the Poly puzzle.
From a technical standpoint, we had to figure out the best way to curate the content that feeds into the browser, which came with its own challenges. Fortunately, we were able to overcome the issues and deliver a quality product.
JL: Shortly before the Polygon team launched the video browser, The Verge team implemented the concept of video channels into our modern media stack, Chorus. It turned out to be the perfect tool for driving Polygon’s video browser.
This collaboration is a perfect example of the benefits of having a custom media stack driving our networks. The product team is broken up into small vertical-specific teams, but there are often times like this where one team can leverage the efforts and features that another is building. Additionally, developer and drink enthusiast Dusty Matthews had, just weeks before, completely overhauled the video pipeline within Chorus, allowing us to much more easily implement quick loading of all the videos without needing to have dozens of flash (or HTML5) players on the page at one time.
TW: I think one of the coolest parts of the design is that it acts as one cohesive unit. There aren’t really a lot of players out there that play this well with their video library. The relationship between the video that is playing and other video to watch on the left is a good balance, which looks great. Also the responsiveness of the player is awesome.
What was the testing process like for this project?
CW: I grabbed every device available to me and set down to work on a sandbox environment of Polygon. After populating the video browser with content, I began by playing with it in Chrome on my MacBook. You check to make sure videos play without crashing, that clicking another video seamlessly works, that hover states are consistent, and that the carousel arrows work.
After that, I tried other browsers, including Safari and Firefox, all the while logging weird bugs in FogBugz for Jake to fix. From there, it’s onto a Windows 7 PC, where Internet Explorer awaits, like Shredder at the end of the original Teenage Mutant Ninja Turtles arcade game.
Of course, you also want to ensure that tablet experience is up to scratch - that’s why a Nexus 7 and an iPad are you best friends for testing. Fortunately, David and Jake did a great job of developing the browser so there were not too many bugs to iron out.
In the end, the final result turned out great! Check out the final version on the front page of Polygon.
We’re building great things, and we need your talent! Check out jobs.voxmedia.com for our current job listings.