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.
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.
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… 😉
Previews
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. I think it would be interesting to vanilla-ize the jQuery and then see if it’s still okay living without a framework.
- 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 2024
The site is live and actively maintained.