Vax ’14

Here's the thing about a hack week: at its most basic, it's really just a decision to set an artificial deadline on making the things your team has been dreaming of for a while. A really harsh deadline, for sure, and one that isn't backed by any serious driving need. It's not like the end of a political campaign where you sprint as fast as you can to the finish line because there's no second chance. It's not part of a business cycle, holiday season, or year-end close out process. It's a simple call made together by a team: "Hey, let's make some things."

We've done this before. You can learn about what Vax is and why we do it here. And this is where we keep all the photo documentation of all the late nights and glowing laptop screens.

Vax '14 was a short, but fun-filled and inspiring week. Many people met for the first time, others hung out and worked together for the first time in months. But at the end of Friday, as we all boarded our trains and planes home, what we were really left with was proven concepts, validated theories, and many completed projects. Not everything that we worked on is a finished product (and some may never be!) but all the learning we did will inform the work we do in the future. So without further yack, here's what we made:

Three deep dives:

Warren Schultheis, Brian Anderson, Ramla Mahmood, Alisha Ramos, Ben Lee

There are lot of complicated steps to making a chart. Once one is made, it's probably not responsive and is definitely hard to change. And unless the creator puts some time into it or involves a designer, it's also probably pretty ugly.

Kalimba is a stand alone chart-making tool designed to give editorial teams the ability to better visualize and embed data in stories. It dovetails with Google spreadsheets to generate beautiful charts and graphs that are responsive, sharable, and interactive. The final tool is easy for editorial staff to use, responsive, easily changeable, and shows a live preview as the data is updated.

Kelsey and Eden. Photo: Trei Brundrett

There were a few challenges to overcome to make this work. First, the team had to figure out how to get data into the system. They ended up reusing a great google spreadsheet to JSON tool that already existed (and that powers Vox Media editorial apps).

Second, they had to create a chart configuring tool to make it easy to select a type of chart, colors, labels, ranges, source and small description, etc.

Third, they had to render the charts. This is done via third party javascript libraries. This part of the tool is modular, so one can swap out different libraries and still have it work well. The team validated this concept by frantically changing the rendering library three times in 6 hours. Ramla and Alisha worked tirelessly to make sure the different rendering libraries looked beautiful and fit with the colors and themes of our different sites.

Vox Media has many internal applications, so the team centralized the user information and authentication using our Google apps domain - this way there is zero signup for users, just use a standard Vox Media Google account. Getting authentication working required a bit of effort. In addition to authentication Kalimba needs to access each user's Google spreadsheets. This took a bit of configuring from the team, but in the end, as Brian Anderson says, it was magical.

Georgia Cowley, Josh Laincz, Guillermo Esteves, Ted Irvine, Jason Santa Maria

Bongo is a responsive typeboard tool for our designers. The idea was to build something to allow designers to validate type sets and general design language quickly, and to have the ability to show stakeholders (or clients) some type variations quickly in a clickable and responsive setting.

During the design phase of building Vox.com that team built some site prototypes that functioned similarly to what the Bongo envisioned for their project. However, the Vox.com boards were static and couldn't be reused for other projects or verticals. For the ongoing redesign of Eater as it moves on to Chorus, something of a predecessor to Bongo was put together. That worked well, so the Bongo team decided to make a universal tool.

What they ended up with by Friday was a v1 Rails app that integrates with the Typekit API. It allows a designer to work from a template to mock up a series of designs and typesets and show variations on different devices quickly. After presenting the initial work to stakeholders, the designer can take away a finalized, approved typeset with greater knowledge about how that type will behave in different environments.

The v1 is currently useable internally, but the team's plan is to clean up this version based on some feedback and after-thoughts, and then open source it, and continue iterating towards a more robust and easier to use v2.

Ryan Gantz, Kelsey Scherer, Eden Rohatensky, Casey Kolderup, Blake Thomson

Lately is a responsive web app that surfaces great recent content from all Vox Media's Chorus-based verticals via an elegant, mobile-friendly experience, and asks logged-in users questions over time to better serve them content they'll like. It's powered by an algorithm that considers a story's placement on each vertical's home and hub pages, social activity, and an evolving understanding of a user's personal preferences.

By design, Vox Media verticals are built around unique passionate audiences, so as a company we haven't experimented much with what it means to encounter content outside that context. Leading up to Vax, the Lately team looked at mobile apps such as Yahoo News Digest, NYTNow, and Al Jazeera America, and tried to imagine a new discovery experience for Vox Media stories, videos and features outside of the existing blogs. How could we regularly serve users (and ourselves!) a limited set of relevant content in a way that does't feel like wading through a never-ending stream of material and guilt. When you're on a mobile device and only have a few minutes to spare, you just want something to watch or read that you know you'll like.

In time for Friday Vax demos, the team successfully deployed a working version of Lately to production, built on the foundation of this Product Blog. It assigns every story a relevancy score for the current user, computed through various inputs, and even uses click-tracking and Recommendable to boost content that matches the user's taste. And since the live product came close to meting the visual fidelity of Kelsey's designs, we felt we didn't need to rely on mockups at all during the demos. Going forward the team would like to polish the experience, tweak the algorithms in response to real-world use and feedback, and incorporate sponsored posts from our advertisers. The project is private only to Product folks as they work through all this, but the hope is it will offer an accessible entry point to all the great content we publish across Vox Media, especially as additional sites like Eater and Racked migrate to Chorus.

For Eden and Casey, who started as developers just prior to Vax, Lately offered a great chance to embed with some experienced (and silly) Product folks, and to dig into the structure and functionality of our Chorus app. Good times.

Dylan, Huge's back, Clif, Robert and Scott Kellum hacking away. Photo: Trei Brundrett

Some of the other amazing projects:

Open Sourcing

Mandy Brown, Trei Brundrett, Scott Kellum, Melissa Bell

This team decided to use Vax as an opportunity to start making commitments to open source and to figure out how we approach the subject in a way that is manageable for our team and valuable to the community.

We created guidelines and a framework for making open source easy and a part of our daily workflows. This includes out of the box licenses you can attach to projects, support paths, and tools to help us write about and share these projects. Trei and Mandy talked a bit about this with Source during Vax.

Quiz Generator

Nicole Zhu, Rebecca Lai, Adam Baumgartner

The product team's recently-arrived interns made an app that generates quizzes that can be copy and pasted into Chorus and can be modified to fit the styles of the seven Vox Media verticals. Editorial staff across Vox Media rejoiced upon hearing the news.

Providence 2

Clif Reeder, Niv Shah

Clif and Niv updated Providence (Vox Media's in-house event tracking system) to track more than just real-time pageviews. It also now tracks video plays, referrer data, and hero clicks. There is a robust API for users to gather this data. They also updated the dashboard to surface a subset of this data.

Pixel Punch

Katharine Molloy, Ngan Hoang, Tyson Whiting, Ally Palanzi

Pixel Punch is a design battle that's going to be hosted at Vox Media DC this year. The team worked on event planning, branding, collateral, and a soon-to-be-public website.

Yobot

Guillermo Esteves

Yobot is a Sinatra-based app that uses the Yo API to send Yos to a channel in Slack from the Yo app. It is a terrible thing that no one should ever use, so Guillermo made it open source for your sadistic enjoyment.

I’ve created a monster. pic.twitter.com/jGEap3aOiE
— Guillermo Esteves (@gesteves) July 1, 2014

Slack Pokemon

Robert Vinluan

It's a Slack bot that lets you battle pokemon within a chat channel. Polygon covered how awesome this is here.

Ad Products Spec Sheets

Constance Watkins, Brent Laverty, Enzo Marchese, Tate Tozer

Prior to Vax, there wasn't a centralized place for descriptions, specs, and terminology for each of Vox Media's ad products. Style guides for custom ad units did not exist, and PSD templates sent to clients were often out of date and not self-explanatory. This project involved collecting data, updating PSDs (including better instructions for clients to reference), and designing accompanying style guides.

Ensemble

Skip Baney, Ben Alt, Sharon Wong, Huge Ma

This team built out an expansion of our company directory app that makes all entries relatable and actionable.

VoxLetters

Lauren Rabaino, Steve McKinney

Steve and Lauren built a bad ass email newsletter generator that integrates with Chorus.

Katherine, Some of Chao, Tyson, Matt and Ally. Photo: Trei Brundrett

Card Stack Enhancements

David Zhou, Jake Lear

Jake and David, with input, hopes, and dreams shared by all those around them, worked on extending Card Stacks to allow them to be used on other Vox Media verticals

Tempo

Jason Ormand, Dylan Lathrop

Jason and Dylan reworked Tempo (our site performance tracker) to be on the level of our editorial products, including figuring out new branding, UI and ease with which people can get the information on how our sites are performing from a speed and weight perspective. They also tried to enliven the experience with a fun, casual experience that still communicates the core function of Tempo.

They are also working towards open sourcing this product, and with that it requires making it more friendly and refined than the tool was prior to this. Jason has developed a wonderful experience for users, both internal and external to Vox Media.

GIF Controller

Jesse Young

Jesse created a way to pause/play GIF files, and to reduce payload on a GIF-heavy page by downloading only the first frame.

Prefix Text Editor

Jesse Young

This is a text editor that parses input into prefix notation.

Chorus Search Service

Michael Lovitt, Jake Lear

Jake and Michael created an Elasticsearch-driven Chorus Search Service to allow for fast and effective searching of entries and other Chorus content. Their goal was to improve the user experience of site search throughout Chorus and to provide a clean foundation from which the product team team can rapidly develop new search experiences. The v1 is an initial testbed implementation of the Chorus Search Service on Polygon.

Trei and Scott discuss; Clif hacks away in the background, jamming to some Carly Rae Jepsen. Photo: David Zhou

Meme Generation

Yuri Victor

Aside from the help he provided many other groups, Yuri spent Vax open sourcing his meme generator. He wrote about that here on the product blog.

Style Guides

Ally Palanzi, Matt Sullivan, Tyson Whiting, Ramla Mahmood, James Chae

This team created a universal style guide template that can be used across verticals that houses all of Vox Media product's visual design and development standards.

Google Docs Integration with Middleman

Ryan Mark, Lauren Rabaino

Ryan and Lauren spent some time with the tools we use to publish our editorial apps and wrapping them up for open sourcing.

SocialVideo

Harold Neal, Ramla Mahmood, Joe Alicata

Social video sharing for mobile and desktop with a bit of magic.

Benzo (eggdrop <-> Slack = !acro)

Justin Glow

Justin wasted his time getting a 22 year old IRC bot to run in Slack so that the team could play the word game Acro.