Design Exercise:

Microsoft launched a preview of the new MSN homepage redesign last week. This redesign reminds me in some ways of the recent 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.)

click to view larger

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.

click to view larger

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.

click to view larger

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.

click to view larger

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.

Comments are closed.