Simply by visiting this page, you've probably noticed something different about Union's website: everything. For the last sixteen months, our Web team at Union College has been working towards this update—and throughout this time, we've been constantly reminded that few worthwhile things are ever easy.
A brief history
In truth, the active development phase isn't the beginning of this story. In January 2009, the previous iteration of Union’s website launched. We had successfully moved from a homegrown content management system (CMS) to Drupal, a free and open source CMS with an active developer community supporting it. Along with that behind-the-scenes overhaul came a new look and a new structure, and as soon as the new site was live, we started dreaming of the next one.
In the years since, we have listened to our audiences, conducted a few focus groups, watched new design trends emerge, and perused other college and university sites looking for best practices to appropriate. By the time I started to forgo my normal doodles for user interfaces in May 2011, I already had a good idea of the structure of the site. I knew:
- The primary navigation menu would drop down when the user hovers their cursor over it. On the previous site, the menu along the top attempted to guess what would be of the most interest to certain audiences, then required a click to display the links. This was one of the most common changes requested by users.
- It would incorporate our school colors, but not overwhelmingly. Union’s official school colors are red and black with gold accent. While most colors have both light and dark versions, among English speakers, light red is seen as a separate color, pink. That means designs which rely solely on our color palette tend to be foreboding or depressing— neither of which describe Union.
- The search box must be more obvious to help users find content quickly.
- A megafooter would provide quick links from every page to the most frequently used features for internal audiences, as the previous footer did, but now would also provide explanations of what those links are.
By mid-June, I was transforming one of my user interface doodles into a design mockup in Photoshop. In July of 2011, Union’s Web committee gave feedback on the design and approved the overall look. That’s when the the real work began, thanks to Ben Barber, the true hero of this story.
A 2005 Union College graduate, Ben was hired as our first professional Web developer in February 2011. During the run up to the previous relaunch in 2008, we contracted with him to transform our design mockup into working templates. This time around, he performed the same task as a full time member of the team. I can not adequately express my gratitude for Ben’s expertise, logical problem-solving and patience.
In addition to creating new, working templates based on the approved designs, Ben also began the process of upgrading from Drupal 5 to Drupal 7. This was no where near as easy a task as it may sound. Between versions, a lot of features and APIs had changed, modules we had relied on previously were not available for the new version, and those that were available didn’t always work in the ways we had come to expect. Ben’s to-do list included cleanly converting all our existing content, programming customized functionality, and ensuring the system could perform efficiently under heavy loads.
On May 8, 2012, Ben had a working site ready—still rough around the edges with plenty of work yet to be done, but operational. From that point forward, my student workers and I maintained two sites in parallel. Any change made to the old, live site had to also be made to the future site. While maintaining two sites in parallel is never fun, this time period allowed us to reorganize and refresh content, manually move content that hadn’t come over in the conversion (such as the personnel directory), create the new homepage panels, and all the other content-side cleanup. Ben continued plowing through bug reports and features requests as we now began using the new site internally within the Marketing Communication office.
That brings us through the summer, and the start of the new school year to now—launch day, Thursday, Nov. 1, 2012. Ben and I still have a long to-do list of post-launch refinements, but this is when we decided it’s good enough for public use. It’s been a long journey for us, but we hope you find it worthwhile.
A look at the design
Good design should tell a story without intruding on the users’ experiences. We’ve tried to accomplish that, remembering that the website may be someone’s first impression of Union College.
Goals for the Union College site design:
- Clean and respectable while still fun, open and friendly
- Fewer page loads to get to most-accessed content without becoming link soup
- Hold to institutional branding standards while also reflecting elements of our enrollment materials—it must be obviously us
- If not idiot-proof navigation, at least idiot-resistant
- Use new features of HTML5/CSS3 for a wow-factor while maintaining compatibility with older browsers
- Easily adapt to templates for smaller screens
Features of the design:
- Homepage panels
- Rather than having landing pages for certain audiences or topics as we have done in the past, we created seven panels. The default one, news/events, is the one most likely to have frequently updated content.
- We replaced the former sidebar-based primary site navigation with a header menu with a drop down on hover.
- The success of the quick links in the footer of the former design spurred us to add a megafooter to this design. It allows people who know where they are going to quickly get to important systems and pages quickly without getting in the way of messaging.
- New navigation
- As mentioned above, the header is now the primary navigation; however, it’s not the only navigation. Each department/division has its own sidebar menu for internal links. Also, breadcrumbs are now also drop down menus, displaying other pages at that same level of navigation.
- The disappearance of the strong header image.
- I will miss the strong header images, but I won’t miss trying to find photos to fit an 831x270 crop that still look good when you can only see the top half. For repeat visitors, the former header images wasted space. For new visitors though, they were a graphical messaging area, showing off our campus and people.
- To mitigate this loss, the title of every page has the option of a banner background.
- Seeing red … and clicking
- On our former site, red was used mostly for heading text. On this site, the Union red is for links and clickable tabs, replacing the Internet-standard blue. Because it is the link color in the content area, we are trying to use it sparingly in the design.
- In the header, links are white, and in the footer, links are yellow.
- Tie us visually to Lincoln
- The design would clearly tie us to our location. Devi Halim, a student designer in Marketing Communications and a talented illustrated, drew a cartoonish skyline of Lincoln to compliment the prairie sky-like background. We are proud of our location and interaction between our students and community. And since there are two other "Union Colleges," we want to do everything possible to avoid confusion by clarifying our location. In addition to the image, we also mention Lincoln twice in the footer.
I sincerely hope you enjoy using new site. Email me at webmaster [at] ucollege [dot] edu to let me know what you like, and share your suggestions for future improvements. Now we can beginning dreaming about the next big update to Union's online ecosystem.