Redesign: Computing & Information Technology website

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

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, 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)

Previous services pageNew services page

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)

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 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 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.

Custom Fields in the CMS

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

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

Having a little fun with server maintenance

This weekend the Computing & Information Technology (C&IT) department upgraded the power in the data center. An explanation of the reason for the upgrade can be found at the ProfTech blog. In addition, C&IT has an announcement of what services were effected on their website.

How this effected the Wayne State Web

In short, this meant every website hosted in the main Web server environment would be down. Basically shutting our visitors out for 10 hours. This included the homepage, admissions website, application, events calendar, api, and content management system, just to name a few.

The down time user experience

It’s never a good experience when you click on a dead link. C&IT brought us in the loop early and we tried to come up with a plan to keep the servers online during the maintenance period. Unfortunately the entire datastore would be down, and moving a read only version to our off campus would take longer than the maintenance period itself. We decided a single maintenance page made the most sense for the time of day and number of visitors that it would affect.

We designed the page based on the promotional images we used around campus to warn students/staff about the maintenance. We kept it simple and gave the user some calls to action directing them to additional information. Below is a screenshot of the page.

The maintenance screen

Scheduled Maintenance Screenshot

“Have a little fun”

If you notice on the page there is a second link to “have a little fun“. We wanted to give anyone who was unfortunate enough to land on the dead end page something to do to pass the time and show a little personality.

One of our former developers, Nick West, was playing around with javascript and gaming a while back and came up with this exploding W page. We passed it around internally for a while but never had a chance to use it publicly. We thought this would be a perfect opportunity. With his permission, we added it to our maintenance page to see how many people found it.

Scheduled Maintenance Have Fun Screenshot

During the maintenance period only ~9% of visitors clicked through to the “have a little fun” and spent an average of two minutes on the page. We expected about this percentage and amount of time on the page, but I explain why the actual quantity of visitors was quite a bit lower than we expected below.

Lessons learned

The goal was to have this maintenance page come up when any page was accessed with a “503” (the server is temporarily unavailable) response and a “retry-after” so Google and other search engines didn’t index the temporary page. Coincidentally an article was posted on SEOMoz just days before our downtime which outlines the best practices for handling maintenance situations.

Everything seemed to be planned well for the maintenance but we encountered two issues which prevented us from analyzing the downtime completely.

  1. The .htaccess file didn’t get included in the files that were sent to C&IT. (completely my fault for not checking)
  2. The Google Analytics account did not have the “full domain” filter enabled. (again, an oversight on my part)

Because of these two issues the maintenance screen was only displayed on the homepage of each domain, not on every single file accessed. That cuts out a major chunk (like 95%) of the traffic to our server and potentially hurt some page ranks. Lastly, the oversight of the “full domain” filter in the Google Analytics prevented us from seeing exactly where the traffic was from. Seeing just “/” and “/w/” give us absolutely no insight.

Test, test, then retest

In the end we were glad to have at least some explanation of the down time up, but because of these two issues I don’t have much insight to share here. I am taking this situation as another opportunity for the importance of testing and retesting. Having a dry run of any IT or Web related activity may take a little extra time but in the end will produce the best results.

View the maintenance page: http://wayne.edu/maintenance/

Have a little fun: http://wayne.edu/maintenance/w/

Site Launch: Computing & Information Technology (C&IT)

After months of work the new Computing & Information Technology (C&IT) is now live. This was no small project, it included consolidating seven separate sites and hundreds of active pages.

C&IT came to us with the goal of unifying their web presence. They had multiple sites run by various people with no central control. We took their site from the ground up and developed a navigation that makes their primary audience (current student, faculty and staff) successful. We went from their overgrown audience based menu to a clear and concise task based menu. Their main sections are driven by the service the user is having an issue with regardless of their user type.

System Status

Another large portion of the site has to do with the System Status page. This shows which university systems are running and which ones are having issues. You can see below on the left is the old screen and the right is the new. Although the old one you could see a lot of green the new one gets the point across without screaming at the user. In addition there is now a slimmed down mobile view and an auto refresh option for the system status addicts.

Site Feedback

We also implemented a site wide feedback button. It is located on the right side of ever page. When clicked it gives the user the ability to share an idea, complain or post a problem they encountered. The idea is to make C&IT as open as possible so they can react and gain insight from the campus community. So far the feedback has been well received and we will be making a few tweaks in the near future based on it.

Overall

The new site overall is a step in the right direction. Centralizing all the sites into one domain and menu is key to better servicing the campus. There are a few areas that were cut out of the launch because of timing but we are looking to launch them in the next few weeks. For example the popular pages area is hard coded for the moment but is all setup to pull from the top 5 pages via Google Analytics API. Another is revamping the faculty/staff directory to be more fluid and centralized from a design and usability standpoint.

Check out the new site at http://computing.wayne.edu/

Vote for it on .eduGuru at http://www.edustyle.net/site.php?site=3898

The Link – C&IT Video Newsletter Web site Launches

The Link is a video newsletter from our Computing and Information Technology (C&IT) department on campus to highlight the services, partnerships and computing practices they have to offer. Many of the videos have a humorous twist and feature staff and faculty from around the university.

This is a brand new site so there is nothing to benchmark its design/success on. But its main goal is to offer quick access to short video clips produced in house and explain services or prevention tips for all computer users.

The newsletter will be released twice a year with a complete set of new videos with a new theme. Check out the videos, they are quite entertaining. It is a great way to put a face on the tech support around campus, they don’t all just sit in a dark room in the basement.

Check out the site at:
http://thelink.computing.wayne.edu/