Case Study: Yahoo Entertainment
Project: Redesign this very old page:
Background: This project was defined by its constraints. The biggest constraint was that the page, once launched, could not require ANY human effort to update it daily, meaning it could use only pre-existing content feeds and formats. Additionally, we could not build any new feeds or modify the existing feeds at all. We had to design, build, and launch the page in 5 weeks. The page had to showcase content from Yahoo’s five entertainment sites: Music, Movies, TV, omg! (celebrity), and Games. Our executive client also gave us the directive to make the page customizable and something people would bookmark and come back to daily.
Research: Prior to the project kickoff, Yahoo had conducted focus groups and participatory design sessions in multiple cities to gather people’s perceptions and expectations around consuming entertainment content. I was present for all of the sessions in L.A. The findings indicated that people have varied personal definitions of “entertainment”—for some it includes things like movie trailers, horoscope, or even sports, while others only care about celebrity gossip and photos. Most people also already have a daily routine of sites they visit to get the kinds of content and information they prefer. The motivations for frequent repeat visits fell into two groups: the desire to find out the very latest noteworthy information (often socially motivated), and the need for practical utilities like the TV listings grid and the movie showtimes finder.
Process: For the duration of this project the core team (3 designers and 3 engineers) left our cubes and camped out together in a war room. To begin the project we worked together at the whiteboard, analyzing the research and discussing the user and project goals. Then we split up, and the visual designers crafted a creative brief while I worked closely with engineers to determine what content was available. I sketched page after page as we mined the source sites for feeds, teased out the specific content available in each feed, and brainstormed possibilities for the content we couldn’t access easily. Then the entire team came back together and agreed upon an overall content strategy and creative direction.
We decided that our best bet for encouraging return visits was to focus on the utilities such as the TV listings grid and the movie showtimes and tickets search. Without any additional editorial support, our content feeds simply couldn’t compete with other sites in terms of surfacing the most important and timely content. Armed with our strategy we reviewed and refined the sketches and began wireframing towards the final solution.
I presented the strategy and the in-progress wireframe to our executive client, and with his approval the visual designers began working on the final page designs. During this phase we explored options for the detailed in-page interactions, including the video playback and the page customization functionality. Below you can see an exploration of options for drag and drop, which we ultimately decided against, in favor of simpler module up/down controls.
The other interaction designer and I then divided up the modules for functional documentation. (View my spec for the TV listings module for an example.) We reviewed and iterated all of the specs with the engineers, and then sat with them as they coded, addressing challenges and opportunities as they came up. Together we fine-tuned the interactions as they came to life. All of the designers contributed to the QA effort, and we launched on schedule. You can view the live site at entertainment.yahoo.com, and below is a video tour of the page highlighting some of the interactive functionality.
After the launch we conducted a round of usability testing, which was intended to inform changes for the next release version. Unfortunately, shortly after the usability testing was completed, executive priorities shifted, and any future releases were canceled.
There are a number of things that I consider successes in the outcome of this project. First of all, it launched on time, exceeded the expectations of our executive client, and has been a clear financial success. The page was also one of the first to embrace Yahoo’s larger strategy of openness by incorporating external blog and top 10 feeds, iTunes data, and iTunes and Netflix functionality.
Page views went up after launch from an average of 5.5M per month to 10.5+M per month with no additional promotion. (The page views in the first month post-launch jumped to 16M, but I believe it did get some promotion in that month.) Page views held steady at 10-11M per month until July of this year when the redesign of Yahoo.com—which removed the most prominent link to this page—began to roll out.
Aside from those achievements, I am proud of the hard-working and creative team effort that allowed us enhance this fairly basic page with quite a few delightful and refined interactions. I believe we really made the most of every opportunity we had.
Areas for Improvement:
Of course, the page is not perfect. The usability testing uncovered some issues with the module up/down interaction, expectations of content and interaction in the celebrity photos module, and the usability of the top ten drop-down control. Some of the findings were not all that surprising and were related to things we intended to tweak in the next release. However, I think the biggest failing of the page actually was in its overall concept rather than in any individual feature. The research strongly indicated that people are most interested in fresh, engaging, and entertaining content, which generally relies heavily on editorial curation and community engagement. So in the end I think we built a very nice page that misses out on serving the biggest user need.
Final Takeaways: I am still proud of the work we did on this page. I really enjoy this kind of quick, highly collaborative work, and cherish the respect and affection this project fostered among my team members. The page is visually appealing, contains refined interactivity, is technically solid and responsive, makes easy money for the company, and for two years has been serving (and hopefully delighting) millions of people every month.
Credits: Visual design: Genvieve Garand, Jeff Hurlow. Interaction Design: [me], Ruth Kaufmann. Design Management: Nina Ristani. Engineering: Scott Rocher, William Wetter, Christopher Shattuck. Project Management: Brett Hellman. Product Management: Michael Speigelmann.