Ryan Varick

Bleacher Report Publishing Tools

Introduction

Bleacher Report, the world's second largest sports website, produces hundreds of pieces of content per day. In 2014 I led the design effort to overhaul the tools that Bleacher Report employees use to find, organize, and publish content for millions of sports fans worldwide.

Process

I started by working with product management to observe and interview dozens of stakeholders throughout the company, from college interns to senior management. Together, we embedded with teams to better understand their workflows and identify common pain points. I used a participatory design process to define key features along with paper- and HTML-based prototypes to rapidly evaluate new ideas.

One of several paper prototypes I created to test new features.

Example 1: Service Design

In 2014 Bleacher Report invested in video production, increasing the number of videos produced in-house from less than ten per day to several dozen. I shadowed the video team 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 tool 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.

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 as they wrote each newsletter, I noted a number of small inefficiencies that had a cumulative effect on quality and overall 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 tools.

Wireframes I designed for the newsletter feature.

In another case I noticed that 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 tabs onto single screen whenever possible.

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