One of the big projects I worked on at Student Unions & Activities last spring thru this fall was to help revamp the entire events & conferences part of the site. We analyzed the problems, we conducted usability tests, and we toiled a long time trying to achieve a usable web site.

My primary job was to design the new interface and program the back-end. I had never worked with MVC in PHP before and I can safely say that my code looked as good as my old ASP days. We are continually improving the code, though, so hopefully by this time next year the back-end won't be as convoluted. It was a good lesson in MVC design.

Before & After

On the left, before, on the right, after:

great-hall-before great-hall-after

Big Features

There were many features we added to the new site, some ideas from users others from my own observations and still others from the rest of the team.

Some of the big features and changes we added were:

  • Photo Slideshow: The space pages include a slideshow of all the photos of the space which includes layout photos. This was done using the jQuery Cycle lite plugin. Viewing the bigger photos was done in Lightbox-clone Colorbox.
  • Detailed Layout Info: In the old site, visitors could see a tiny summary of the different layouts available. In the new version, we show thumbnails of the photo and floor map, as well as suggested events that the layout is optimized for. You can click a layout and a popout will come up with even more info.
  • Features and Services: The old site included a bullet list of features of the space but didn't provide any more information than that. The new site does this and also has the ability to have tooltip information as well as links to separate pages.
  • Personalized Rates: Finding out how much a room cost on the old site was a downright chore. We simplified this part by only showing the rate for who you are. If you're a student group, it will show student rates on the space page.
  • Reserve Layouts: On the old site, if you clicked "Reserve" for a space it would only go to the inquiry page and you'd need to fill out everything yourself. On the new site, you can not only reserve a space, you can also directly reserve a specific layout.
  • Revamped Inquiry Form: The old inquiry form was atrocious, a UI and usability disaster. We developed a custom form helper and standardized form styles to greatly improve the user interface. We also used some AJAX and jQuery to dynamically choose rooms to reserve.
  • Progressive Enhancement: If you don't have JavaScript, you can still use the site fully. If you don't have styles, no problem. The whole site is usable in a bare-minimum environment.

These and more were where most of our work went, along with an entirely new back-end.

We were really happy with how it turned out and we're currently working on helping users actually find the right space for them. That will be the next big feature.