Warning: Creating default object from empty value in /home/pizzar0x/fixpertdesign.com/wp-content/themes/elefolio/functions/admin-hooks.php on line 160

Yahoo Sports – Article Page Redesign

Yahoo Sports Article Redesign - Final live design

Part of our strategy for the 2007 redesign of Yahoo Sports was to reposition the site as a source for quality editorial content which was produced in-house by a team of talented writers. Redesigning our article pages was a key aspect of this re-positioning strategy.

Project Summary

Prior to the redesign, Yahoo Sports was known primarily as a source of statistical data (scores, player stats, etc). Our revamped homepage would strongly tout our editorial content, and those links would drive users into article pages. This allowed us to create a strong editorial voice, and as a result, a compelling and unique user experience.

My Role

I led the User Experience strategy for this project. I designed the new article pages, and in doing so, created a new extensible template system, along with new admin tools and workflows for our editors. I also collaborated with Design Researchers during usability and RITE testing

Goals

Our primary goal was to create an article page that supports Yahoo Sports as an established and respected player in Sports coverage and analysis. In addition, we wanted to streamline our article template set and simplify the article creation workflow for editors. We also wanted to increase community engagement by introducing new features such as ratings and comments. In addition, my personal goal was to rethink and improve upon the design documentation that gets handed off to engineers.

Challenges

Our existing article creation system had no organization whatsoever. There were dozens of one-off’s that were created willy nilly for special situations. No documentation existed as to what these special cases were, or where or why they existed. We needed a solid template system that could support all of the various needs of the editorial staff, while providing structure and consistency throughout the site. We also needed an effective documentation system that could be updated easily with ongoing site changes.

Process

My first step was to conduct an exhaustive inventory of what article variations already existed on our site, in order to determine what my template system needed to support going forward. I also had reservations about our current process of handing engineers 50-page PDF specs. I interviewed engineers about their existing workflow, and about what was and wasn’t working in terms of the design documentation that they received from my team.

Visual Analysis of Existing Articles – Results from the Article Inventory

Yahoo Sports Article Redesign - Content Inventory and analysis

Yahoo Sports Article Redesign - Content Inventory and Analysis

Whiteboarding

A big part of this project was working with the editorial staff to learn about their processes and their needs, and to document that information. I facilitated a number of meetings, using whiteboard sketches to capture ideas and decisions.

Yahoo Sports Article Redesign - Whiteboard brainstorming and facilitation

Sketches

As always, early in the ideation phase of this project, I started with tons and tons of rough sketches.
Yahoo Sports Article Redesign - Concept sketches

Wireframes and Diagrams

Ultimately, my sketches were refined into diagrams like the ones shown below.
Yahoo Sports Article Redesign - Information architecture diagrams

Yahoo Sports Article Redesign - Information architecture and interaction design diagrams

Yahoo Sports Article Redesign - Information architecture and interaction design diagrams

New Prototype-as-Spec Design Documentation

I developed a new style of design documentation that I call “Prototype-as-Spec.” I hand-coded functional prototypes of the article creation tools. Included was an annotation toggle for the engineers who would complete the backend development of the tools. Engineers could turn contextual annotations on and off and a cookie would remember their selection across sessions.

Yahoo Sports Article Redesign - Functional prototype and specification

Yahoo Sports Article Redesign - Functional prototype and specification

Results

As a result of this project, I was able to reduce the number of article templates from over 20 to 3. I created a comprehensive new toolset for editors which significantly streamlined their workflow. I received extremely positive feedback from our engineering team on my new Prototype-as-Spec design documentation style.

« Back to the Portfolio