Another MU WebCom project is done! The redesigned Human Resource Services (HRS) site is live. This was a long, complex project that touched almost everyone on our staff. Every aspect of the site was rebuilt, from the information architecture to the final design. The following is a quick recap of our goals.
General goals
- Create a better organized, user-friendly site.
- Develop a warmer, more informal feel.
- Help users understand what Human Resource Services does encompass, and get users to the resources not managed by Human Resource Services as quickly and seamlessly as possible.
Content goals
- More user-focused naming conventions (i.e. “scent” words)
- Addition of a Pay & Benefits section that talks about these elements in user-friendly, general terms (insurance, retirement, etc) and pushes users to the specific resources mentioned both in the body copy links and sidebars. This gives the user many opportunities to find the information when they’re scanning. It also keeps the maintenance of information within the owning department.
- Addition of keywords to position descriptions.
Design goals
- Look more like an MU-branded institutional site.
- Use the university’s colors: black and gold.
- Feel warmer and more personal.
- Have a navigation that can handle a lot of content.
- Use link-type icons
Primary navigation
For the site’s primary navigation we wanted a tabbed effect, which works pretty well, but we also wanted to have a more three dimensional effect with the tabs overlapping, and the selected one on top. This proved to be troublesome to implement, but with a lot of trial and error, we were able to create the effect using nothing but browser text and CSS. Unfortunately, IE6 can’t handle it, so it gets a separate set of styles with regular square tabs.
Link-type icons
The HRS site tends to link to a lot of external resources and varying document types. It’s a good idea to give the user a hint that they are about to leave the site or download a PDF, so we wanted to add an icon to each external/document link. Unfortunately, our CMS makes it difficult to manually add icons to every link and the CSS selector solution failed to work in Internet Explorer (or allow us to combine external and document icons). Our solution was to incorporate JavaScript that automatically adds an icon to the link without having to worry about managing them in the CMS.
Go team
Overall, I think the site redesign was a huge success. Congratulations to everyone who worked on this project! Now, on to the next one.
Congratulations guys! I know this was a huge project and it’s exciting to the see the end result. :)
Nice - this was way overdue!
-stevn
I think the site redesign looks great. As a MU alum and someone who tinkers with web design, I am always interested in what others are doing and what their thought process might be.