Case Study of a Web Redesign: The Top-Level MIT Pages

Robyn Fizz

On January 1, in the spirit of the new year, a redesign of the top-level 
MIT home pages was launched at
  
http://web.mit.edu/

The rollout marked the culmination of four months of work, from initial 
brainstorming through design and testing. 

Key members of the redesign group were Suzana Lisanti, leader of the 
Campus Wide Information Systems (CWIS) team, and consultants Matthew 
Wall and Julie Yang from the Department of Mechanical Engineering. Other 
contributors were Bruce Bernstein, Director of the Publishing Services 
Bureau; Laurie Cohn, a multimedia consultant; Graham Ramsay, a 
photographer; and Debi Fuchs of the CWIS team.

Brainstorming
To start, the redesign group held several brainstorming sessions where 
they discussed a variety of visual ideas. They played with treatments of 
the MIT dome and Mens et Manus logo before stepping back and deciding 
that they first needed to define the identity of the site. They came up 
with three elements of MIT culture that the Web pages should convey:

*  Excellence in education and research

*  A passion for inventing the future
 
*  A communal tradition of humor, embodied by hacks such as placing the 
police car on top of the dome.

Based on these traits, the team decided on an uncluttered look that 
would show logic in organization and facilitate access to information. 
Excellence in research and academics would be evident in the information 
provided, and achievements highlighted through a spotlight link. As a 
way to focus on invention and humor, the top of the first page was 
targeted as a location of change and surprise.
 
Site Structure
Another piece of the redesign was to reconsider the information 
structure of the MIT site. The team worked to achieve dual access - 
making it possible to locate information by an official name (for 
example, by looking up Benefits Office under administration) or by the 
resource provided (employee services under resources). The groups link 
offers yet a third way to get at information: it emphasizes the 
communities and societies that make up MIT.

The team also identified first-level topics from the original home page 
that had grown in volume and become unwieldy. These were split into more 
manageable topics (for example, the single page Administration and 
Services was split into two distinct categories, Administration and 
Resources).

One major addition to the infrastructure of the MIT home pages is a 
campus map, available through the map link on the top-level page or by 
clicking on the compass icon at the top right of second-level pages. In 
addition to helping people physically navigate around MIT, the campus 
map provides yet another mode of access to information at MIT.
   
Design Principles
Having defined a site identity and information structure, the team 
nailed down a set of design principles. Here's a summary of these 
principles and how they were implemented.

*  Accessibility. The MIT site serves a broad spectrum of users: from 
high school students and their parents to corporations and alumni. The 
team recognized that the site would be accessed by many different Web 
browsers. To maximize accessibility, they chose Netscape Navigator 2.0, 
which includes tables support, as the standard browser for which they 
would design. They also decided that all of the pages (with the 
exception of the campus map) had to be readable by a text browser such 
as lynx.
 
*  Speed. The top-level pages serve as a gateway, passing people through 
to the information they seek. Target information is provided by MIT's 
schools, labs, programs, and offices. To ensure quick pass-throughs, 
graphic-intensive pages at the top level were ruled out.

*  Clearly defined visual elements. The team felt that MIT has such 
strong name recognition that the three letters, used as a graphic, 
should be central to the site. The banner on the second-level pages is 
a watermark of the MIT letters. This banner works as a navigational 
device: you can select menu items overlaid on the watermark to move 
around the site. A smaller version serves as the "return to the top 
page" icon.
  
*  Color scheme. With the MIT banner as the key visual element, the team 
opted to use the MIT colors throughout the pages. On a background of 
warm off-white, hyperlinks are displayed in burgundy and viewed links in 
gray (Netscape defaults are blue and purple). Discrete colors were 
selected in order not to conflict with the designs of other MIT sites.
 
*  Development of a "family" of items. Commonly used interface elements 
can enhance a visitor's sense of a unified Web environment. For example, 
in the MIT home pages, the compass icon always indicates a link to the 
campus map. A starter set of these elements - which can be used on other 
Web pages at MIT - is available at
 
http://web.mit.edu/interface/

Testing
Once the pages were developed, representative members of the MIT 
community were asked for feedback. The team also presented the pages to 
Professor Ed Barrett's class "Communicating in Cyberspace" (21W785), and 
received comments from MIT students who are studying analysis and 
authoring of cybertexts. Many of the suggestions from both groups have 
been incorporated in the redesign.

Back to the Beginning
Having gone through a full cycle of redesign, the team has some advice 
for starting out. Don't skip initial brainstorming sessions, no matter 
how well you think you know your subject. It's important to determine 
the identity of the site before going forward with graphic design. Once 
you've defined an identity, it's much easier to choose images and 
evaluate suggestions, because you have a vision against which to compare 
them.