Background
The Gateway Off-Road Cyclists (GORC) is a 501(c)3 nonprofit corporation dedicated to advocacy, design, construction, and maintenance of multi-use trails in the Greater St. Louis area (Missouri and Illinois). As an International Mountain Bicycle Association (IMBA)-affiliated club, they organize social activities such as trail builds, group rides, organized trips, and local events.
We connected with lifetime member and senior volunteer Matt Hayes, who built and maintained GORC’s Drupal 6 site, at the St. Louis Drupal Group Meetup. With a working knowledge of Drupal and a clear understanding of the organization’s goals and processes, Matt stayed engaged as project manager on the client side and was responsible for membership data and content migration, which proved to be tremendous resource during the development of the site.
Goals
As defined by the client, the goals of a new GORC site included:
- Improve GORC’s image with fresh website design.
- Build the site on the latest Drupal platform, version 7.
- Map, configure and implement the CiviCRM module for Drupal so GORC can better manage member accounts, renewals, volunteer activities/hours, and provide event registration on their site.
- Design and implement a new trail conditions feature so that authorized users can provide up-to-the-minute trail conditions around local parks for visitors to gorctrails.com.
- Expand awareness for off-road cycling, trail maintenance and trail advocacy in the Gateway area.
- Increase memberships, sponsors, and donations.
With these goals in mind, we got to work on the plan.
Requirements and Strategy Phase
Knowing member management would be a key component of the new site, with CiviCRM being the backbone to power it, one of the first areas we examined was GORC’s membership process, from new member signup to renewals. We mapped how existing membership data would be migrated from their existing database, and documented how CiviCRM would be configured to track memberships, volunteer activities/hours, sponsorship details, donations and event registration.
On the Drupal side, we evaluated what modules would be used, readied the OAuth Facebook integration, and installed the base theme off of which to build the GORC theme (in this case, Omega). During this stage, we also took inventory of their current content, media, and other assets that would be used in the new buildout.
While analyzing the current site’s information architecture, we identified several opportunities to rearrange and optimize GORC’s content, media, and resources to optimize usability while improving SEO.
User Experience Design
We spent time with the client to understand the pain points of managing members and content on their previous site, and how members and users would want to use the new site (trail conditions, forums, etc.). Additional features were identified during the requirements phase that we captured in wireframes. These included:
- A slider on the home page to promote latest events and rides.
- Prominent trail conditions feature and events calendar on home page.
- Membership registration and sign in using Facebook OAuth.
- A dedicated area that included ‘Become a Member’, ‘Volunteer’, ‘Become a Sponsor’, and ‘Donate’ calls-to-action, specifically.
- Pages for area parks that include descriptions of trail systems, downloadable trail maps, and up-to-the-minute trail conditions from registered users.
- Events area, powered by CiviCRM, that distinguishes regularly scheduled rides from other types of events.
Several wireframes of key areas were produced to inform the layout, content structure and functionality. Extra attention was provided to the trail conditions and Civi-CRM-powered events areas since these involved the most labor from a theming perspective. By the end of this phase, the client had a clear understanding of what we were going to build and how we were going to build it.
Design and Development
We created two distinct style tiles for GORC. Style tiles are templates that address the use of branding, color palette, textures, font treatments, key messaging and call-to-action areas. By not representing content areas, containers, UI elements and functional minutiae, they allow the client to focus on the look and feel of a new site, prior to jumping into full design mode. Style tiles sped up the design phase since fewer revisions of design comps were required (the look and feel having already been decided).
The GORC theme was developed using the Omega theme framework. All of the content types were identified and Drupal views were created to publish content throughout the site (including stored CiviCRM data). Styles were created using Sass CSS compiler. A combination of Display Suite and Panels was used to provide custom layouts for the home page, trail overview page, and the rides/events page. While our developers were busy developing the theme, Matt Hayes from GORC started the process of migrating content from the D6 site and membership info over to CiviCRM.
Several CiviCRM features were made available to the website user, including events, volunteer logging, and membership management. We extensively used CiviCRM Views integration and the CiviCRM Webform Integration module, as well as out-of-the-box pages that Civi provides by default.
In addition to extensive use of CiviCRM for member management, we also built a feature that allows registered users to easily provide trail condition updates. This functionality relies heavily on views to provide the relevant trail conditions on the homepage, trail overview page, and individual trail page (including a “weather vane” display).
Finally, we spent some time tuning the performance of the website at launch. We reviewed our views to determine which ones could be safely cached, minimized images, and installed and configured Memcached to provide server-side caching.
Results
Matt Hayes from GORC has this to say about their new website:
“The design is very professional and clean allowing for a well-organized page structure.
We have seen an uptick in new and renewing membership. Whereas we used to get 2-5 memberships throughout the year based on our old model, we are now seeing 16-20 memberships per month. A portion of this can be attributed to Civi's built-in membership renewal reminder system which is a fantastic tool we always longed for.”
Also...
“Our project scope was very specific in that we wanted to implement CiviCRM in its most complete form to help streamline and manage GORC's membership. CiviCRM is fully functional with Drupal and we wanted to ensure a framework that would allow us to grow in the coming years. Spry Digital is one of the few companies that work with Drupal, let alone CiviCRM and have a focus of working with non-profits in the St. Louis area. Spry was the perfect match for our project scope and the passionate team had experience with both platforms.”
Visit the new GORC website: gorctrails.com