UNC Campus Recreation provides a diverse and intentional recreational program to the students, faculty, and staff at UNC-Chapel Hill. With 19 recreation facilities, and too many fitness classes and sports organizations to count, UNC Campus Rec is a complex organization whose website must communicate the breadth of opportunity and services it provides. UNC Campus Recreation liked our work on UNC Dining Services and asked us to redesign and reorganize their website to help students take advantage of all the resources at their fingertips. We were excited to use our experience with University website design to help UNC Campus Recreation achieve their goals!
Design Choices
Because Campus Rec is all about activity, the client had a wealth of engaging and motivating photographs of individuals using their facilities. We used these resources to design an image driven website that captures the user's attention and features the wide variety of activities and facilities available to students, faculty, and staff.
To keep the style modern and young, we took inspiration from the UNC Dining Services website Campus Rec liked so much. Ultimately, the design featured many similar elements, including:
- Large, bold headlines
- Clear calls-to-action
- Simple, modern shapes
- No unnecessary shading or textures
- Liberal whitespace
For the iPhone generation
We knew this website had to look good on the giant monitors in the library and the macbook pros scattered across lecture halls, but where it really needed to shine was on the cell phone screens of constantly on-the-go students.
To best accomodate this audience, we designed the campus rec website with mobile as the priority. We chose to use a side navigation bar, instead of the traditional top navigation bar, so that it would feel more at home on a mobile device. We also designed the site’s feeds to be swiped through, making it easy to navigate the site on the phone while trekking to class from South Campus.
Although the site was designed to be mobile-first, it is completely responsive. This means it functions just as well on tablets, laptops, and desktops, as it does on mobile.
Behind the Scenes
To make this website successful, we had to get back into the heads of college students. We know that the unpredictable and untraditional schedules of college students keep them constantly on-the-move. Therefore, not only did the website need to look modern and sleek to appeal to a younger audience, it needed to be:
- quick loading
- easily navigable
- easy for Campus Rec staff to edit and update
To meet these needs, we designed a custom website theme for the WordPress content management system. Campus Rec's website has many different types of content and WordPress makes finding and editing the different content types super easy by neatly laying them out on the left-hand side of the CMS.
What's open?
UNC Campus Recreation particularly liked the "What's open?" feature we designed for UNC Dining Services, so we created a similar tool for the Campus Recreation facilities. This feature boasts a drop down calendar and a sliding time of day option so that students can see which of the 19 recreation facilities are open at any given day and time.
What's offered?
UNC Campus Recreation offers a wide variety of programs from Aikido to Quidditch, and everything in between. To organize these programs, we created an easy-to-use filter that allows visitors to find the programs that best suit their interests. Our custom-designed Content Management System makes it simple for Campus Recreation staff to create and update the categories and content so that students can easily find out when intramural basketball starts or how to try out for club field hockey.
Scheduling made simple
To increase ease of use, we integrated with the Application Program Interface of GroupEx, the scheduling program used by UNC Campus Recreation, to create a color-coordinated weekly calendar of group fitness classes. With this feature, users can visually filter the different categories of classes at a glance to find out which classes they can make it to.
Social Media
UNC Campus Recreation consistently updates their social media with content to keep students informed and entertained. We displayed the UNC Campus Recreation blog, Facebook, Twitter, and Instagram feed posts in a swipe-through feed on the bottom of the website homepage. Integrating the social media content with the website adds another interactive element to the page, while keeping the site's content consistently fresh and relevant.
