Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By Spry Digital, LLC on
The Project
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.
GORC's existing site was built using Dreamweaver, and needed an upgrade. Although IMBA offers site templates to member organizations, the proffered templates were expensive and lacked desired membership management features. GORC also had a vision for an easy-to-update trail condition function on the site, which is a great feature for all site visitors.
Why Drupal was chosen:
We connected with lifetime GORC member and senior volunteer Matt Hayes, who built and maintained GORC’s Drupal 6 site, at the St. Louis Drupal Group Meetup. Because of Matt's working knowledge of Drupal, it was determined that an upgrade to Drupal 7, along with CiviCRM integration, would be the best fit for 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, and helped lower GORC's overall cost.
Describe the project (goals, requirements and outcome):
Goals & Requirements
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.
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.
Site Architecture and Features
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.
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.
Wireframes and Design
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.
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).
Results
Slider and CTAs
The prominent slider area on the home page contains links and content for the main site calls-to-action:
Recent Trail Updates, Upcoming Events, and Sponsors
The home page shows the most recent user-submitted trail updates, along with upcoming events and an area to showcase sponsors, which provide an import part of GORC's operating budget:
Trail Overview Page
The trail overview page shows all of the local trails that GORC helps manage and maintain, along with an at-a-glance trail condition status:
Trail Detail Pages
The trail detail pages feature a wealth of information about each specific trail, including trail length, difficulty level, most recently updated conditions, maps, GPS file downloads, and a park overview:
Client Response
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.
Technical specifications
Key modules/theme/distribution used:
Why these modules/theme/distribution were chosen:
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).
Facebook OAuth was used to allow users to easily log in using Facebook identities, since at least an authorized user status is required to update trails.
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.
Organizations involved:
Project team:
Site build by Spry Digital for Gateway Off-Road Cyclists
Sheila Burkett, CiviCRM guru
Ken Moire, UX/UI & Graphic Design
Dennis Bland, Graphic Design
Julia Koelsch, Development Lead
Rachel White, Development
Phil Cryer, Development
Jen Wilton, Project Management
Matt Hayes, Client and Data Mapping, CiviCRM & Drupal Configuration
Sectors:
Non-profit
