Portfolio: GreenBuildingAdvisor.com — Web site UI architecture

GreenBuildingAdvisor.com (GBA) is "the complete source for designing, building and remodeling green homes." The Web site provides green basics, detailed drawings, project management and more. The publishers said that the key to green building is design, and that this guideline applied to the site as well.

There is a lot of information, much of it interactive. The publishers wanted an architecture that helps users find what they want and can grow with the site. We helped develop it through personas, customer interviews, a Group Design Workshop, prototyping, design reviews and more.

See other work for BuildingGreen.

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

Search example

Search results update as users search for CAD drawings (left) and design strategies (right). "My GBA" projects store them, plus contact information for team members.

Progressive disclosure example

The information hierarchy helps experts get what they want quickly, and helps novices learn. The page about foundations (left) uses "progressive disclosure" to show more detail only as the user wants it (right).

The UI architecture design process included:

Persona development In our personas, we created a set of typical users to keep in mind for design, marketing, QA and other tasks.

Customer interviews Just a few interviews helped us see that a particular feature would not meet customer needs. This saved a lot of design and development time.

Group Design Workshop This collaborative brainstorming session included members of both publishing companies, and some typical users. As always, the Workshop produced a great starting point for design prototypes.

Prototypes and design reviews A series of design exercises helped us identify what each section of the site required. We had frequent design reviews to go over prototypes. The information hierarchy, page layout, interaction model and navigation structure were all part of the discussion.

Card sorting We saved the home page design until it was clear what the site included. A card sorting exercise showed what each stakeholder thought was important. It's a great technique for categorizing information and led to the overall navigation structure.

See other work for BuildingGreen.

Back to previous page