Wayne State Web Team

Wayne State University Web Team Blog

Redesign: Computing & Information Technology website

(opens new window) (opens new window)

Just in time for classes to start we've rolled out a new Computing & Information Technology (opens new window) (C&IT) website. The new site takes in to consideration all the feedback and analytics we've gathered since the last relaunch in 2010 (opens new window).

# Information overload

C&IT offers a lot of services, and everyone at the institution has to interact with a handful of their services every day. We discovered that the needs of the site change based on time of year and audience. Faculty/staff are always in need of base services but often don't realize the full breadth of what C&IT offers. Students who have just enrolled need to get connected to the network quickly and communicate with their professors. This website is key to making that a seamless process.

The previous homepage and directory of services put everything right out front in order to be "comprehensive". But this approach suffered from information paralysis (opens new window), lots of links, lots of text, and too much to scan. Visitors ended up clicking on the main menu item for "Services" instead of going to the category of service they needed. The "Services" pages did have the same information as the homepage but presented it in a slightly different way.

# Service catalog before (left) vs. after (right)

(opens new window) (opens new window)

In conjunction with C&IT we tackled this information overload on two fronts. The first is a simplified list of services on the homepage organized by "category" which include a colored image. Less information + visual cues means it is easy to scan.

Diving deeper in to the services landing page shows even more optimization. Building on the idea of "discovery" we added a few options in addition to the simple A-Z list. This page now allows for organization by audience, category and built-in search. This method helps both the frequent and infrequent visitor find what they're looking for with context about additional services they may not know about.

# Building on consistency

The previous website had a large focus on getting out as much information about a service as possible which seemed very logical. But a consequence of having each department maintain their own pages led to inconsistency. Some areas had a lot of resources on their pages while others just had the bare minimum. We knew being able to compare services apples to apples would help visitors feel confident in their decision based on Web content instead of having to call and talk to someone.

# Service information before (left) vs. after (right)

(opens new window) (opens new window)

As you can see from the two screenshots above, the previous version on the left has a lot of information in a full paragraph, it takes time to scan and read it. The new website breaks content in to specific fields so they can be displayed under common headers and easy to scan formatting.

# Extending the CMS

This consistency was accomplished by a small but powerful addition to our CMS, Custom Fields. Inspired by Wordpress (opens new window) we had a need to attach structured information to each page. What we figured out after adding the ability for each site to have their own free form title and value pair is that we stumbled on something very powerful.

Below are some of the custom fields for the GroupID (opens new window) service. There is now basic structured information that we can use throughout the website. You can also notice that we allow for multiple fields, there are two "audiences" below.

(opens new window)

Because the website content is always evolving and C&IT can add/remove services at any time we wanted to make sure they didn't have to maintain the page content plus another service catalog database to organize it. We have a custom field called "Service Title" that we are able to use to pull all active pages with that field in to the service listing page. It allows the website to stay updated in multiple places simply by attaching the correct meta information to each page. It's very natural.

# A few other small gems

[gallery include="6795, 6794, 6793, 6792, 6783, 6759" link="file" order="DESC" orderby="post_date"]

View the new Computing & Information Technology website at: http://computing.wayne.edu/ (opens new window)