Recycle Ann Arbor

Founded in 1977, Recycle Ann Arbor can trace its roots back to 1970 with the establishment of the first recycling station in Ann Arbor. In 1978, Recycle Ann Arbor started Michigan’s first curbside recycling program. Today, they run the state’s largest community drop-off station, Ann Arbor’s curbside recycling program, and the recovery yard.

Our role in this project was to migrate their web site from Joomla to Drupal, two very different web technologies, while matching the old site’s design. We were also tasked with adding new features for color management, user feedback, and event location maps.

Migration

Our first task was to migrate the site to Drupal 8 while keeping the old site’s functionality, look and feel. We began by auditing the old site’s content, assets, and page hierarchy. Next, we mapped the pages into Drupal content types and fields. We exported the content from Joomla into CSV files and used the Drupal CSV Importer module to import the content into the new site. Then we recreated the menu system and page hierarchy in Drupal. This got us most of the way.

For site search and the A-Z Recycling Guide, we used the Drupal Search API module and Drupal Views to create searchable content and results pages. We also migrated the two infographics on the site: the full-size Recycling Impact Report and a compact “tons recycled” widget that’s displayed in the sidebar.

The old site used the Bootstrap front-end framework for layout and typography, so we chose to use the Drupal Bootstrap base theme for layout, too.

Overall, the migration went smoothly and the two sites were nearly identical (but the new site was much faster)!

Image
Recycle Ann Arbor home page.
The Recycle Ann Arbor Drupal 8 home page is nearly identical to the old Joomla site’s look and feel.

Enhancements

After the site migration, we added new features for color management, user feedback, and event maps.

Color Management

We created a new Bootstrap setting for site authors to pick the primary and secondary colors for each section of the web site. Primary and secondary colors act as the foreground and background colors for each section’s banner, headings, and text.

Image
The individual sections of the site showing a different color palette for each.
Each section of the Recycle Ann Arbor site has a unique color palette in shades of blue and green. This is easily set and changed by site authors.

User Feedback

Using the Drupal Webform module and our own Google Sheets module, we created a user feedback form for products in the A-Z Recycling Guide. Users can request products be added to the guide and can comment on their experience using the guide. That feedback is collected and sent to a Google Sheets document that’s shared and reviewed by Recycle Ann Arbor staff.

Image
A user feedback form that sends data to a Google Sheets document.
The user feedback form is displayed on A-Z Recycling Guide product pages and on empty results pages. The information is sent to a Google Sheets document when the form is submitted.

Event Maps

Recycle Ann Arbor hosts events throughout the area and promotes those on their site. We used the Drupal Leaflet module and OpenStreetMap to add interactive maps to their event pages. For each event, users can now see a marker and the location’s address displayed on a map.

Image
An interactive map showing an event location.
An interactive map showing an event location. The map can be panned and zoomed.

Success

Using built-in Drupal features made migrating the Recycle Ann Arbor web site to Drupal a breeze. Performance increased and usage has increased, too — the A-Z Recycling Guide has become quite popular! We’ve established a long-term relationship with Recycle Ann Arbor and will continue to enhance, improve, and support the site.

Tools and Technologies
  • Drupal
  • Bootstrap
  • JavaScript
  • Google Sheets API
  • Lucene
  • OpenStreetMap
  • Joomla
  • InVision