Portfolio: BuildingGreen.com — Web site analysis and redesign

BuildingGreen.com provides independent information about green design through print and Web publications. The Web site needed an update to fix problems with finding information (navigation) and overall appearance (visual design). It was text-heavy and that the home page didn't tell the story very well.

Initial usability testing helped us understand how people wanted to use the site; follow-up testing showed us that we met our goals.

Significant improvements to the site include:

Simplified navigation, helping users find what they want quickly.

A layout system that allowed creation of a few page templates, making the site easier to use and maintain.

More free information before requiring a subscription (but not too much). Discussions about the business model and user needs led to this, which should actually increase subscriptions.

Article tools to give a quick overview of long articles; enable discussing, printing and emailing articles; and clearly point out related information.

Jump down to see the steps in the design process after these screen shots:

Beta version of the new acm.org home page

The new home page

The old home page

The old home page: it was very busy and tried to do too much

The design process in this project

The design process is flexible and can meet your needs. We used these steps:

BuildingGreen had done a survey of their users to learn what they needed in the site.

A Group Design Workshop helped staff members share their ideas for the site and helped Interaction Design understand details of their goals. As always, it was a great starting point for the design prototypes.

We developed personas based on survey information and interactions with users. We reviewed them as we worked on the project, including usability testing. (Personas describe typical users and their tasks. Read more about personas.)

Recommendations about writing and presentation ensured that the design would remain helpful to users.

Interactive prototypes demonstrated the feel as well as the look of the design.

Once the interaction model was fairly complete, the graphic designer began to develop a visual design model.

We did two rounds of usability testing. The first was very informal, but provided great feedback on what users want at the site. The second round used the initial visual designs

A few rounds of revisions and discussion about things like displaying long lists of related information completed the design.

Back to previous page