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