University Recreation & Wellness Center

Website Redesign & Development
Recwell Home Page

The University Recreation & Wellness Center expansion building was opened to the public in September 2013. Along with the opening came a new website redesign.

I was brought on to build the site. Challenges we addressed consisted of updating outdated styles, meeting the University's brand/web standard guidelines, site mapping the hierarchy of large amounts of content, making the site responsive, and adding a CMS to make updating the site a breeze.

Recwell Sitemap.

Recsports Sitemap Version 1.0.1

The university website consists of 9 departmental programs, 8 different facility locations, a membership department, employment and an about us section. It is a decently large site that required an in depth site map.

Recwell News Page

Recwell News : Powered by Drupal 7Drupal Website

The website is based from the Bootstrap Framework. While developing the CMS for the news section I utilized the Drupal Bootstrap Base Theme to create a custom sub theme.

iPhone 5 top bar for
Recwell Mobile Website

Mobile First Responsive Design

Designed with a mobile first design approach the content is positioned to stack based on the heiarchy importance. The website will adjust accordingly to your smartphone, tablet, desktop or any screen.

Fastbooks Scheduling Web App

Fastbooks is a desktop program used by the faculty to manage reservations and scheduling of rooms. Through the web app I developed you can browse up to a week in advance and view open or reserved recreation times seamlessly.

To see the web app in action you can browse room schedules here or group fitness classes here.

iPhone 5 top bar for
Recwell Scheduling Web App

Digital Media Screens & Interactive Kiosks

After the website was finished I was tasked with developing custom feeds for the digital media screens and the interface for the touch screen interactive kiosks.

Digital Media Screen

Custom feeds to display building hours, lastest news posts and group fitness classes to the screen.

Interactive Kiosk Illustration

Touch Screen Interactive Kiosks

There are multiple interactive touchscreen kiosks placed on various levels. These kiosks serve as an information hub and wayfinding tool for students, staff and the curious at heart.

Click below to watch an example of navigating through the interface or browse for yourself on the kiosk website.

  • Position

  • Design
  • Web Development
  • Code

  • HTML5, CSS3, Bootstrap, Drupal, JavaScript, PHP, MySQL, JSON, XML

Thanks for reading.