Ryan Varick

Design at Bleacher Report

Writers and employees at Bleacher Report, the world’s second largest sports website, produced hundreds of pieces of content per day while I worked there. They used a variety of content management systems developed organically, in house, years before “don’t build your own CMS” was a startup meme. From 2013 to 2015 I designed more efficient systems to find, organize, and publish content for millions of sports fans worldwide.

Process

I started with research in order to understand the problem space. Working with product management, I analyzed the types of media Bleacher Report produced, in what quantities, and how that mix was changing over time.

Next, we observed and interviewed dozens of stakeholders throughout the company, from college interns to senior management. Together, we embedded with teams to understand their workflows and identify common pain points. We observed writers interacting with the existing systems, cataloging the tools they used to create new articles.

We used participatory design to define and prioritize features. I created paper- and HTML-based prototypes to rapidly evaluate new ideas, then I worked with visual designers to create detailed mockups for the engineering team to build.

Auditing modals used by old systems.

Auditing modals used by old systems.

Paper prototype I created to test a concept for a new feature.

Paper prototype I created to test a concept for a new feature.

Example 1: Service Design

In 2014 Bleacher Report “pivoted to video,” increasing the number of videos produced in house from less than ten per day to several dozen. I shadowed the video team in New York for one week, observing every aspect of their process, starting with concept planning and talent acquisition, to shooting, post-production, and publication.

The insights gained led me to design a new publication system for video producers. Before, producers spent more than 20 minutes per video on a fragile, multi-tool process. The new system automatically uploaded and encoded videos, only requiring producers to provide a few bits of descriptive metadata before final publication.

Excerpt from a process map I put together for management documenting the video production process and potential areas for improvement.

Excerpt from a process map I put together for management documenting the video production process and potential areas for improvement.

Example 2: Detailed Design

Bleacher Report offers curated email newsletters as an alternative way for sports fans to receive news and information about the teams they care about. By observing employees while they wrote newsletters, I noted a number of small inefficiencies that had a cumulative effect on quality and productivity.

In one case, I noticed that writers pasted the newsletter subject line into their browser’s location bar. When asked why, they explained that the third party tool they used to send newsletters reset the subject line every time they used the preview feature. The location bar served as a makeshift clipboard. This observation led us to build both the subject line and preview directly into the new system.

Wireframes I designed for a newsletter feature.

Wireframes I designed for a newsletter feature.

In another case I noticed that experienced employees tended to meticulously manage the order of their browser tabs. Over time I realized this was because they used the keyboard to switch tabs more efficiently. With this in mind I designed convenience features to help employees navigate the new tools. More importantly I used this insight as a guiding principle for the overall design: Consolidate information from separate screens into a single view whenever possible.

High-fidelity mockup for a navigation feature. Visual design by [Cat Oshiro](https://www.catoshiro.com).

High-fidelity mockup for a navigation feature. Visual design by Cat Oshiro.

Additional Work