Recreational Sports

I led the development and design of this comprehensive website system—everything from managing copy to optimizing our server. After launch, successful browsing sessions improved by 65 percent and fitness memberships increased by 19 percent.

Collecting Thoughts

U-M Recreational Sports is a large group that operates workout facilities, holds exercise classes, and plans individualized programs for students and faculty members. Going into this website project for such a complex organization, I knew it would be critical to sit down with each program’s director to hear their common concerns and ideas.

After summarizing the priorities that each unit had, I compared them to the customers’ needs and formulated a comprehensive project list. I then developed an hour-long presentation to share our development process. This is also where I set expectations for myself and for the client, emphasizing that we would collaborate openly throughout the project. For the entirety of the project, we centered around the goals of speed, clarity, and visibility.

Design and UX Decisions

My biggest design decision on the site is its single page format. Instead of the old system’s method of disorganized information housed on disparate pages, each major program gets one page that contains all related content. I combine that with a natural navigation system so someone can jump to a specific area while remaining within the context of that program on the site. These two parts strike a balance between total visibility and a simple, speedy experience.

In order to keep the site as efficient as possible, I also rely heavily on the use of modular design patterns. These reusable components all share a uniform visual language and motion behavior, so it’s easy to become familiar with the functionality of the site. It also means I can make improvements and add features in shorter timeframes, allowing me to be more efficient at work.

All these design decisions directly apply to my work on the Calendar module, used most effectively to show class schedules on the group exercise page. This module takes data straight from Google Calendar, caches it, and transforms it into a calendar. It improves on the standard embeddable calendar by being easily readable and fully responsive. Plus, it can show extra details if someone wants to know more about a scheduled event. Thanks to its modular design and consistent visual language, this work in one spot ends up being useful in multiple places across the site.

How’s the Site Doing?

Good news: the site is currently performing better than its predecessor. During the first two full months of its launch, my site had two-thirds more sessions than its predecessor. Additionally, the bounce rate for the new site dropped from 55 percent to 20 percent, all verifiable through custom event tracking I set up through Google Tag Manager. Today, the site continues to see 1.4 times the traffic that the old site did.

In terms of business, my work has also contributed to a 19 percent increase in fitness memberships when compared to the previous year—a significant boost considering the plethora of options in Ann Arbor!

Though I use the statistics to validate my work, I’ve also held informal user testing to ensure that there are no major problems. In fact, this is how I caught a usability error that went undetected during my quick user tests during development.

Just like all software, this site is always in a state of constant improvement. Right now, I’m implementing better techniques in image and file compression to reduce the page size. Also, I’m looking into improved messaging techniques on our most visited pages on the site.