Visitors to JHUniverse on Feb. 9 found a homepage transformed from what it had been only the day before. New graphics, new organization, new links-- www.jhu.edu had a whole new look and structure. It was literally an overnight change, but a change that had required two years of effort. "Overnight" can be a long time.
The prior JHUniverse homepage debuted in late 1995. It was a big one: large images and lots of information stacked in a vertical layout that required the user to scroll down a long page. The images took many seconds to load, especially if you had a slow Internet connection. You could easily go back to the previous page, but making your way to other parts of the site was complicated.
A few months after the homepage went up, Debra J. Gips, information manager for the Office of Communications and Public Affairs, initiated discussions with Dennis O'Shea, executive director of Communications and Public Affairs, and Lee Watkins, assistant director of academic computing, about upgrading the site. She was concerned that JHUniverse keep up with evolving design standards. Everything about computers changes quickly, and design on the Web has not been an exception. "My argument was that if the Hopkins site appears dated in terms of design, then our content, no matter how current or comprehensive, also appears dated, less inviting and less engaging," says Gips.
As the group formed objectives for a revamped layout, Gips worked with designers Susan Perkins and Megan Williams from Hopkins' Design & Publications. Their goal was a page that loaded faster, was easier to use and had enhanced content compared to the previous incarnation.
This posed a number of challenges for its designers. As an example, Perkins cites the selection of images. She needed something that signified each section without communicating a misleading or confusing impression. She tested various options and recalls, "You just can't believe the number of interpretations that came in. You know, some people see the face of Jesus in a Cinnabon. It's really amazing."
The designers had to experiment with type to ensure that all of the pages would be readable on average computer monitors, the 14- and 15-inch screens that do not have the sharp resolution of the higher-end, 21-inch monitors used by graphic artists. They had to be cognizant of how colors change from one monitor to another. "What I selected as a blue might come off as bright purple on somebody else's screen," Perkins says. "We picked from the color palette that gives the best resolution for lower-quality screens. You sort of have to put subtlety and nuance aside. Subtle variations of tone just don't come across on most standard 14-inch screens with 256 colors."
Another difficulty in designing a site like JHUniverse is the sheer volume of information that must be organized. Watkins says that 3,330 Megabytes of data reside on the site, and it's growing all the time. There are over 8,000 Web pages stored on the Homewood Academic Computing server hardware, and the design team had to devise the least confusing means of navigating to them all.
To cut down on load time, they used smaller, sharper graphics. They turned those graphics into clickable "image maps" that link the user to other sections of the Web site; the new images are not just decorative, but now help you navigate. To maintain a feeling of continuity, they derived new images from familiar elements of the old page.
The new homepage and each second-level subpage features a vertical color bar that contains an index to the overall site. Now, from any main page, the user can link directly to the JHUniverse homepage, Academics, Hopkins Medicine, News & Information, Alumni & Development, Libraries & Info Technology or any of the other principal sections of the Web site.
The redesign effort went beyond cosmetics and streamlined navigation. The site boasts enhanced content. The listing of schools, centers and affiliates is more comprehensive. Most of the primary pages have been reorganized for clarity and easier use. The Hopkins Announcements page has been revamped as Today@JHU. Says Gips, "With a catchier name that suggests more immediacy, we are hoping people will use Today@JHU more by contributing more announcements and visiting it more frequently."
Two new primary pages are now part of the site: Academics and Johns Hopkins Medicine. The former, which includes a helpful link to admissions, guides the user to all information about academic programs; for example, a visitor can now find listings for all courses in a particular discipline, no matter which school they're given in. Says Gips, "I get countless inquiries about admissions and programs at Hopkins. Having all the necessary information on one group of pages is fabulous." The latter addition is a much-needed annotated index to all of the Hopkins medical information available online.
Some areas of the revamped site will grow in the weeks ahead. There's a link to JHU A-Z on the navigational color bar. This is a new, comprehensive index of Hopkins departments, programs, publications, organizations and services that maintain Web sites of their own. Gips says, "We hope that people will write and let us know of sites that are missing or new ones that need to be added." She adds, "It is important to keep in mind that JHUniverse is not 'done' with this new design. The pages that are available today are merely the second generation of a site that will, over time, continue to grow, evolve and improve."
To offer comments and suggestions, or to add a URL, click on "Suggestions" on the site's vertical color bar.