Last week we launched the redesigned Division of Development (opens new window) & Alumni Affairs (opens new window) websites. These sites allowed us to accomplish some firsts that we've been working toward for some time.

The overall goal of the redesigns was to bring both into a similar look, feel and functionality. Previously, both websites were managed separately, in different content management systems and servers. They were not able to share content and the Alumni website didn't utilize university resources. We set out to change all that and more.

Division of Development

(opens new window) (opens new window)

Over time the needs for the Development website had changed and we needed to refocus the homepage and the content within the site. The first thing that we changed from the old (left) to the new (right) was the centerpiece focus. We brought the stories that were buried and put them up top, front and center. These stories are what change the heart and mind of alumni and donors. The homepage highlights a handful of stories but we built a full donor stories archive (opens new window) where all will be available long term.

We then pulled the news and events up, but also created a clear left column for calls to action. This simple homepage gives the visitor an overview of what is going on while at the same not being overwhelming.

Alumni

(opens new window) (opens new window)

The Alumni website is actually two websites, the front facing homepage and a separate members-only community. The focus of our project was to reconstruct the front-facing site while giving a small facelift to the community. Keeping with the same overall feel of the Development website we kept the homepage simple. Alumni engagement events are highlights in the main centerpiece area, three main calls to action are highlighted in the middle and below a list of news, events and longer standing promotions.

The largest change though to the Alumni website was the information architecture. Between the time we started the project and finished, the university changed from a dues-based alumni model to a free one. This change had us and the Alumni staff re-thinking the purpose of every page on the site. It resulted in far fewer pages but the ones that remain are very focused.

Mobile and other firsts

(opens new window) (opens new window)

I made an announcement a few months ago about only launching responsive websites from here on out and we are committed to that. This site started far before that announcement and was the first start we tailored to mobile from the ground up. The wireframes, designs and everything for this website started and continued in the browser environment instead of isolated in Photoshop. The end result is a very usable site on mobile, tablet and desktop, and we learned a lot along the way.

The first thing we tackled is how to handle multiple tier navigation without overwhelming or underwhelming the user. I've talked a lot in the past about how 60 percent or more of site visitors enter on an interior page and how to design the best experience (opens new window) around that. Those visitors need to orient themselves quickly with where they are on the site and where they can go from there. We wanted to keep the same approach we take with desktop websites, allow the user to get a sense of where they are at a glance and identify the local navigation quickly. We came up with a simple solution: on a small screen show the breadcrumbs of where a user is on the site, show the most local menu expanded up top, and give the visitor a "Menu" button to expand the full top menu. See an example, above, of the small screen (left) vs. full desktop version of the same page (right).

In addition to the mobile-first responsive design, these two websites are the first to feature a new global Wayne State University header that is also responsive. I will probably do a full post on it once it's officially released. We are still working through a few specific browser quirks. But overall we were able to reduce the HTML, CSS, and image footprint of it by about 60 percent of the previous header. It only includes a single image, utilizes the same icon font that is used on the pages themselves and is fully responsive.

Lessons learned

Because our redesign projects typically span 9-12 months from initial meeting to launch, that leaves a lot to happen in the Web world. This website is no exception, over that span of time the CSS framework we used, Foundation, for the wireframes and the resulting design, updated from version 3 to 4 and changed completely (for the better) the way it handles HTML and CSS. By the time that happened we couldn't go back and redo everything. The biggest lesson we learned from this was we have to be nimble when it comes to locking ourselves into a single framework.

The biggest lesson we learned though was about browser support. Most all of the newest Web technologies are supported fully only in the newest browsers. This isn't a problem for most (95 percent+) of our external website visitors. But the world of higher education is filled with large enterprise systems that our campus relies on every day. Unfortunately those systems are slow to update and support those most recent browsers and thus there are a larger portion of computers on campus running older versions of browsers (read Internet Explorer 8). Recently a rash of Web technologies have begun (opens new window) to (opens new window) drop (opens new window) IE8 (opens new window) support (opens new window), the Development and Alumni websites were not immune to that speed bump. So we had to put in an uncomfortable amount of small bug fixes and ended up relying on respond.js (opens new window) to bandaid the situation until we see IE8 visitors drop off enough. I'm hoping to have an official announcement soon about what are browser support will be long term.

View the sites: http://giving.wayne.edu/ (opens new window) and http://alumni.wayne.edu/ (opens new window)