New Home Page Design Concept
After more than a month of work, multiple design concepts and revisions, and input from prospective students and many staff and administrators from across the college, we are pleased to unveil the new Saint Anselm College home page design.
During this stage in the project, BarkleyREI presented us with four distinct home page concepts for review. Each concept featured a Flash multimedia area at the center of the home page focused on telling stories using video, photo/audio slide shows, and photo galleries. Based on the feedback we gathered during the initial review of the four design concepts, we narrowed our choice to a single design, what we are calling “The Wall” concept. We then made changes to the design’s final color palette, the number of stories presented, interactive elements, font sizes, logo treatment, etc.
“The Wall” Concept – An Overview
Site Navigation
The new home page design features three levels of navigation – (1) global navigation (Admission, Academics, Campus Life, Institutes, Centers, & the Arts, and Athletics; (2) secondary navigation consisting of audience landing pages; and (3) tertiary navigation, which in the design is located under the “Resources” drop-down menu.
Multimedia Area
The multimedia wall will be driven by Flash with stories stored and managed in XML. When the home page first loads, visitors will be presented with a large horizontal campus image – an image that provides a sense of place to site visitors. The single, large campus image will be randomly chosen on page load from a directory of 25-30 stored images. As the page loads, The Wall will be populated with the multimedia stories. We chose this route to avoid the dreaded loading… loading… loading… messages, which can often be seen in some Flash designs. Our main goal is to not annoy frequent home page visitors with an over the top Flash element, but to have the loading of the multimedia be subtle and load quietly in the background. As the page loads, multiple stories will load within The Wall area. Home page visitors can also be more selective and choose to only show stories relevant to the keyword filters shown on the page. In this case, we are using the keywords Do. Lead. Solve. Achieve., but the final keywords selected for this area will be different.
When you mouse over an image in The Wall, it will be highlighted and a headline will be shown. When you click on a story, an overlay box will open on top of the home page (important note: this will function differently than a pop-up window). Once the overlay box is opened, the box will present content featuring a video player and text, an audio/photo slide show and text, or photo gallery and text. Each box will also feature a “Dig Deeper” link area sending visitors deeper within the Saint Anselm College Web site. In the end, visitors can spend most of their time perusing the content within The Wall without ever having to leave the home page.
News, Events, Virtual Tour, and Featured Content
Directly below The Wall, visitors will be presented with news headlines, event listings, and a link to the new virtual tour or a featured college video. Both the news and events areas will utilize “slider” or “accordion” functionality. Featured news headlines or events will be open on page load and other headlines or events can be viewed by clicking the “+ View” link next to each listing. By clicking the “View All,” visitors will be taken to the new event calendar or the college news page.
Super Footer
The footer on most Web pages is underutilized real estate. So in the new site design you will see an expanded footer featuring much more information than the college’s address and phone number. The super footer will include lists of important links for prospective students (Quick List) and the campus community (On Campus). It will also include a customizable “My Links” area where where visitors can choose their own frequently accessed links to display in this area (set using a cookie). This will be useful to visitors who use the same computer all the time for accessing the college Web site. Lastly, the super footer will also feature links to social media sites where the college has a presence, including Facebook, Twitter, Flickr, and YouTube.
How We Got Here
To get to this point, we built upon the work that had been done during the previous information architecture, content outline, and wireframe stages (read this blog post for background) and these stages were informed by what we learned during on-site discovery and strategy. During each stage we’ve sought feedback from key staff and administrators. When it all comes together, a redesign project is really a series of building blocks with each new layer built upon the previous layer. And as is the case with any successful building project, you must start with a strong foundation before you build your main structure.
Kudos
We are very grateful for the work of BarkleyREI, our Web vendor. They have been a great partner to work with and we feel their home page design and the emphasis on telling stories really captures the essence of Saint Anselm College. We also owe a debt of gratitude to the many people who provided feedback on the home page designs.
Next Steps
We are currently reviewing wireframes for our level page templates (the pages listed in our primary and secondary navigation). We’re reviewing technical development plans, including discussions with our new CMS vendor Ingeniux, and have a finished content tracker for tracking the production of all new content as listed in our content outline, among many other things. We’ve also spent time recently revisiting the project budget and schedule, and planning for future project deliverables.
Comments
3 Responses to “New Home Page Design Concept”
Leave a Reply
[...] the approval of the new home page design, we’ve been working with BarkleyREI on designs for lower level page templates. You will see [...]
[...] planned for three “engagement” Flash pieces to be used on the redesigned site – “the Wall” gallery which will be featured on the college home page, a virtual tour, and “Faces.” [...]
Perhaps I am from the old school (class of ‘64), but I feel that this proposed redesign is entirely to busy. I also think that there is much too much blue and would like to see some of the colors from the existing site, reds for example. Thanks