Yahoo Home Redesign

Recently I’ve been asked to complete a design exercise to redesign the Yahoo Home page. I thought it’s a great time for me to practice the design thinking process in a fast-paced environment with limited time/resource/budget.

Understand project goal and users

First is to understand the overarching goal — to redesign the Yahoo home page to provide a cohesive experience. In reality, this is usually a design request from the PM or product vision.

Next step is to build the user empathy. Depending on the time and given resources, the research methods and research time varies. For this exercise, I use a quick but useful way to put on my users hat. I first defined two scenarios with two jobs/tasks to be done. Then broken down into specific user goals that users want to accomplish in the home page. With those objectives, I experienced and discovered the current user flow and through which I identified the user pain points. Those user pain points are something users are unsatisfied with therefore created the opportunities for the product. Below is the what I’ve found and formulated to understand my users.

Build User Empathy

Define design problems and develop hypothesis to test

It’s more important to find the right design problems before investing time in exploring the solutions. After having those findings in my previous research, I defined my problem statement in the constructive format so that it’s trackable and manageable.

[The service/product/design] should allow users to [goals]. We’ve found that it isn’t meeting [these goals], which is causing [the adverse effect/the problems]. How might we improve so that our product/service/team/organization is more successful based on *[these measurable criteria]?

*For design in production, the measurable criteria should also be defined to ensure the problems are solved through validation of those matrix, which I didn’t cover in this conceptual design exercise.

This is what I’ve defined for this design exercise:

The home page should allow users to easily navigate between different pages without breaking the experience, to browse/find information efficiently and easily, to feel a consistent experience across the site, to customize the information they want to see. We’ve found that the home page isn’t meeting these goals, which is causing a fragmented experience, dead-end pages, a long time to find the information, cluttered interface.

Now, we’ve completed framing the design problems based on user research. Next we can start exploring the solutions to address the problem. The end goal is to validate the design solutions and ensure we’ve tackled the problems. In order to achieve that I’ve developed two hypothesis including the hypothetical solution and desired outcomes that imply how will we know the problem is solved.

  1. We believe that creating a navigation design with consistent location and styling will result in better cohesive experience, reduced number of clicks, easy to identify the menu.
  2. We believe that creating a visual consistency and hierarchy, prioritizing information displayed, reducing content will result in better comprehensiveness of the content, easy to find information, clean interface.

Design exploration

After developing those hypotheses, I started to work on different design solutions.

Navigation

For the navigation problem, I first redesigned the IA and created multiple design patterns to support navigation between different pages from different levels.

Four types of navigation

Also I explored on different concept to address the issue of navigation. Displaying navigation vertically at the consistent place versus displaying navigation on the sidebar.

Navigation Concept — Sidebar

Visual consistency and hierarchy

I address this problem from four aspects. Typography, Color, Content Density, Content Organization.

I created a style guide applying same typeface, color for the similar content to build the visual consistency across the content.

Style guide

In the old design, the news is displayed without grouping in the list layout and makes the site overwhelming and it’s hard to scan. I improve the representation of the content with the following changes.

  • Display information in Card UI makes the content more organized when there is a mix of image, text. and allow for flexible/responsive layout.
  • By adding more space in-between different categories, users are able to comprehend/read information by chunks.
  • The content density is decreased by limiting the number of news cards. Only display the 3 featured stories for each category and allow users to See All .
  • After user signing in, the list will be curated/prioritized/personalized based on user activity history/preference. Section such as Your Reading List will be added.
Old VS New Home Design

Responsive layout

I explored responsive layout on my second concept displaying main navigation on the left sidebar and customized widgets on the right sidebar.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.