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.
- 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.
- Adobe Photoshop
- Adobe Illustrator
- Adobe InDesign
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.
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.
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.
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.
Comments? I don’t do open comments. Life is too short.