Vox Product

Polygon's new article page is live!

gifrap — Thu, 23 May 2013 16:32:00 -0400

The Polygon product team spent the last two months building a new article experience that utilizes PJAX, keyboard navigation, along with many other bells and whistles.

We’ll have a lot more on the Polygon article redesign in the next week or two, but for now, go ahead and check it out for yourself! There’s a write-up of what the article page offers at Polygon.

Introducing Google+ integration into Chorus, SB Nation, Polygon, and The Verge

glowj — Tue, 14 May 2013 19:48:14 -0400

Vox Media is excited to announce that we have worked closely with Google to integrate Google+ into Chorus and across all of our properties — SB Nation, The Verge, and Polygon — in several different ways.

First, new users to any of our 300+ brands will be able to create a new account using Google+ to authenticate. This makes it quick, safe, and secure to sign-in and start interacting with the community. On both the iOS and Android apps for The Verge, users can also sign-up for an account using Google+ as an authentication option.

If you already have an account on one of our properties, you can easily associate your Google+ accounts with your existing Chorus account by visiting your Account Settings page.

Once you’re authenticated with Google+, no matter which Vox Media site you’re on, you will have the option to quickly share a story (including FanPosts, FanShots, and Forum Posts) with your circles of friends using Google+. Look for the Google+ Share button.

Finally, new users that sign up for an account on The Verge using Google+ authentication will get a special feature. If they’ve previously registered an Android device with Google, during the sign-up process on The Verge, they will be prompted to install The Verge’s Android app over-the-air with the click of a button. Pretty cool.

From the very beginning we have provided our users with choices about how they signup and sign-in to our sites by offering the ability to signup with OpenID, Yahoo and then Facebook. Adding Google+ is another high quality authentication option that we’re excited to introduce to the platform. We’ve been impressed by how Google+ is being developed not only as a destination but a broad communication layer across the Google ecosystem. This evolution of Google+ provides opportunities for strong integration with Chorus for an improved user experience across all our sites.

This is just the first wave of Google+ integration, and you can expect it to deepen over time.

We’re excited to have been invited by Google to participate in the Google+ Developer Sandbox at Google I/O, their annual developer conference in San Francisco. Along with a wide-range of other companies who have worked closely with Google, we’ll be showing developers what we’ve built and answering questions about how we approached our implementation. Stop by and say hello if you’re attending this year. Each day of the conference we’ll be highlighting the Google+ implementation of one of our properties - The Verge on Wednesday, SB Nation on Thursday and Polygon on Friday.

Vox Media DC relocation: remembering the old office

gifrap — Fri, 03 May 2013 10:59:00 -0400

Vox Media is moving into a new office space in Washington DC, leaving behind a humble rowhouse in Dupont Circle (Editor’s note: you can catch glimpses of the space in episode 2 and episode 9 of Polygon’s Press Reset series).

The vast majority of the product team have had their Vox experience shaped by the time they’ve spent in the place we’re about to depart, and we asked our coworkers for their thoughts on the beloved office.

When reached for comment on the final days of the fabled workspace, Chief Product Officer Trei Brundrett mused, “can I just send you my tears?”

Senior front-end engineer Dan Chilton remarked, “I’m going to miss the ol’ girl. With her nooks and crannies; her yesteryear elegance and charm; her thin-walled unisex bathrooms. But then again, what do I care? I work from home!” Even all the way in Missouri, we can tell he truly cares.

“I’m definitely going to miss the current office,” product manager Niv Shah added. “It had a lot of character.”
Do you see the Fathead of our CEO, Jim Bankoff, on the wall above?

Trei fondly reminisced about “Tiger Room”, the original workspace for the product team when Vox Media relocated to the rowhouse in 2009.

“We called it the tiger room because there was no door, and so I ordered a bamboo-beaded curtain,” Brundrett said. “I selected one with a white tiger because they are sports elegant.”

Jokes aside, Tiger Room was where the product team developed SBNation.com, paving the way for several huge breakthroughs in the company’s history, including the launch of both The Verge and Polygon as new verticals to complement the flourishing sports network.
The original usage of the “Tiger Room” name back in 2009 during SBNation.com development sessions.

“It makes sense that our office is a townhouse because in so many ways it felt like home for those of us who worked here over the years,” said product manager Chris Haines.

“It’s a beautiful building,” remote designer Warren Schultheis opined. “The first time I visited, it seemed like the whole company could fit in the conference room.”

When Vox moved in, there were only six employees on the product team. Four years later, there are 41. Who knows what the next four years will bring?

Society for News Design on Vox Process

triangleporn — Wed, 01 May 2013 15:48:59 -0400

The process, which was hugely collaborative, included writers, designers and developers. “We have a flat organization, and we find that building great products absolutely requires cross-team collaboration,” he said.

An excerpt from a recent piece on SND.org featuring our Director of UX (and Vox old-timer), Ryan Gantz. Read the whole thing here.

Jim Bankoff, our intrepid CEO, just announced the newest...

bjork24 — Mon, 29 Apr 2013 13:12:00 -0400

Jim Bankoff, our intrepid CEO, just announced the newest addition to our Vox family: Vox Creative. Check out the teaser trailer above, or read TechCrunch’s full write-up on Jim’s speech today at TCDisrupt.

What’s on your desk? - Episode 6: Chao Li, Support Manager of The Verge

pandapaws20 — Thu, 11 Apr 2013 14:38:00 -0400

At the old Verge offices, not all of us had desks— or chairs for that matter. I’m happy to report that in our new office, not only do we all have our own desks, the product team even has our own room!

On my desk, I have a monitor propped up by an empty hard drive box. Please excuse the tape, it didn’t quite make it back from CES in the best shape. I think it adds character.

Resting on my monitor is a Pokemon toy I got from McDonalds. Oshawatt the otter Pokemon is always smiling and it makes me happy. I know that a lot of the DC bros have bobbleheads. I have my little wobbly Oshawatt.

For my computer, I use a 13-inch MacBook Air propped up on a Rain Design Stand. I choose this computer because I’m more comfortable with the Mac operating system. I love the portability of the Air, and how fast the SSD is. It’s a great on-the-go machine. Not shown: a Lenovo Yoga 13-inch running Windows 8 for quality assurance work on The Verge.

My headphones are by V-Moda. I’ve been exclusively using V-Moda since 2007. I love all the different models of headphones they make. The one shown on my desk is the V-Moda M100s. I also have a pair of M80s with custom plates.

I charge all of my devices at work—including my special Pikachu edition Nintendo 3DS XL.

My iPhone 5 was stolen 3 days ago, so now I’m getting by with a loaner phone. Because of my line of work, I also have a Samsung SIII, a Blackberry Z10, a Nokia Lumia 920, and a Droid Razr M.

Being a journalism nerd, I’m really into my pens and notebooks. I have an Action Book that I use to manually track our editorial features and long term projects. I have a to-do style notebook from Muji that helps me with my day-to-day task tracking. I also have 2 Rhodia notebooks that I use to take meeting notes. I also use a Post-it system to enhance my Action Book. I love orange post-its and the special Shiba-Inu stickies from Muji. I love pens made by Sharpie. The ones with the silver caps are my favorite pens.

Also on my desk, I have a giant bottle of seltzer. At the new office, we treated ourselves to a seltzer machine because it was going to be a lot cheaper than the amount of canned seltzers we drank per month.

Because we just moved in, there is still a lot of potential for decorating my desk. My desk neighbor Scott Kellum and I are looking into purchasing a cat-a-day calendar to share. I’d love to get some posters or comic panels to tape up at my desk but I haven’t found anything amazing yet.

Building The Polygon Video Player

nivshah — Fri, 29 Mar 2013 11:29:00 -0400

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.

Vox Pawduct Team, Part Two: Cats, Dogs and a Bird

gifrap — Thu, 21 Mar 2013 11:17:00 -0400

We came at you with a bunch of dogs in December. Check out what the cat dragged in this month.

Scott Kellum, Designer
Name: Mr. Pickles
What kind of animal is this?!: Cat?!
Age: 4
Location: Brooklyn, NY
Fake Job Title: Seat warmer (he is passionate about his job, if you get up he will take your seat)
Favorite Memory: At the adoption show he was under the table refusing to leave his carrier. When we got him home and he finally left his carrier he purred continuously for hours and wouldn’t let us stop petting him.

Constance Watkins, Designer
Name: Sir Tiberius Rex of Birdington, aka Rex
What kind of animal is this?!: Bird! (Cockatiel)
Age: 3
Location: New York, NY
Fake Job Title: CFO (Chief Feather Officer)
Favorite Memory: Moving Rex to Manhattan was an adventure. At one point during the trip I was on the subway with him and had someone ask me, “But what does he do?! What does he eat?!” Answer: Bird stuff, and bird food (respectively).

Guillermo Esteves, Developer
Name: George
What kind of animal is this?!: Cat (Felis Catus)
Age: 14
Location: Washington, DC
Fake Job Title: Curmudgeon in Chief
Favorite Memory: He runs into things while chasing the red laser dot. It is quite amusing.

Jesse Young, Developer
Name: Hanna
What kind of animal is this?!: Cat
Age: 8
Location: San Diego, CA
Fake Job Title: CFO (Chief Fluffy Officer)
Favorite Memory: Exposing her belly and purring is her natural state.

Jake Lear, Developer
Name: Gracie
Breed: English Springer Spaniel
Age: 13
Location: Paris, VA
Job Title: Vice President of Snuggle Division
Favorite Memory: All of them

Names: Samson and Delilah
Breed: Great(est) Danes
Age: 3
Location: Paris, VA
Job Title: Security Detail
Favorite Memory: When they were smaller than Gracie

Joe Grossberg, Developer
Names: Miju and Peeps
Breeds: Domestic longhair, domestic shorthair
Ages: 13, 14
Job Title: Existential philosophers
Location: Boston, MA (but Washingtonians at heart)
Memory: How they helped me win over my wife; nice assist, guys.

Ted Irvine, Director of Design
Name: Noche!
Breed: Boston Terrier
Age: 7 years old
Job Title: Company therapist
Location: Arlington, VA
Favorite memory: Best dog to have a hangover with

How Vox Media Product Gets Shit Done

glowj — Tue, 12 Mar 2013 10:50:00 -0400

Not too long ago, the product team at Vox Media was a single, small group of folks collaboratively doing all the things. Today our situation is much different. In the last year alone the product team has grown by nearly 200%, and even 18 months ago both The Verge and Polygon were just twinkles in our eyes. Since then, we’ve launched both sites successfully, and gone through a major redesign and rebrand of SB Nation and its 311 communities. We’ve had to quickly adjust and scale our operation in order to meet the demands of a growing company with many concurrent projects across many teams.

Today we find ourselves nearly 40 people deep, including developers, designers, operations engineers, support, product management, and interns. Those 40 people (and growing) are broken up into six cross-functional teams: one for each of our core brands — SB Nation (which itself is broken up into over 300 individual brands), The Verge, and Polygon — along with a platform team to focus on Chorus (our modern media stack), a (technical) operations team, and an advertising products team. Each one of these teams has resources dedicated to help them achieve their goals, keep the sites running smoothly, and innovate with new features.

Even though we’re organized as separate teams, each is deeply collaborative with one another. Not only is it in our DNA to be this way, it’s an essential requirement as we all share the same platform, and things developed on one of our brands is often rolled out to others as they become available.

To keep things running smoothly in this type of environment, using the right tools is important. Over the years we have tried a number of them: FogBugz, Trello, Agile Zen, Sprintly, Scrummage, BugWire (our first Rails project ever, circa 2004), Google Docs, and likely many others lost from recent memory.

How we came about using (and creating) the tools we settled on and use today has been an organic process; over the last several years we have spent time evaluating and discarding various softwares, taking note of things we like and dislike from each. In the end we found ourselves using a combination of both Trello and FogBugz, along with Beacon — a custom tool we created to organize our sprints, bug queue and production deploys.

Trello for product management

Trello is where ideas begin and grow. Often the best ideas are imagined and brainstormed while not in front of project management software — a conversation might happen while passing someone in the hall, or during a happy hour, over instant message or email. Trello makes it easy to get those ideas into a backlog and keep them organized and prioritized without much effort.

Further, ideas are rarely fully fleshed out at inception — they take time to incubate and grow to become the polished features they are when they hit production. Trello is where those ideas are built upon collaboratively, with stakeholders of all kinds adding to the requirements, brainstorming concepts, attaching wireframes, and helping to bring the idea to fruition.

Most importantly, Trello is easy to use and understand. It’s not a complex bug tracker or sprint planner. It’s interface is logical and simple to modify.

Our structure is pretty simple: we have a product-related Trello board for each one of our teams. Trello is fluid enough to let each team use their own lane structure and workflow for requirements gathering and prioritization. In a world with wildly different editorial teams, forcing everyone to use the same rigid structure for product management would be difficult. Trello let’s us organize ourselves in specific ways that are important to each individual team.

We don’t do project management in Trello, however. That is, when something is ready to be worked on by a designer or a developer, our product managers take the cards from Trello and write out user stories and tasks in FogBugz for development.

Fogbugz for project management and bug tracking

FogBugz is where shit gets done.

Why not use Trello to track the project development as well? We switch to FogBugz as it allows us to group user stories and tasks into explicit objects which can be assigned to individuals and milestones. These user stories have tasks that can be given independent status updates and tracked — something Trello doesn’t do with as much granularity or with a fixed workflow. Even though Trello has a variation of many of these features, any project of notable size or complexity can get messy in the lane and card-based system that makes it so easy to use in other cases. Out of all the tools we’ve used over time FogBugz made the most sense for large projects or otherwise intricate sprint work.

FogBugz also makes it easier to organize our particular project methodology. Generally speaking, we begin large projects by writing epic user stories to communicate the big picture, which are then broken up into smaller, discrete chunks of work. Those smaller chunks are further diced into individual tasks and taken up in priority order. While it would be possible to handle this workflow in Trello, our attempts at staging the work there have been messier and harder to organize than FogBugz.

Finally, we use FogBugz to track bugs and handle our incoming support queue — something Trello isn’t really designed to handle. Bugs come in through email and are handled by our support managers, who communicate back to the submitter and eventually file it away into the appropriate queue to be squashed.

As powerful as FogBugz is, it’s not all roses and unicorns. Its biggest negative (and, I suppose, positive) is its complexity. (For example, Fog Creek offers FogBugz training for $250 an hour.) It’s built to manage large, complicated projects (and track bugs!) and it’s not well suited for communicating the status of a project to people who aren’t a part of the product team. In fact, we found FogBugz so unfriendly in that respect that we decided to spend time building a friendly layer above FogBugz that (among other thing) simplifies the interface and gives a stakeholder a big picture view of what all teams are working on without having to dive into the intricacies of FogBugz. Enter Beacon.

Beacon for transparency and organization

Beacon is a custom internal tool (built at VAX ‘13 by our Director of Engineering, Michael Lovitt, and myself) that serves many purposes.

First, it’s integrated with the FogBugz API to provide insight into all past, present, and future sprints across all of our teams at Vox. It lets the stakeholder get a glimpse of what each team is currently working on, what the overall progress of each sprint is, how many tasks remain, and when it will be released into production — all without needing to dive into FogBugz.

Second, it’s a deploy scheduler. Our developers use it to schedule deploys to production, associate deploys with sprints, and otherwise stay organized when there are five teams deploying hundreds of lines of code to the same application every day. (In the future, we very well may use it to actually deploy, but for now that’s done via Capistrano at the command line.)

Finally, it’s bug tracker. All of our support requests for each of our properties (from both external users and internal staff) land in FogBugz, where they’re dealt with by our support managers. If the incoming request is indeed a bug that needs to be fixed, it gets filtered into the appropriate FogBugz milestone, which Beacon is configured to associate with the proper site. So our staff is able to check and make sure bugs they have submitted are either in the queue to be fixed, or that they’ve already been fixed and are either waiting to be deployed or already in production — all without logging into FogBugz.

This is what we use today, but who knows what the future holds. As we continue to grow and refine our processes, it’s likely our tools will evolve as well.

VAX '13 Documentary covers Vox Media's hackathon in Texas

gifrap — Wed, 06 Mar 2013 12:49:00 -0500

VAX ‘13 wrapped up two weeks ago on a sunny Friday afternoon in Austin, Texas, and our product team presented their proof-of-concept work in front of the entire company.

In a Google Hangout, editorial and sales staff from across the country watched as over a dozen exciting new projects were presented in two hours. Niv Shah and I spent those days following our coworkers around, filming their hard work and developing a documentary chronicling the process.

Now, it’s your turn to see how the projects that the Vox Media product team worked on during VAX turned out. Click play to begin!

We’re building great things, and we need your talent! Check out jobs.voxmedia.com for our current job listings.

VAX '13: Photos!

nivshah — Fri, 22 Feb 2013 20:08:00 -0500

Our first ever VAX wrapped up today, and we will recap it early next week (with video!), but for now you should check out some recent photos on our team’s flickr!

Well, that’s enough for today. Off to eat some more brisket on our final night in Texas.

VAX Day Two: Projects evolve as hack week in Texas continues

gifrap — Fri, 22 Feb 2013 11:24:39 -0500

The crew worked late into the night Wednesday, eager to push themselves as far as they could go in search of VAX greatness. Lone Star Beer once again poured freely for the developers and designers of the Vox Media product team.

As Thursday morning dawned on Austin, the team returned to our temporary office space. Everyone was ready to pick up where they left off on Wednesday night, transitioning ideas off of whiteboards and onto computer screens.

Where Wednesday was cloudy and cool, Thursday proved to be sunny and warm. The office space came equipped with a great patio, and the 20th floor view of the Austin cityscape proved hard to ignore, even with a brisk wind coming over the balcony wall.

By lunchtime, we had worked up an appetite, and our office manager, Thomas, made sure we were well fed with pizzas from Austin’s Pizza. The fridge was fully stocked with sodas and water, and coffee brewed all day long.

With the sun shining through the windows, projects began to take shape. Binder’s developers were focused on the user experience of their wiki project, while team designer Warren mocked up several logo options for the internal tool.

Polyphone, David’s Polygon iOS app project, was well on its way to becoming a full-featured experience: not only were Polygon logos placed throughout the app on loading screens and menus, but Polygon articles were filtering through into the main interface.

The Polygon digital magazine was also finding its form: the core group of designers were quickly becoming experts in Mag+, honing their craft and adding layers of functionality to the digital magazine’s user experience as their skillset grew.

Providence, a traffic analysis tool, was on its way to delivering real-time data to stakeholders and focused blog managers. Beacon, a top-down view of the product team’s workflow, had come a whole lot closer to being the ultimate resource for at-a-glance information about day-to-day progress on bug reports, sprint work and deploys. All the other projects continued to evolve in preparation for Friday afternoon’s big reveal.

As day turned to dusk, VAXers turned their attention to the skyline: a magnificent sunset reflected off the clouds, showcasing brilliant hues of orange and pink. With nightfall came a resurgence of activity, and the product team continued to labor late into the dark. Games of Tetris and ping-pong offered a brief break from the hard work, while bourbon and beer were sipped from plastic cups.

If there’s one thing to eat while in Texas, it’s barbecue. An order was placed with Dickey’s Barbecue Pit, and Thursday’s dinner did not disappoint — a full spread of pulled pork, brisket and sausage provided a tasty main course, while delicious sides of mac and cheese, baked beans and potato salad were piled high on the edges of every plate. There was no such thing as a single helping, as the crowd picked away at the remaining assortment of meats and sides as the evening wore on.

With little over 19 hours to go before the teams unveiled their proof of concepts and works in progress, plenty had been accomplished. Apps were functioning on simulators, rails applications were evolving, and user interfaces were being fine-tuned. VAX was pushing forward at full speed, and there was no signs of slowing down for the product team entering the final day of VAX ‘13.

VAX Day One: The Vox product team defines their goals and gets to work

nivshah — Thu, 21 Feb 2013 12:24:26 -0500

We had great night of team bonding on Tuesday, and by Wednesday the Vox Media product team was ready to kick off VAX ‘13 and start hacking.

After a few breakfast taco expeditions to soak up the mistakes of the night before, we gathered at our hackspace on 9th Street in downtown Austin. Our VP of Product, Trei Brundrett, gave a brief keynote to kick things off, and the newly-formed teams hit the ground running on their projects.

The VoxCar team quickly claimed the Tarrytown conference room. The All-Seeing Eye team gathered along the windows facing north towards the University of Texas campus. The main room was filled with the rest of the teams huddling around a table or two. VAX had begun!

A few of the teams had planned out the early stages of their projects already and progressed quickly into the execution phases. Featherbottom, a team working towards streamlining the photography process at live events for our editorial teams, was soon showing off instantaneously watermarked photos.

The Polygon iOS app team had already developed a gorgeous navigation menu prototype. Beacon, an internal planning tool, was deep into back end implementation, as was VoxMox, a project automating advertising and sales mocks.

Some of the other projects ran into early hiccups. The team building a web magazine version of Polygon found that the majority of the team needed to upgrade to Mountain Lion due to compatibility issues, which ended up being a bit of a timesink. The All-Seeing Eye ran into a similar issue, needing both recent site data and Mountain Lion upgrades.

VoxCar, the all-encompassing company documentation project, was still in early planning, and the seven-person team discussed feature requirements, product vision, and technology choices during their morning meeting. Progress was swift, and by the end of the day the team already had a rails app spun up on Heroku. They had also renamed; they are now Binder — a tool for storing information and binding our far-flung team together.

Of course, it wasn’t all business on the first day of VAX. The ping-pong table provided some much needed breaks. The NES saw a lot of action, though Tetris wound up being more stressful than relaxing for some team members. The early afternoon provided a few opportunities to sample some of Austin’s great coffee shops. Later into the evening, dinner and beer were acquired and the GameCube’s four player mode came in handy.

Some of the team went on a field trip to Sanctuary Print Shop in the afternoon. They got the opportunity to check out how the shop operates and were able to grab some swag to take home. The group of travelers also came back bearing gifts: official VAX ‘13 t-shirts!

By the end of the day, everyone was well on their way to achieving their VAX goals. The Mountain Lion upgrades went well, new data was fetched, and projects were properly defined. Thursday has shaped up to be wall-to-wall hacking, and the product team is excited to see their products evolve and take shape on day two of VAX ‘13.

VAX '13: Vox Media product team's first hack week, in Austin, Texas

gifrap — Wed, 20 Feb 2013 13:24:00 -0500

The Vox Media product team is always coming up with ideas for smaller projects that do not necessarily fit into our regular sprints. Our backlog for these projects has been growing steadily, and a couple of enterprising team members decided it was time for a hack conference. V(ox) (H)AX was born!

VAX is a three-day hackathon that starts today, Wednesday, February 20 and wraps up on Friday, February 22. The ideas being worked on at VAX are forward-thinking and full of creativity. During normal development cycles, the product team focuses on projects that are prioritized by company needs. At VAX, the scales are tipped, and the product team has full creative control.

36 Vox employees have descended on Austin, Texas for an epic week of product development — the team will dig into their creative sides and produce new products that will allow Vox Media to carry out its mission as an innovator in the digital media landscape.

Over the past several weeks, product team members have developed their ideas, divided into groups and committed to conquering new goals together. Skill sets will be developed, talents will shine and barbecue will be consumed.

While Austin is sunny and beautiful this time of year, this isn’t a vacation. The product team has dedicated themselves to long days locked into a rented office space. There will also be plenty of team bonding: VAXers have planned morning jogs, and a Nintendo Entertainment System was shipped across state lines for late-night Tetris battles.

Prior to attending VAX, the teams that were assembled each submitted a list of objectives that they wanted to achieve on their projects. After three days of hacking, each dev group will showcase their product to the rest of the team in a five minute presentation. By the time the product team heads home, many ambitions will have become reality.

The team began arriving in Austin yesterday, coming in from all directions. Employees from Santa Barbara, Boston, New York City and Missouri got to the Texas capital and reunited with the DC-based product crew.

The crowd got their bearings at our downtown hotel before heading out and experiencing some destinations on 6th Street. Street food was devoured and delicious Lone Star Beer was imbibed.

Today, the hard work began. Here are some examples of VAX projects being developed this week:

VoxCar: The team building VoxCar has stated that the project’s goal is to “share knowledge, build shared experience, and make things easier across the company.” It’s important for a company to retain its cultural roots and provide a way for the team to remain close while being a part of a rapidly growing company. It’s not a Wiki, but it is a place for knowledge retention and the enrichment of our team’s collective intellect on all things Vox.

Beacon: A window into the product team from the top down. “Beacon is an internal tool to monitor projects and sprints and deploys across teams at Vox Media,” product manager Justin Glow said. “It’s a tool to create transparency,” added VP of Product Trei Brundrett. In a convenient view, all product team work (past, present and future) will be accessible to stakeholders for a variety of uses, including helping prioritize development work.

It’s a TRAP—-ezoid! The Polygon Digital Magazine: “We want to come out of VAX with a clear process for production of a digital magazine,” designers James Chae and Tyson Whiting said. The designers are using Mag+, which is very designer-friendly. To limit the scope of their exercise, they are developing the magazine for the iPad while at VAX.
Streamline Features Team: “A user-friendly visual design interface for building features,” designer Josh Laincz said. “Because of our limited time, we’re trying to get a road map, wireframes and hopefully some visual mockups. The goal is to have a concrete idea and mocks by the time we’re done.”

Working title — Featherbottom: “We’re building a tool to get photos from a camera to the internet without wires.” The goal is to create an unmatched experience for liveblogging. To take photographs from camera to computer, apply a watermark and upload them to Syllabus, Vox Media’s liveblog tool, in one automatic step — all wirelessly and instantaneously.

VoxMox: “We’re working on an internal app to help our sales process,” developer and Austin citizen Ben Alt said. “For smaller sized ad campaigns, we will alleviate the pressure on our designers. VoxMox will give account managers the ability to create comps without going through a designer.”
All Seeing Eye: “We’re building out a real-time traffic analytics platform. We have a mishmash of existing analytics stuff, but nothing that is comprehensive across all our properties,” developer and Michigan alum Clif Reeder said. “The main selling point to me is that we’re baking in different contexts. There’s a lot of different ways of thinking about our chunks of traffic.”

The Vox Media product blog will be reporting daily from VAX, monitoring the development of the various projects and sharing with the world how many food truck tacos have been consumed by the product team (as of today, it’s roughly 45).

Representing the Product Team at CES 2013

pandapaws20 — Tue, 12 Feb 2013 13:01:00 -0500

Photo by Guillermo Esteves

After a 10-hour trip from New York to California then to Las Vegas, I was looking forward to two things— a double-double from In-N-Out, and eating it disgustingly on my hotel bed. These wonderful dreams quickly dissipated as my cell phone service came on.

My name is Chao Li, and I’m the Support Manager for The Verge. I answer all the support emails, monitor the Verge support twitter account, and I’m responsible for communicating and helping with site feature additions, changes, and fixes. When something breaks, I’m in the first line of defense — except this time, I was in the sky with no WiFi. It turned out that Chorus, Vox Media’s modern media stack, was acting up and it was taking an extra long time to publish articles. This was not the way we wanted to start CES.

Photo by Guillermo Esteves

I stepped into the double-wide Verge trailer that I’d spend at least 12 hours in every day for the next week at around 8pm. With hardly any time to say hello to the editorial team, I quickly ran into the product room — where I was greeted by a calm James Chae, one of the designers of The Verge features, and an exhausted-looking Guillermo Esteves, the magician that people refer to as The Verge’s front-end developer.

“It’s fine now, but I have so much to fill you in on,” Guillermo smirked as he looked up from his monitor.

CES, the Consumer Electronic Show, had started that day with some pre-CES meetings and events but the exciting stuff was still to come. Guillermo, James and I were chosen to represent the product team at CES. We were supported by an army of developers, designers, and operations friends from across the country.

For 7 days we woke up at 6:30am or 7am, got to the Verge press trailer by 8am and worked until midnight or 1 am. Coffee, bagel, 2nd coffee— I ate the same things as if it brought me luck.

Photo by Nilay Patel

For CES, we rolled out a video player for the front page and the CES hub along with some other small changes. We were there to help the editorial and video staff navigate through all the new features. Guillermo Esteves built the features and fixed the problems behind the scenes. For example, when we first launched the CES hub, it had a scrolling carousel for new products. After a few days, there were so many new products coming out that the carousel became heavy and it took a toll on the load time of our site. Guillermo came up with a solution to take out the carousel and make the ‘more’ arrow into a link to that particular story stream’s landing page instead. Within an hour, we had a new and improved module on our site.

Photo by Sam Byford

On the second day, our slow server problem returned. During CES, we were doubling and tripling the amount of posts that we normally do while handling a spike in traffic at the same time.

During stressful times, people were depending on us to stay cool and to come up with speedy and reliable solutions.

Guillermo partnered with our DC friends to come up with a solution while I took care of communication and tried to come up with other work arounds. A solution finally came, we didn’t know if it’d work. At the last minute, there was an error in the code. “They’re gonna bury us in the desert.” Guillermo half-heartedly joked. Things were tense in the trailer. The issue was fixed an hour later but it was one of the worst hours to sit through. At moments like this, you really find out if you’re cut out for this job. We celebrate the victories and learn from the challenges.

After 3 straight days at the trailer, Guillermo and I stepped out onto the show floor as a treat for ourselves. This place was huge. Guillermo drooled over the tower of Nikon lenses. While I wanted to buy out the entire Hello Kitty booth. We failed to finish central hall in 1 hour.

Photos by Chao Li and Guillermo Esteves

It had been a slow day, Guillermo — who still had serious insomnia, took off to work from the hotel. Around 10 P.M., about the time I started to look at cat pictures, our site stopped loading. Guillermo rushed back to the trailer and we were in emergency mode. The developers on call were woken up from coast to coast. After 30 min of our hearts pounding, we found a solution. Tired but feeling great, we closed the lids to our computers and called it a day while Ke$ha blasted in the newsroom of our trailer on repeat.

Around day 4, people began to get sick — real sick. TC Sottek, one our writers, was out of commission for 2 days. Late night on that second day, he ended up going to the hospital for a very bad flu. Others coughed, sneezed, and covered themselves in Purell.

That night, James Chae introduced me, Guillermo, Michael Shane, Ross Miller, Thomas Houston and Paul Miller to some amazing Hawaiian food. We all started off quiet at the table, most of us hadn’t slept for more than 5 hours a night for 3 or 4 days straight, and some were still sick. As we stuffed our faces with take out containers of meat, gravy, spam and rice, we became revitalized. As soon as things began to feel calm for the first time in a couple of days in the conference room of our hotel, our phones began to beep and shake. Paul and Michael had to go prep for the Vergecast, Thomas had to get back to work, James ran off to finish a layout, and Guillermo, who had the hardest time adjusting to Pacific Time, went to work from his room.

Photo by Guillermo Esteves

The rest of the work week quietly passed us. We started to have more time to go out later at night. James got sick on the last day. We worked until the electricity and internet was cut off in our news trailer. For the first time in a long time, we left work while the sun was still up.

Photo by Sam Byford

This was the first CES that Guillermo and I have ever attended. We had no idea what to expect. I’d been with the Verge for less than a month, and Guillermo had been a developer for Vox Media for less than a year. James Chae was the only CES veteran out of the 3 of us.

I think Guillermo put it the best when I asked him to wrap up his feelings about CES.

“It was a long, stressful, but ultimately fun week. I’d do it again in a heartbeat.”

Photo by Guillermo Esteves

Song of CES: Warrior by Ke$ha

Best meal: Hamburger Steak (Hawaiian food)

Best end to CES: 90 Seconds on The Verge: the best of CES, Samsung’s RT choice, and skyfall

For more behind the scene pictures of the Verge at CES see our photo essay!

SB Nation's Super Bowl Sunday comments map

starvingprogrammer — Thu, 07 Feb 2013 13:47:00 -0500

As you may have heard, the Super Bowl was this past Sunday. Apparently, this is kind of a big deal for sportsball fans, and thus, the SB Nation network. It’s usually one of our biggest traffic days of the year, so there is a lot of excitement/paranoia around it from the Product Team. While we were talking about all the things going on and what might happen, I had the thought that it would be cool to see a map of all the comments on our network during the game - so I made one.

In the video, comments from our Ravens community, Baltimore Beatdown are shown in purple, and comments from our 49ers community, Niners Nation are shown in red. Comments from any other community are shown in green. When there is a lot of comment activity in one area, the dots start drawing on top of each other and it’s more of dark colored blob than a colorful dot.

Between 4PM and midnight EST, we had 49,632 comments created on the SBN network. It is worth noting that only 35,861 of those are actually mapped here, since for some comments I was unable to determine location, they were not in the US, or I was already mapping something at that exact location in the same minute. Not surprisingly, most activity comes from major population centers, so it’s hard to tell who exactly they are rooting for.

The technical details of how this was made are a bit hacky, since this was just a fun side project. D3.js provides the backbone of this visualization. It was my first time using it, and I found it to be relatively straightforward and powerful. I opted to use d3.js rather than something like Processing (or Processing.js) because it has crazy easy mapping and geography support.

The data for the visualization was put together using a combination of SQL to get comment timestamps and IP addresses (which we store for every comment) from Chorus, Awk to format the result, and the geoip gem to approximate the latitude and longitude based on IP.

Unfortunately, the animation isn’t really as smooth as I hoped. I think this is partially my inexperience with D3 and SVG drawing, and partially that JavaScript isn’t the best way to animate 45,000 points. In general, I found that reducing the number of SVG path elements greatly helped the rendering. I started off rending just one MultiPoint path, but split it into many Points so that I could animate them separately. This brought rendering to a total standstill, so I started segmenting comments into buckets so that ones that would be drawn at the same time would be one MultiPoint object, and thus one path element. This helped rendering significantly. Each bucket is further divided into three MultiPoints so that they can be color coded according to community, which unfortunately made rendering a bit slower again, but the trade off seemed worthwhile.

If you want to try and run the animation yourself, the code is available here, but be warned that it runs even worse piggybacking off blocks/GitHub than it does served locally.

We’re building great things, and we need your talent! Check out jobs.voxmedia.com for our current job listings.

Vox Media's design interns, redesigning the way you see the web

gifrap — Thu, 31 Jan 2013 11:01:00 -0500

We’re hiring a Polygon Editorial Design Intern right now! Get your application in today.

The Vox product team has grown quite a bit over the years, and with growth comes a great opportunity for local college students to hone their skills through our internship program. Our design team in particular has taken advantage of the vibrant, talented students in the Washington, DC area. Vox Media is always on the lookout for talented college students to join our team and help us build the next generation of Vox products.

We asked five of our DC-based design interns to tell us about their experience since joining Vox Media. Three of them, Ally Palanzi, Kelsey Scherer and Katharine Molloy, have been with the company for many months and have learned a lot along the way.

Ally Palanzi, American University

Seeing as most internships sound pretty unglamorous, I wasn’t really sure what to expect before arriving at Vox Media in May. I didn’t know if I would be getting first hand design experience or if I would be stuck with mostly grunt work.

So what do I do? I actually design things! When I first arrived, I was mostly just observing what everyone on the Polygon team was doing. After a couple of days of not doing a whole lot, the lead designer on Polygon, Brent, told me to start making my own versions of what the other designers were doing. So there I was, my fourth day as a design intern creating typography boards. I figured mine wouldn’t even be shown in the meeting since well, I’m only the intern. But to my surprise they showed it with no hesitation and didn’t even address the fact it wasn’t created by a full time employee.

From that point I realized this wasn’t really going to feel like an internship, but an actual job. As I got more accustomed to the work we were doing, I was trusted with more and more, and even worked on full pages of Polygon.

Absolutely no one makes me feel as though I’m an intern - I’m part of the team. My opinion is just as valued as everyone else’s and I’m always included. It’s been a pretty awesome experience so far, and I’ve learned more than I ever thought I would.

Vox has given me the experience of being surrounded by tons of enthusiastic, creative people who are always willing to work with me and help guide me. They’ve taught me that work can be hard, exciting, and fun all at the same time. I’ve gotten to really feel what it’s like to be part of a team working on a huge project - which is probably the most valuable skill I’ll take from this internship.

Lots of design experience, awesome coworkers, and even free lunch once a week. I probably couldn’t have pictured a better way to spend my summer and I look forward to continuing to be an “intern” here at Vox Media.

Kelsey Scherer, Corcoran College of Art + Design

What do I do at Vox? DESIGN! As an intern with Vox, I’ve been a part of actual design projects. I’m on the advertising design team, dealing with RFPs for many different companies. I use the branding of a company and make the ad placements awesome on each of our verticals. I’ve helped out designing with internal documents, such as presentations given to new employees.

I’ve also been helping in designing new social media backgrounds/cover photos for all of the team blogs of SB Nation. Day to day tasks currently include watching kitten videos.

Working at Vox, I’ve definitely improved my Photoshop skills - it’s what I have open every day at the office. The most valuable skill has been learning how a company works. Vox isn’t just a design firm, so I get to be a part in a bigger company and see the end of a design project as opposed to just handing off your designs to another company.

Another cool thing is the interns are pretty well connected with everyone at the office. I attend meetings that are relevant to the team I work for, and talk to other designers as well as sales people to get a project finished.

Since starting at the beginning of the company, it’s already grown drastically. It’s interesting to have new people coming in so often. I’ve had a ton of fun interning with Vox and actually doing real design work!

Katharine Molloy, Temple University

Being an Intern at Vox means doing real work, not getting coffee or doing grunt work. Originally I made sure all the team blog logos that the amazing Fraser Davidson created for SB Nation were in the correct file format and ready to deploy when needed. Right now, I’ve also been helping to design the new social media backgrounds/cover photos for the blogs as well.

The major thing I’ve learned here is using the creative cloud services. I’m pretty proficient in Indesign, Illustrator and photoshop, which are the main programs I use, but getting to use the creative cloud is amazing. It makes file sharing between offices so much easier, and it really rocks when I’ve had to work from home, like with the recent storms. Just being apart of a larger company that does more than JUST design is really beneficial. It keeps my mind open and I’m pretty sure I’ve learned more than I realize.

No one really treats me like an intern. I go to the same meetings, and I give creative inputs in projects. This company has been growing really fast but every time I meet someone new, they’ve been really nice and welcoming. The vibe here at Vox is a chill one and it makes it really fun to work here.

Editor’s note: Katharine’s internship ended towards the end of 2012. Thanks in large part to her immense design talent, Katharine was hired as a full-time designer at Vox Media.

Two new design interns started at Vox Media last week for the spring semester.

Ashley Hopkins, Corcoran College of Art + Design

I have experienced a few other internships throughout college, and Vox Media’s passionate team and approach to design is exciting. After one full day of work I have met an amazing group of talented people who have made me feel at ease. I am already starting on design projects and I’m excited to take on whatever is thrown at me!

Ramla Mahmood, George Mason University

As an active member and officer of my schools AIGA chapter, AIGA-GMU, I spend a lot of time working to create a design community within our school and helping students get exposure to the professional world. I have been on countless studio tours from D.C to New York and have met many professionals in the field, so when it came to finding an internship I knew that I wanted to be a in place that would respect me as a designer while allowing me room to grow given that I am still a student.

Vox caught my attention because it was a company that had everything I was looking for. It has a huge digital presence with three beautifully designed websites and a team that amazes me by it’s talent. Since I’ve been here, I have had the opportunity to work on real projects and been able to observe the worklife of a designer. Everyone I met so far has been very welcoming and I look forward to seeing where this opportunity takes me.

Despite the seeming majority, not all of our design interns are located in the District of Columbia. Tracey Chan is based out of our NYC office, and she also has important Vox experiences to share.

Tracey Chan, Rhode Island School of Design

When I first started interning here back in August, I wasn’t quite sure what I was getting myself into. The majority of my education had sent me down the path of becoming a print designer. And well, The Verge was everything but that. I’ve always been enthusiastic about trying something new or going somewhere different (apparently I have a case of ‘itchy feet’ according to some sources), but I still felt a sense of unease coming in that first day.

Fast forward to the present and I can honestly say that the experience I’ve had here is unmatched. There have been a lot of firsts. It was the first time that I saw projects go live relatively quickly, which in turn, trained me to work more efficiently, with more focus. I was able to work directly with the writers behind all the content, and I realized that learning html/css is not the nightmare I made it out to be, but rather a new toy to play with. The dialogue between the design team and I was always constructive, from conception to execution, to iteration after iteration.

Equally as important as my personal experience here, is the work environment I walk into everyday. Though I am much more of an observer than an engager, the amount of dedication, sense of humor, and integrity is apparent, all within the context of a laid-back atmosphere. People go the extra mile here, and people have each other’s back 100%. I can only hope that these are the types of people I continue to surround myself with in the future.

We’re building great things, and we need your talent! Check out jobs.voxmedia.com for our current job listings.

An inside peek into the Polygon design process

misterrobine — Thu, 24 Jan 2013 13:47:00 -0500

It’s not every day you get to design a big ass new editorial site from scratch. This is a look into the design process for Polygon, the second of two huge projects tackled by Vox Product in 2012. Be warned: this is a deep look at our process and our work. Grab a beer or three, and join me for a walk through the past.

The project began with the liberation of an all-star editorial team to establish this new direction for gaming journalism. Chris Grant, Brian Crecente, Justin McElroy and Russ Pitts set out a vision for the site and selected a boss name. The Product Team set out to build a visual framework for the site itself.

Branding

Once the name “Polygon” was selected by the editorial team, the time had come to create an identity for the site. We found three designers that we wanted to work on this: Ryan McCullah, Cory Schmitz and Juhana Schulman. We delivered the designers a creative brief and anxiously waited to see what they would come up with. Were we a little nervous, perhaps - we had a tight deadline to reveal the name and branding at Pax East http://www.youtube.com/watch?v=potlb5d2y8w.

Polygon Creative Brief

What we want (what are the highest level goals?)

Develop our identity system to support our launch.
Make the system, and its associated assets, accessible, thus enabling consistent application.

How it will help our business (what are the expected business impacts of this project?)

Drive consistent brand experience across touch-points.
Start to create brand equity.

What we’ll get (what are the deliverables at the end of the project?)

A sweet mark and type solution that the masses will love

Some Boundaries (are there any limits, or major specifications, that we must incorporate?)

The brand mark will be used extensively on the web (think: Twitter icon!) but can work offline as well (think: shirts!)

Who this is for (tell us about your target market?)

Our publication is targeted primarily to men age 18-34, but should appeal to women as well

Make the right impression (how do you want people to respond to your brand?)

With curiosity
With optimism
Idealistically
With familiarity

Our Personality (pick five words that summarize your ideal brand personality)

fashionable
celebratory
mathematical
Mid ‘90s retro
retro-futurism meets the arcade era (that’s more than a word)

What it’s not (This ain’t your grandpappy’s video game site)

8-bit
pixelated
“game”y
cute
XTREME

Design influences

Our Values  & Mission (summarize your values and mission)

To elevate video game journalism through in-depth reporting and features
To refocus our coverage on the people making games and put video games into a historical context
To be comprehensive and authoritative

The Results

What we received was outstanding - the quality of the design work from all the designers was great. But there wasn’t much of a contest, as one mark jumped out to everyone as a perfect representation of the Polygon brand.

The Pick

There was really only one option that was truly considered, and it is the belle of the ball. The mark Cory Schmitz developed fits perfectly in with the other Vox marks stylistically, yet stands on its own. Coincidentally, it also showcases our love of geometry, triangles and the Illuminati.

The Team

In order to begin the design phase, we needed to put together a stellar team. Georgia Cowley, Brent Laverty, Ally Palanzi, Tyson Whiting, and Warren Schultheis, a highly talented set of folks that had never worked together before, created the designs that you seen below. While there were challenges along the way, they did a fucking great job.

Design Discovery phase

The team spent four weeks developing ideas and building several design directions into a presentation. It was a rather intense yet extremely fun period for us that brought out the best (and some of the worst) in the design team. Pretty sure Tyson regrets challenging Warren to a duel, though it is a fine gentleman’s solution.

Competitive analysis

We started this phase with a detailed competitive analysis of sites that exist in the same space and sites that were aspirational. We used this knowledge to make informed choices once we began the design exploration phase. This was also an opportunity to figure out what/who we did not want to be. Ever.

People. Play. Games.

We had a meeting with Chris Grant and Justin McElroy in the DC tower room to discuss answers and ideas contained in the initial brand creative brief, and to push our thinking even further. Our conversation covered many areas, but a couple of things resonated with strongly with us. Chris liked the way the Polygon logo suggested a 1960s text book updated with today’s design sensibilities, and felt that it would lend itself to a strong direction for the site.

And as the editors said: People. Play. Games. Polygon would be a site about people and culture, not just video games. The editorial team wants their coverage to be meaningful in 100 years. No pressure.

The work below illustrates how the team took the brief and those ideas to create design directions. While each team member was responsible for a direction, we all worked together. We had many Google Hangouts to critique, discuss and refine these directions. It was that collaboration that created the work below.

Week 1: Typography - We knew that typography was going to create the foundation for our visual direction, so we began our exploratory phase with type. We chose to focus on Scores, headlines, bylines, comments, and body copy - typographic elements that would appear on the site itself. We used content published on The Verge for accuracy.

When designing responsively, type plays a critical role as the backbone of your design, especially since not every design element is visible at every breakpoint. The typography you choose can go a long way in maintaining the integrity of your design direction.

^ didot, univers, univers

^ didot, univers, georgia

^ Mercury, Adobe Caslon Pro subhead, Lucida body

^ Avant Garde, Garamond

^ ITC Giovanni, Adobe Caslon Pro, Lucida

^ Impact headline: ITC Lubalin Graph Demi, Subheadline: Heroic Condensed Light Oblique, Headline: ITC Avant Garde Gothic Bold, Body: Helvetica Neue Regular, Pull quote: Heroic Condensed Medium
^ Impact headline: Prelo Slab Black, Subheadline: ITC Avant Garde Gothic Medium, Headline: ITC Avant Garde Gothic Bold, Body: Helvetica Neue Regular, Pull quote: ITC Avant Garde Gothic Book

^ futura and mrs eaves

We worked with Chris to review these typeboards, and narrowed down the fonts to Gotham, Avant Garde, and Mercury. During the SB Nation redesign, we started working with Hoefler & Frere-Jones, and we were pretty excited to have the chance to use their fonts on another web project.

Week 2 - Visual Presentation

With the fonts selected, we had a simple structure in place to showcase mood and voice through elements; now it was time to add some visual character. The team created five radically different directions for a presentation to stakeholders, with the goal to choose three directions to expand for the final presentation.

Directions 5, 3 and 2 were selected, and Warren, Georgia, and Brent dove in deeper.

Week 3&4 - Final presentation

Since Polygon.com was to be responsive, we decided to show the designs across mobile, tablet, desktop breakpoints. We also created a ‘polybagged cover’ that would give the user the feeling of opening a magazine. This presentation represented the end of the beginning for the design of Polygon: there were a few crazy whiskey-fueled nights getting this ready, but damn it was worth it. (As a side note, I like whiskey and tacos.)

There can only be one!

Each of the directions developed is outstanding, but one had to be selected. After an epic battle (kinda like an MMORG, but with real punches) Chris Grant and the extended team decided on Direction 2, “Schematic”.

And huzzah! Here to talk about that direction and what drew him to it is our very own Chris Grant.

Thoughts on Schematic from Editor-in-chief Chris Grant

Ted asked me to contribute some of my thoughts on Schematic and why I selected it to serve as the foundation for the final Polygon visual design. I, of course, said I’d be happy to, all the while knowing to do so would be to reveal the shocking truth behind its selection!

Are you ready?

Really? How can you possibly be ready for the enormity of this burden I’ve been carrying for months? From your vantage point, with the immense luxury of hindsight, it all seems obvious today, but at the time the only real metric I could apply to any of the moodboards I was being asked to judge was an embarrassingly crude (not to mention selfish!) one: how much did I like it.

While there was something to appreciate in each of the moodboards, a few immediately stood out and were sent onto the next stage of iteration: textbook, fashion magazine, and schematic.

The next stage served to distill what it was in each of these three concepts that worked, and reinterpret it through the visual language of the original moodboard. For example, see the fashion magazine-ification of schematic, or the textbook-ification of fashion magazine. Imagine Dr. Moreau’s doctorate was in design, and you’ll get an idea of the cross-species experiments the Vox Product team got up to at this stage.

Finally, once all three were refined and polished, and included everything that made the others strong, we still needed a final decision. Again, my ability to articulate precisely why I liked schematic more than the others failed, but there it was. Schematic felt the most like what I imagined Polygon would look like. But even at this stage, we were still weeks from codifying the visual language of the site; a cursory glance at the site as it exists today juxtaposed with the above imagery will help explain how far schematic evolved once the entire team was focused on the one direction.

****

I’ve also asked Warren Schultheis to share a little bit about his process in thinking about and creating the ‘schematic’ direction.

Thoughts on Schematic from Designer Warren Schultheis

As an art/anthropology geek, and a (very casual) gamer (NES, early Mac OS, and iOS), I had a somewhat partial view of ‘gaming culture’. As one of the designers tapped to work on Polygon, I was slightly concerned that I might not be gamey enough to make an appropriate design.

So when we (the newly minted Polygon design team) met with Chris Grant and Justin McElroy to get a sense of the project — and they dropped the ”people. play. games” science on us — I was relieved.

What made sense to me was this: Polygon was to be intensely people-centric. Justin and Chris’s sensibilities (which were more similar to mine than I expected) became more evident the more we talked; we spoke about a creative, intelligent, passionate group of writers & journalists, with an equally creative, intelligent and passionate (past, present & future) readership. If you’ve read anything on Polygon, this idea is likely already a given … But hearing it, for the first time — from the people you’ll be working with for the next several months — was like ambient Enterprise D noise to my ears.

The visual language that spawned my head that day eventually became the so-called ‘Schematic’ direction. It attempted to personify (on behalf of the good people at Polygon) intelligence, self-awareness, and ‘pride of nerd’. Other things I recently found in a mind map/word cloud in my old sketchbook:

shared journey

precise / Buckminster Fuller

shared sense of curiosity & enthusiasm

accessible + cool

celebratory

a sci-fi architecture / map of the unknown

‘nerd it up a bit’

We wanted the design to express ‘boldness’, but without sacrificing visual nuance or complexity. (The very best [game] experiences [for example] are always some combination of thoughtfulness and the daring or unexpected). From a design perspective, this meant taking risks and then not letting them get workshopped to death.

Another (arguably unusual) decision was the color scheme. Pink gradients against tan, black and white felt risky to some… but I felt fairly confident that the more emotionally mature readership would appreciate it, instead of finding it somehow too feminine. It was also an an obvious natural fit with the existing Polygon branding.

The other part of this equation is, of course, to really mind the small stuff. Fortunately for Schematic, the team was committed it awesome, from moodboard origins to the full-on responsive production site.

Looking back now, it’s neat to see how much of the DNA of the original moodboard survived. I can still see a thousand little things that need tightening, but there’s always room to iterate.

At the end of the day, I feel blessed to be able to work with such talented designers, developers, directors and other awesome-sauce people on brave new projects like this.

A few other notes and random thoughts:

The notched image corners, aside from being a fun functional way to indicate ‘pinned posts’, were also (in my mind at least) a subtle geeky nod to Battlestar Galactica,which I was bingeing on at the time with my wife.

The parts of ‘schematic’ that looked like actual schematics (such as the spark wire) were inspired by Soviet era spacecraft, Voyager’s golden record, and early Star Trek set design. The idea was to invoke the familiar and the mysterious at the same time.

Some of the visual / geometric shapes, colors and tones had been brewing previously on my personal tumblr, #triangleporn.com.

Getting to see your visual direction expanded and evolved by a team of smart people is thrilling (and sometimes a little scary).

There is no way I can take total credit for this direction. Everyone on the viz design team contributed/influenced the evolution. Georgia’s sense of elegance. Brent’s sense for problem-solving. Ted’s bold ideas (cover images and the hero come to mind), and Ally’s relentless work ethic. All these things seeped into the end product, which is something we’ll always be proud of.

****

If you have made it this far: I hope we’ve given you an understanding of what it takes to establish the visual language for a big ass site like Polygon. Some might say there was too much design work done here. I say you only launch a site once - the rest is just iteration. It’s worth digging deep and being thoughtful to find the right language.

What we’ve shared here was only the beginning of the Polygon design and development process. The selection of Schematic in mid-June, was followed by months of design iteration, article and feature template design, responsive prototyping, rails dev work, and polish to image treatments, stylistic elements, and interaction design. As you may have seen in Episode 9 of Press Reset, the team made significant design changes, even on the day of the October launch.

And now it’s 2013! Georgia takes her talents to SB Nation; Warren and Tyson are doubling down with Polygon; Ally (still in school!) is helping with the Vox Media website; and Brent is rolling off of Polygon to focus on The Verge. But please, take a moment to thank and congratulate these designers, and everyone at Polygon and at Vox- we’ve come a long way in the last year.

Hope you’ve enjoyed our work!

We’re building great things, and we need your talent! Check out jobs.voxmedia.com for our current job listings.

Vox Product Team’s Favorite Gifs of 2012

bjork24 — Fri, 04 Jan 2013 08:01:00 -0500

2012 was a good year for gifs. As you might recall from our previous post about working remotely, the lion’s share of our team’s communication happens in Campfire, where gif-giving (verb: the art of dropping a well-timed gif) has elevated itself to a fine art. It only seemed fitting, then, to poll the Product Team members to discover what our favorite gifs were for the last calendar year. We asked each member to select up to 10 of their favorite gifs that they saw in 2012, and these were the results:

[Note: we tried to keep these to gifs that were new to us in 2012.]

Click the image to turn the gif on and off

1. OTTER CUPS - Chosen by 60% of respondents

The office had a bit of an otter fixation towards the end of the year, so this gif taking the top spot is not at all surprising.

2. KISS CAM BEER - Chosen by 52% of respondents

Perhaps we liked this one so much because we could see ourselves in this lonely sportsball fan; sitting by himself, romancing his beer, while disgusting the woman beside him.

3. DEAL WITH IT BARF - Chosen by 40% of respondents

The “deal with it” gif meme is strong among our ranks, and this one is the belle of the “deal with it” gif ball.

4. ARGH MEIN ARSCH! - Chosen by 36% of respondents

It’s impossible to watch this gif and not yell out the title.

5. Five-way tie between CAT EPIPHANY // DAVID ROBINSON GETS PHOTO BOMBED BY LADY // COACH CAN’T FIND HIS POCKET // DOG TAKES FLIGHT // KEYBOARD CORGI

Lot of classics in here. The coach who can’t find his pocket gets me every time.

6. Six-way tie between ICE CREAM FACE // SLIDING DOGS // RUNAWAY ELECTRIC WHEELCHAIR // FLYING HORSE // POLICEMAN WAVING FLAG AND LICKING LIPS // DAT SHELL!

The licking policeman elicited schoolboy giggles throughout the office, but it’s tough to top the sheer unbridled emotion of DAT SHELL!

7. Three-way tie between SHAWSHANK EGG // CURLING GESTURES // JEDI VS. SANTA

Oh man… curling gestures… so good!

8. Five-way tie between TOP OF THE WORLD JUMP // BASEBALL HEAD FORCEFIELD // TWO PERFECTLY COMBINED GIFS // DRIVE-THRU DAIRY GRAB // BANE DANCE

Very few gifs have made me chortle and cry more than the baseball forcefield one. I’m sure it’s been photoshopped, but it’s still hilarious.

9. Ten-way tie between INVISIBLE MOTORCYCLE // MMA SIGN IN THE EAR // SOCCER KISS // WHAT YEAR IS IT?! // FACE MELT // DEER VS. RACE CAR // LIQUID POOL TABLE // SPIDERMAN SWINGS OUT OF CC’S BUTT // REFEREE DENIES SHOT // CAT CAN’T FIT IN BOX

If I was stuck on a deserted island with only a handful of gifs, nearly everyone of these would make the cut.

10. Seven-way tie between THE FIRE-JUGGLER’S FRIEND // BIG BALL BOUNCE DENIED // MARINE HATES TOUCHDOWN // GRANDMA SLALOM // HOCKEY FACE // FLY UNIBROW, FLY // IT’S JUST A LITTLE WATER

These were slim pickings, but there are still a couple good ones in this lot.

The first four were clear-cut winners, but after that things began to get a bit crowded. It just goes to show how much we love our gifs here at Vox.

If there’s some classics that we forgot, please feel free to leave them in the comments!

We’re building great things, and we need your talent! Check out jobs.voxmedia.com for our current job listings.

Vox Media Pawduct Team: Meet Our Dogs!

gifrap — Wed, 05 Dec 2012 12:40:00 -0500

Dogs. Love them or hate them (you love them, of course), they are a popular animal on the Vox Media product team.

You can tell a lot about a person by meeting their dog. Today, you have the rare opportunity to better know nine Vox product people and their furry friends!

We’re not done, either. In January, we’ll introduce you to another set of pets, including more dogs, some cats and a very helpful bird.

Dan Chilton, Developer
Name: Bogart, Bogey for short
Breed: Doberman mix
Age: 10
Job Title: Lead Nap Developer
Location: Springfield, Missouri
Memory: Two slots of 8GB DDR4, also his reaction when we brought home our kids from the hospital

Alex Nobert, Operations Manager
Name: Pupperz J. Pupperson
Breed: Black lab mix
Age: 1 year
Job Title: Puperations Intern
Memory: There are so many great moments, but the best has to have been when Pupperz looked up at me while we were watching TV together and said “I love you dad.”
Wait, did that actually happen? If not, probably the time she climbed up on the couch when she was not allowed to, then deployed her sad puppy face as if to say “please can I stay?” (she can stay)

Cory Williams, Support Manager
Name: His name is Maddox, though I call him many names (including Reginald Booboo-san and Dumbass)
Breed: Boxer/Lab Mix
Age: 1.5
Job Title: CPO: Chief Pawperations Officer
Memory: There’s the time he drank my beer… or this picture, when I saw him after being away for six months and he was really happy (and so was I).

He’s also a big fan of the dog park, and he always runs up to new dogs as they enter and gives them a good welcome sniff!

Clif Reeder, Developer
Name: Max
Breed: Dachshund
Age: 12
Job Title: Developer (smarmy, lazy, bad at listening to instructions, sleeps during the day, loves ham)
Memory: Playing frisbee golf and him running around the field/woods without a leash

Matt Singerman, IT Manager
Name: Chuy Loreno Panfilli Singerman
Breed: Chihuahua
Age: 11
Job Title: Protector of small shrubberies, doggy bed QA
Memory: Watching him jump into a snowbank and burrow out the other side

Guillermo Esteves, Developer
Name: Baraka
Breed: Golden Retriever
Age: 14
Location: Caracas, Venezuela
Job Title: Chief Tennis-Ball Officer
Memory: Waking up every morning and finding her sitting next to my bed holding a tennis ball, just waiting for me to get up and play with her.

My other favorite memory is simply the way she always greeted me every time I came home as if she hadn’t seen me in years.

Jose Junior, Senior Ops Engineer
Name: Sakura
Breed: Boxer mix
Age: 10
Location: Divinopolis, Brazil
Job Title: Senior Hair Eater
Memory: Getting her as a sick puppy from a shelter and caring for her until she got a pretty dog again. Also, all the times my son ran from her until he understood that she is harmless (he walks her around now when he is on vacation).

Ryan Gantz, Director of UX
Name: Gordon “Alfie” Shumway
Breed: Norwich Terrier
Age: 6
Location: Santa Barbara, California
Job Title: Director of Snoozer Experience
Memory: That time the UPS guy / FedEx guy / other dog / man on bicycle rode past the house and Alfie ran outside at 50mph barking and screaming and kicking up dirt and OH RIGHT THAT HAPPENS EVERY TWO HOURS.

But otherwise it’s nice to have him on the couch with me.

Georgia Cowley, Designer
Name: Quin
Breed: Long-haired Whippet
Age: 12
Location: Springfield, Virginia
Job Title: Deputy Chief Exe-cute-ive
Memory: The first time I saw him. He was so tiny I could hold him in one hand.

We’re building great things, and we need your talent! Check out jobs.voxmedia.com for our current job listings.