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.
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.
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
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.
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.
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
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.
Wireframes and 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.
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.