Case Study: Awards Shows
The 67th annual Golden Globe Awards were just a little over a week ago, and within two days (Sunday and Monday) the Yahoo Golden Globes site served over half a BILLION page views. On that Monday alone, which was Martin Luther King, Jr. Day and a work holiday for many, there were eleven million unique visitors, each viewing an average of 44 pages and spending almost 8 minutes on the site. I am so proud to have worked on the site that helped make those amazing numbers possible.
Problem: Prior to this project, Yahoo had some awards show coverage, but the editorial and programming effort involved in each instance was so prohibitive that only the very largest shows were covered. In addition, all of the awards show sites used completely different designs, code, and even editorial tools, which ruled out any chance of efficiency from show to show.
Project: Design a reusable site template flexible enough to be used for each of the major awards shows during the year—Oscars, Emmys, Grammys, Golden Globes—as well as a low-effort, feature-light version for any of the other smaller awards shows. The site template must also accommodate visual design flexibility, because the different awards shows need to live within different Yahoo sites: Emmys in Yahoo TV, Globes in omg!, and Oscars in Yahoo Movies.
Research: We started by mining the traffic data for insight into audience behavior, and then we did a content audit across every awards show site we could find. But our richest sources of information were our in-house experts: the editors. We conducted extensive interviews with editors from all of the Yahoo entertainment sites, and they provided us with a clear understanding of their processes, pain-points, and the opportunities they saw for both themselves and the end-user.
Process: We began sketching during the research phase, and as we worked we covered the walls and whiteboards in our war room with sketches. Visual design comps and wires were developed and refined in tandem, and the visual designer and I were in constant close communication. We had multiple reviews with the editors, both informal and formal. The most current comps were always taped to the walls.
We focused on a few key things. First, we wanted to make sure we put the content front and center. People are looking for the content—photos, nominee and winner info, opinion, and video—and not for site features. We made the photos and videos as large as possible, and tried to make the access to everything as simple as we could. Basically, we tried to keep the site out of the way of the content.
Second, we wanted to empower the editors to promote the very best content easily throughout the site. These sites are wholly powered by the editors. They know what is interesting now, and they work hard to elevate and commentate the very best from the photo and news feeds. To take advantage of this we created a highly modular home page and cross-linking right column for content pages. We decided that these promotional areas should not have fixed content placements, and that cross-linking should never be driven by what’s “related,” but rather by what’s hot right now (as determined by the editors). The editors would have the ability to create content modules of different varieties—photos, videos, blogs, news, and polls—and then place those modules however they liked on the homepage and that right column. This one “Best of…” column would appear on every page but the homepage, helping to simplify the site, keep the editorial workload down, and surface the most enticing content on every page. This modular, editorial-powered approach also meant that the awards show template could be easily modified for lower-profile awards shows.
And lastly, we wanted to enable user commentary and engagement wherever possible. We had a lot of scope-intensive ideas like bracket voting and user-created galleries, but at a basic level we wanted to allow people to express their opinions on any piece of content. People have strong opinions about almost everything related to an awards show—the nominees, the dresses, the winners, and the show—and we wanted to make sure the site included places to share those opinions. (Clearly, improving spam filtering should be a high priority in improving this experience.)
Of course, there’s usually a fair amount of hidden complexity in simple-seeming things, so we also spent time stress-testing and spec’ing the design to make sure it worked for all of the intended host sites and awards show types.
Successes: Our efforts to showcase the content and offer enticing cross-links paid off. We saw a 215% jump in page views per unique user over the previous year (from 20 to 45) when we rolled out this design for Oscars. Additionally, the common code, layout, and editorial tools drastically decreased the effort and time involved in building, populating, and releasing sites for new awards shows.
Areas for Improvement: There are a few pieces of the site I would love to get a chance to revise, like the person/movie/show page, and there were many great features that hit the cutting room floor. But I would say my biggest wish is that I had had more time to work on the design of the editorial tool itself. The engineer who built the tool all by himself in record time did an amazing job, but there are definitely some processes that could have been made easier for the editors.
Final Takeaways Many factors besides the design of the site contributed to this year’s fantastic Globes success, Avatar’s Best Picture win among them. The bulk of the credit goes, without a doubt, to our talented and hardworking staff of editors. Like I said, people want content—photos, opinions, news, and more photos—and our editors crafted an extraordinary set of content that kept the audience engaged and looking for more. After a year of using the new awards show tools, editors from all of Yahoo’s entertainment sites were able to work together as one large team to support the Globes, which was a huge win for both Yahoo and our audience. I’d like to salute them for their skill and effort, and I’m already looking forward to the Oscars!
Credits: Interaction Design: Sarah Mitchell (me), Jens Jonason. Visual Design: Megan O’Toole. Design Manager: Nina Ristani. Engineering: Steve Krutzler, Travis Kuhl, Eric Melkerson. Product Management: Adam Zarlengo. Project Management: Noah Kanter. 2010 Emmys Visual design by Seva Dyakov.