An inside peek into the Polygon design process
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!
