Marywood University Homepage
Marywood University recently underwent a redesign to make the page more user-centered and visually dynamic.
The existing Marywood homepage featured a large image focusing on the “Lead On…” marketing campaign. These images linked to profiles of students and alumni, and most were simply a head-shot of the student with a blurred background.
Although the content within the profiles is very robust, the marketing and web development teams felt that the Lead On profiles were a poor use of the prime real estate of the homepage, because:
- The profile images didn’t change on a regular or consistent basis.
- The layout and formatting of all of the profile images were very similar, and the similarities, when tested on users, caused banner blindness (meaning most of the frequent homepage visitors didn’t even look at or click on the profiles).
- The featured image was loading using Adobe Flash, which needed to be eliminated because of security concerns and its incompatibility with mobile devices such as smart phones and iPads.
The focus of the homepage redesign was to make a strong visual impact with professional photography, and to use the large feature area to draw attention to important news and events on campus. In addition, the large feature area would also guide users deeper into the website, allowing the web development team to bring attention to the vast amount of creative, interesting, and dynamic information that could be found within the department pages.
After much research, testing, and revision, I developed an eye-catching solution. When appropriate, images would “pop” out of the the standard feature image frame, creating an energetic, 3-D effect that would draw the homepage visitors deeper within the site.
This image was used to target new students by demonstrating the “college experience” as it would appeal to a high school student looking for the right college. The image linked to a robust Residence Life webpage that I created in conjunction with our programmer. The site highlights the features of all of the residence halls in a fun, dynamically driven database ‘cork-board’.
The baseball photo was used to promote the newly redesigned Athletics department website and announce the opening of the Men’s Baseball season. The photo of the ball player feels as those he’s actually floating on top of the homepage, and created an enormous amount of click-through traffic to the Men’s Baseball season schedule on mupacers.com.
The student and professor in this photo were used to promote the new graduate program offered by the School of Architecture. The dynamic appeal of the one-on-one student/teacher relationship shows off Marywood’s personal attention while sending homepage visitors to a content-rich School of Architecture site, which also had been recently designed by our team.
Once completed, it was decided that the homepage image would change at least weekly. Over the past several months, this has proven true, and there are often weeks that the large homepage feature image changes up to four time!
The feedback we’ve received on the homepage images across campus has be extremely positive, and our target audience of frequent homepage users as well as new users have reacted favorably to the update and get excited to see what’s next.
The bottom half of the Marywood homepage is dedicated to news and events. In the old design, the bottom-half of the page was divided into 3 columns: Datebook, News & Announcements, and a miscellaneous third column of other announcements. The information that was displayed in each column was pulled from a news or calendar feed, and was displayed as a bulleted list linked to news or event pages within the website.
Although much of the information within the particular feeds was interesting, current, and homepage-worthy, there seemed to be no way to distinguish one list item from another. Because of the lack of imagery to associate with the news and events, the stories weren’t drawing any immediate interest causing a less-than-desirable click-through rate.
In addition to the lack of imagery, we learned that the actual headings were confusing the visitors. The first column titled “Marywood Datebook” listed events from our calendar. Because of the inconsistency in naming (Datebook, Calendar, Events, etc.), the heading confused our homepage visitors.
This problem continued in the second and third column. News & Announcements were labeled as the second column, but what is the third column? There is no heading, and it’s definitely visually separated from the second column by the use of a light blue background. The items listed there, however, really were News & Announcements.
Our overall goal for the news and events section of the homepage was to increase the click-through rate on news stories, and to create more visual impact and presence for the stories. Instead of pulling in feeds from the Calendar and the News page, the homepage stories would be hand-picked. We wanted to create visually interesting photos, shorten the headlines, and create a sentence or two description for each event.
In addition to redesigning the homepage, our goal was to make the news releases and calendar event pages more content-rich. It’s important that the information the we so carefully tailored on the homepage would lead visitors to just as visually interesting and informative information. Otherwise, our visitors wouldn’t continue to click through to read the articles.
Instead of a three-column solution, we decided to move to four columns. Three columns would be used to display news or events (including an image, link, headline, and description). Using a less-is-more approach, we decided that it was better to have three very well-developed stories featured in this section, rather than eleven (or more) that really didn’t stand out. In addition, we decided not to separate the information into categories as it previously was. This area would hold news, events and announcements in an order of importance that was decided by the marketing and web development teams (or people, instead of headings).
To be able to hold more stories, we also created an “arrow button” that could be used to cycle through to older stories. Ultimately, this section can hold up to nine stories, with three shown at a time.
The fourth column (furthest to the right) proved to be a catch-all for all the important information that NEEDS to be on the website, but isn’t necessarily able to translate visually into a story. This type of information is separated into sections, and using an accordion style navigation I was able to conceal a lot of the information from plain view unless that menu option is selected. Not only does this allow us to display more information in a smaller amount of space, but it also serves the purpose of being a release for members of the web and marketing team that may need to get important information on the homepage quickly and easily.
The new homepage serves the needs of our target audiences, and I feel that the previous problems were remedied and the goals were successfully completed. Instead of one stale head-shot image of a student smiling, the new homepage offers variety, energy, and excitement. It represents Marywood University in the positive light that it is: a small college dedicated to personal attention that also has quality education programs and lots of interesting things to hear about and participate in.
My assessment of the homepage redesign rang true after hearing from the President of Marywood University, Sr. Anne Munley:
In this morning’s President’s Cabinet meeting, Sr. Anne expressed her enthusiastic approval of the new “look” of our homepage, and she asked me to extend her appreciation to all of you for your thoughtful, creative and diligent work on this significant improvement. (forwarded from the Director of Marketing & Communications).