Pittsburgh Tribune-Review newspaper website redesign

These samples demonstrate how I approached a redesign of the website for one of Pittsburgh's major daily newspapers. This project took place during the summer of 2007, and for a good chunk of it I was working with Christopher Ward.

Challenges

  • Evaluate users’ information needs through interviews, surveys, and think-aloud user testing.
  • Determine the best and worst practices of competing news websites.
  • Create wireframes and high-fidelity models that implement best practices in accessibility, usability, and design.

Tools

  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe InDesign
  • TextWrangler

User and competitive research

First things first: it's incredibly important to understand the information needs of a website's users. We dug right in to learn more through the following methods:

  • Examining existing demographic data of the paper's readership;
  • Analyzing site traffic to determine the most popular content and how users were getting to it;
  • Interviews with the organization's staff (employees are users, too!);
  • An online reader survey;
  • Think-aloud user testing of the current site to explore some of the design issues we perceived users would have with the site.
  • Benchmarking of competing news websites to determine the best and worst design and usability practices.
  • I also independently conducted a contextual inquiry of college-age readers to determine their goals and aspirations while reading news websites.

Usability and design analysis

(Click on any image to see a larger version and see some additional commentary.)

Once we had a better understanding of how users approach the site, we conducted an in-depth analysis of the current website. At right is a screen capture of the original homepage circa July 2007 and a small sampling of the problems we noted.

newspaper website homepage homepage thumbnail
click to embiggen
Pittsburgh Tribune-Review original homepage
newspaper website critiques thumbnail
click to embiggen
Original homepage critiques

Sketched wireframes

After we had finished evaluating the site, we began sketching simple wireframes and started exploring better methods to navigate the site and display information. To the right are some of my early hand-drawn sketches for the homepage that show some of my first ideas for regrouping and streamlining the site's existing content.

newspaper website homepage sketched wireframe thumbnail 1
click to embiggen
Low-fidelity wireframe
newspaper website homepage sketched wireframe thumbnail 2
click to embiggen
Another low-fidelity wireframe

Digital wireframes

Eventually I moved to Illustrator and Photoshop, where I started to really flesh out my early ideas. The biggest challenge here was creating a design framework that could eventually work across the thousands of pages of content that a newspaper website has to display. At right are the wireframes for the homepage and an article page.

newspaper website homepage digital wireframe thumbnail image
click to embiggen
High-fidelity homepage wireframe
newspaper website article digital wireframe thumbnail image
click to embiggen
High-fidelity story page wireframe

Final models

To demonstrate to the site's stakeholders how much more visually appealing and easier to use our proposed site would be, we put together some models by fleshing out the wireframes with sample content. Since, due to time constraints, we weren't going to be coding thousands of pages, our goal here was to give the organization a solid set of foundations and ideas they could use to improve the site.

newspaper website homepage model thumbnail image 1
click to embiggen
Final model homepage, top half
newspaper website homepage model thumbnail image 2
click to embiggen
Final model homepage, bottom half
newspaper website sports page model thumbnail image
click to embiggen
Final model sports page
newspaper website sitemap. thumbnail image
click to embiggen
High-level site map

Am I doing it wrong?

Comments? I don’t do open comments. Life is too short.

If you have something to say, get in touch via .(JavaScript must be enabled to view this email address) or on Twitter.