Back in August, we launched a redesign of the Undergraduate Admissions suite of websites, which includes the following sites:
Each of these sites plays an important role in recruiting prospective students and helping those who decide to attend UA through the admissions and enrollment process. While each site has a distinct purpose, it is important that they all function together smoothly, creating a hub for future students making their way to the University.
What we needed was a suite of websites with enough unity to create the feeling of a hub and enough independence to allow each site to fill the needs of that department. Financial Aid wouldn’t need to work quite like Undergraduate Admissions, or Bama Bound, and so on, but they would need to live under the same umbrella.
Another important point was that Undergraduate Admissions has more content types than the other sites, and in some ways could be seen as the starting point for the entire suite. This meant we weren’t quite dealing with 4 parallel sites, but something more like 1 main site with 3 related sites.
From these basic needs came 2 design challenges:
- Design a site structure that reflects the interconnected nature of these sites while leaving enough flexibility for each site to satisfy the needs of that unit
- Design an unobtrusive and usable navigation system to make that structure easy to understand and navigate
Certainly these weren’t the only 2 design challenges to solve in building these sites, but they were important, so I thought I’d give a quick summary of how we addressed them in hopes somebody else can benefit from our experiences on this project.
First, we came up with 2 home page templates, both of which share a look but have different layouts. One layout was used only for the Undergraduate Admissions home page, allowing for interchangeable modules and feature content, elements that are not necessary on the other three sites. The layout used for Undergraduate Scholarships, Financial Aid, and Bama Bound Orientation, uses a strong, wide-aspect-ratio photograph, customized for each site, along with introductory text and the standard site navigation.
These 2 home page layouts helped to give the sites a sense of unity while still allowing freedom for each to operate. However, the 4 sites would not be sufficiently connected until we implemented some kind of intuitive way for a user to navigate between them.
The navigation problem was solved with the 3-item horizontal menu in the upper-right corner of each page on the site. When the user is viewing an Undergraduate Admissions page, she’ll see Scholarships, Financial Aid, and Orientation, as options in this menu. When she moves to a page on the Scholarships site, she’ll see the other 3 as options, and so forth.
I think designing this menu to be fairly small and placing it in the corner of the page makes it easy to find and use when needed, but still allows the content of each page to be at the center of the user’s attention.
Again, there were a number of decisions and steps in the design and development of the Undergraduate Admissions suite of websites, but designing the home page layouts and finding the right navigation to move between them was a key part of the process.
I hope this post is helpful in some way. If you have any questions about the Undergraduate Admissions suite of websites, how they work, or how they were designed, please feel free to comment.
Filed under: Design
[...] Common style sheets across multiple sites Posted on May 18, 2009 by Matthew Muro While designing UA News, Dialog, and Research Magazine, it quickly became apparent that the similarities between the three sites lent itself well to using a common style sheet. Because these sites share content and are related in some way, it was important that the design elements should be similar across the board to create that feeling that they were all connected—a suite of sites. Creating this sense of connection is something that the Admissions sites have done very well. [...]