Recreational Sports

I led the development and design of this comprehensive website system. After the site launched, fitness memberships increased by 19% and successful browsing sessions improved by 65%.

Motivation

The University of Michigan’s Recreational Sports department is a multifaceted group that operates workout facilities, holds exercise classes, and plans individualized programs for students and faculty. (In other words, they do a heck of a lot.) Unfortunately, the group’s old site did them a disservice since all the information describing these programs and benefits was disorganized and unclear. What was clear: Rec Sports was ready for a new, easy-to-maintain site.

Process

I started out this project by corralling the key stakeholders to discuss each person’s goal for the site. We also created key personas at that initial meeting so that we could stay focused amidst all the information we were trying to clean up. This helped us set a clear direction for the site, keeping any possible scope creep in check.

That initial meeting was the first of many. It was important to me to hold regular check-ins so that the design process was as open as it could be, collecting feedback iteratively and quickly. As our design meetings continued, I also tested my plans and designs with actual users to validate them, and I reported back the progress to stakeholders.

Wireframes showing overall page structure
Going with a single-page structure was a radical departure for Rec Sports. That’s why I held individual meetings with each stakeholder to discuss the plan, address concerns, and help plan content.

I held smaller meetings, too, which were critical to get buy-in for my radically different site architecture and content strategy. As a reaction to the old site’s bloated nature, I worked on the idea of a single-page structure for each major program of the Rec Sports department. I also proposed a navigation and site structure that supported this (so that pages wouldn’t simply turn into long-scrolling nightmares). This was only successful, though, with small work sessions with each subgroup so that I could explain this design, review their current content, and help them craft succinct copy. These sessions reassured stakeholders that their group would have proper representation on the site, all while helping to build up our mutual trust for the entirety of the project.

For this project, I was both the lead UX designer and the lead frontend developer, so I constantly evaluated the feasibility and value of design decisions. Take, for instance, my idea for a custom Google Calendar module that displayed group exercise class schedules. While a rich feature like this would mean extra work for the dev team (me), the UX designer (still me) had a convincing rationale for it to be a flagship feature of the site. Balancing feasibility with product value is how I went about prioritizing all of the features on the site, which included modular components, instant facility info, and an entirely-custom WordPress editor interface to help content managers make easy updates.

A screenshot of the group exercise schedule I built
I was able to design, test, and build a group exercise schedule module for the site. Since this program was a main driver of new memberships, it made sense to spend time creating a rich and valuable module.

After launch, I kept evaluating the overall success of the site with testing and analytics — in fact, this helped us make a key terminology change early on. We also tracked membership signups as a key success metric, and we saw a 19-percent increase immediately following the launch of the site.

Maybe that’s why, months later, my work seemed to make its way elsewhere, like Oregon State University and the University of Virginia… 😉

Evaluation

(What worked well and what I’d do differently)

  • The Rec Sports site is not built on a frontend framework. As the lone developer, I was most comfortable with jQuery at the time. (2020 John would opt for Vue instead.)

  • By acting as both the UX designer and the lead developer for the project, my design decisions always took feasibility into account. This made for a product that I knew I could build in a timely manner, and at the same time it meant some designs and features were limited in exploration.

  • The flat, single-page navigation makes it easy to find information, while the hooks into WordPress’s menu system makes it easy to jump right to specific content.

  • Creating a custom system powered by Google Calendar taught me a ton about APIs, caching, and data handling. (And PHP.)

  • In providing a rich customization layer to the WordPress editor view, I was able to ensure that the site would be maintainable and adaptable for years.

Details

Timeframe

Launched December 2016


Tech specs

  • Custom, fully-developed WordPress site with a highly-customized CMS interface for editors
  • Custom theme built with modular SCSS system and JavaScript/jQuery
  • Custom WordPress plugins: a custom Google Calendar plugin, hours of operation via Google Calendar, site-wide alerts

Skills in use

Branding, evaluatory and generative UX research, UX design, frontend development, backend development


Status as of December 2020

The site is live and actively maintained. It looks like some minor features were added to the Google Calendar plugin, as well as some extra content explaining procedures during the pandemic.