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)!
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.
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.
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.
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.
- Drupal
- Bootstrap
- JavaScript
- Google Sheets API
- Lucene
- OpenStreetMap
- Joomla
- InVision