Carnegie Mellon University College of Electrical and Computer Engineering website redesign

These samples demonstrate how I approached a redesign of the website for the College of Electrical and Computer Engineering at Carnegie Mellon University. This project took place during the spring of 2007. I didn’t do this alone: I worked along with Christopher Ward, Nathan Pose, and Sushmita Subramanian.

Challenges

  • Redesign an existing large-scale website while maintaining the site’s unique identity.
  • Simplify and streamline the site’s content to better meet visitors’ information needs.
  • User-test the proposed site models to explore if our revisions solve some of the known problems with the current site.

Tools

  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe InDesign
  • TextWrangler
  • Adobe Dreamweaver

User and competitive research

As with the newspaper revision, we first tried to learn as much as possible about the site's users through the following methods:

  • Analyzing site traffic to determine the most popular content and how users were getting to it;
  • Interviews with the site's webmasters;
  • Card sorting of the site's content with typical users to determine how to better organize information to meet their expectations;
  • 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 college websites to determine the best and worst design and usability practices.

Original site

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

Here are some screen grabs of the original site. It's certainly not bad, but it's visually very dense and could use some polish.

college website Current Students page thumbnail image. Click to expand.
click to embiggen
Original home page
college website Visitor's Information page thumbnail image. Click to expand.
click to embiggen
Original Visitors' Information page

Wireframes

Once we had a better understanding of the site's users, their expectations, and some of their problems with the current site, we started creating wireframes to plan out better ways to organize and display information on the site. At right are two iterations of wireframes for the 'Current Students' page that we presented to the site's stakeholders.

College website Current Students first wireframe page thumbnail image. Click to expand.
click to embiggen
A very early wireframe
College website Current Students second wireframe page thumbnail image. Click to expand.
click to embiggen
A later iteration, after client feedback

Hi-fidelity html and css models

After the web team approved our wireframes, we created a number of html models to demonstrate how the site would work in action. Further, functioning models allowed us to do think-aloud user testing with college students to really help improve the site as we built it. At right are some samples that show our iterative process, from early HTML, to user-testing, to the final models we presented to the client.

College website redesign early HTML page model thumbnail image
click to embiggen
Early 'Current Students' page model
College website redesign second HTML page model thumbnail image
click to embiggen
Revised 'Current Students' page model
College website redesign user testing commentary thumbnail image
click to embiggen
Lessons from user testing
College website redesign user testing commentary thumbnail image
click to embiggen
Final Current Students page HTML model

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.