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.

—–

Final Oscars and Emmys site designs

—–

2 pages of my functional spec doc

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.

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.

Successes:
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.

Microsoft launched a preview of the new MSN homepage redesign last week. This redesign reminds me in some ways of the recent Yahoo.com redesign. Both homepages are cleaner, with fewer links on the page. Both offer a way to configure the page to view personal content like email and Facebook.

I did not have the privilege of working on the new Yahoo homepage. However, the redesign team did invite my group to contribute some final design thoughts after a fairly long run of A/B testing and iterations. We were given about a day to come back with suggestions for visual design polish. Visual design polish is not my job, but I couldn’t resist the opportunity to take part in a design exercise on one of the most viewed pages on the entire internet.

I drew up some simple wireframes proposing minor changes to the current design. I didn’t re-imagine the page from scratch—it was clear that the design was basically final and I didn’t want to go too far outside of the scope of the exercise. Instead I used the current design as a starting place and made incrementally larger changes. I’m not sure if the homepage team ever even saw my work, but I thought it would be fun to share a few of them now.

(Views expressed below are mine, not Yahoo’s. All documents are the property of Yahoo.)

Version 1 - click to view larger

I knew that the left column was completely off limits, so for most of my sketches I just used a screenshot of the (then) current version. I also wanted to be sensitive to the editorial input into the current design, so I copied the headlines and text content and used them verbatim. (For comparisons and posterity, here is a screenshot of the currently live redesign I am referencing.)

This is what I started with, which you can see in the wireframe above:

• I added more visual hierarchy. I varied size and placement to call out top links and to give the eye a path of focus points.
• I increased the number of editorial images. My experience working on entertainment sites has taught me that people love to click on images.
• I decreased the amount of hidden content. I chose not to put as much importance in keeping the page very short, and instead tried to reduce the number of carousels and tabs hiding editorial content.
• I switched to a serif font. I wanted to embrace the editorial content of the page and give it a more newspaper feel.
• I substantially changed the top main feature area. I moved the Popular Searches to elsewhere in the page and stretched the feature area all the way to the right edge. I moved the secondary features to the right of the main feature (instead of below) and simplified the interaction by removing the current rollover behavior. I also
  highlighted the feature topic options in prominent tabs instead of the small arrows currently at the bottom of the feature module.

I did some more versions like the one below in which I varied the content and feature layout.

Version 2 - click to view larger

In this next version below I did take a little crack at the left app bar after all, despite it being off-limits. Similarly to my earlier efforts, I wanted to add hierarchy and reduce the amount of hidden information. I tried to show some of the information belonging to the top item (email) without requiring a click or rollover, and then I reduced the prominence of the items at the bottom of the list. In order to not break too many rules at once with this design, I also consolidated the page content to create a shorter scroll.

Version 3 - click to view larger

In this last version, I tried moving the app bar to the right. I found it interesting to explore a fairly unconventional page layout, especially with the ad placement in the center of the page. I also thought the username could persist in this upper-right placement through all of Yahoo’s sites, and rolling over it could trigger the app bar to appear, bringing the utility of its shortcuts and quick-views to the entire Yahoo network.

Version 4 - click to view larger

I’d like to be clear that these wires do not represent a criticism of the current Yahoo homepage design. The homepage team went through a robust design process that included many rounds of testing and feedback that I was not privy to. Not to mention the fact that the redesign that they launched has been a great success. I just really enjoyed getting the chance to lay my hands on the design of this page, and I hope you enjoyed looking at what I came up with.