This project was originally designed for Live Search and then went through the rebranding process for Bing.
When a user lands on the home page (Live.com – Bing.com) and then clicks the “News” tab they are taken to a dynamic and immersive news experience. The content is pulled in from several top reliable news sources and the articles are all attributed to the source. This news browse experience gives the user the advantage of getting several points of view on a specific story all in one place.
The bottom images show the original Live Search design.
The bing news landing page
From the live search home page if you clicked on "news" you would be taken to this landing page. Not the most exciting and engaging experience.
I started the process with research, understanding technical limitations, previous findings from user research and working with PM to develop scenarios. I also researched major news sources to determine what established conventions are for news presentation and taxonomy. Along with user research I observed users of competitors products as well as our existing experience.
After the research phase came a lot of brainstorming of feature ideas such as Top Stories, Most Popular, Personalized Recommendations, Media galleries, local news, and more.
The basic taxonomy of the browse experience from multiple entry points such as the home page or from a search results page. These categories were determined by analyzing our news sources and finding the most well understood labels for each.
After establishing a taxonomy I was able to look at the basic page flow and determine what the different page types would be.
Then came wireframes of the page layouts. Here is an example of some issues spotted early on in the process. The highlighted article doesn't align with the one above it that has an image. This breaks the users scan pattern and makes the page more difficult to grok. The solution was to put images on the right which would allow the design to degrade more gracefully.
Here are some samples of the finished Live Search page designs along with some redlines for typography and spacing along with a sprite for assets.