Metra Website

By DrupalKellyT on 16 September 2016

As part of a regional transportation network, Metra provides safe, reliable, efficient commuter rail service that enhances the economic and environmental health of Northeast Illinois. Its vision is to be a world-class commuter rail agency linking communities throughout the region by:

Providing the safest, most efficient and most reliable service to its customers
Sustaining its infrastructure for future generations
Leading the industry in achieving continuous improvement, innovation, and transparency
Facilitating economic vitality throughout Northeast Illinois

That mission was not reflected in its old website, however. The old website used a proprietary CMS, Adobe CQ, that required high annual licensing and hosting fees. Website hosting was within a scalable environment, but that scaling was not dynamic and therefore not able to support unexpectedly heavy traffic load.
Maintenance was difficult, with simple site content changes often requiring a knowledge of HTML and CSS that the content owners did not always have. Additionally, relying on a separate template and not including all content, the mobile site was insufficient and difficult to use, despite the fact that nearly 2/3 of the site traffic already came from such devices. Metra knew that it needed an overhaul for its website in order to serve the residents of Northeast Illinois for years to come.

Visit metrarail.com →

Why Drupal was chosen:

Open source
Easily shared development
Regular security updates
Flexibility to add content moving forward
Low cost
Ease of integrations:
Esri Maps
Google Analytics
GTFS
IssueTrak
Mailchimp/Mandrill
Open ID Connect
PubNub
Solr
Twitter

Metra was already leaning toward an open source solution to replatform its website. Metra ultimately chose a Drupal 7 solution because of its large community (and thus deep developer resources for future support), its facility for integrations with other systems, its regular security updates, and demonstrated the flexibility to easily add content and functionality. Drupal’s low implementation and ongoing support cost are important too -- since Metra is ultimately accountable to its customers, it was important that its budget be spent as wisely and efficiently as possible.

Describe the project (goals, requirements and outcome):

Responsive
Self-administering
Cloud hosting
Increased security
Easier maintenance

Metra had high ambitions for the new website, especially since roughly 160,000 customers rely on the site for daily commuting transportation and recreational trips into and out of the city. As such, the site needs to provide absolutely up-to-date information regarding schedules, changes in those schedules in real time (times are checked and updated every 30 seconds, with delays indicated), station conditions (elevator operations, changes in boarding locations, parking information), ticket information and purchase options.
Additionally, the site acts as a central hub for sending and receiving communications with its customers. It acts as the central hub for email and twitter alerts, as well as intaking customer concerns and routing those concerns to the appropriate people within the organization.

With all that in mind, the new site had to be responsively designed and visually engaging, so that current and future website users would be able to easily navigate the site, regardless of the device they were using. This was and is especially important since many website visitors are using their smartphones to get the most up-to-date and timely information possible as they are rushing through their daily routine

Moreover, train schedules, real-time alerts and updates needed to be intuitively available to Metra customers. Therefore the new site has current alerts prominently featured on the home page, as well as the ability to find the traveller's next scheduled train. Storing favorite routes allows for a personalized experience of this so that regular commuters have a single place to look for the times of the trains they use every day. Real time updates are provided every 30 seconds. Because performance is of utmost importance, the data is distributed through PubNub which negates the need for an application-level caching mechanism.

Users also have the ability to view a map of each line that shows the location in real time of all trains operating along the route, so customers can visualize the arrival of the next train. The schedule finder tool has also been upgraded so that it provides more information: customers can decide whether to view the schedule between two stops or the whole schedule for the line, and the results will show if the train is running behind schedule (times for delayed trains will be listed in red) or if there are any other service changes affecting that train, such as a decision to add or skip stops.

Another goal was to be able to share user account information across the systems. In the previous website, a user had to create different accounts depending on the function they wanted to use. The new website, using a central identity server, allows users to create one account and manage their personal email preferences, favorite route and alerts, business information, and recurring ticket orders across Metra’s website properties.

The final set of requirements was to make Metra staff true owners of the site, both from a content and a code perspective. The previous website was a black box on both fronts: basic content updates had to be handled by outside developers, and the actual workings of the site code were obscure to Metra IT staff. With the new Drupal site, content owners have direct access to change content on the site, with workflow to ensure editorial integrity. Metra IT staff were able to co-develop the new site by contributing their own custom modules, as well as review code continuously throughout the development process. Whereas the old site shackled Metra staff to a platform and process that it had little control over, the new site is fully under Metra’s control, which enables it to be more responsive to its customers needs.

The launch of the new metrarail.com website at the end of June 2016 has been a success for both Metra customers and staff:

One month after launch, staff had already made over 550 content changes to the site;
Pages viewed per session has increased steadily over the old site;
New sessions have jumped by 8%.

Additionally, the site has demonstrated its stability under heavy load: the day of the Cubs World Series parade and rally (11.4.16), the site handled 15% more traffic than the heaviest traffic days from the previous two years, responding to three times the number of requests made during a normal rush hour. The site is poised to serve Metra and its customers well into the future.

Technical specifications

Drupal version:

Drupal 7.x

Key modules/theme/distribution used:

Why these modules/theme/distribution were chosen:

Elysia Cron
The Drupal queue, Twitter module, and Elysia Cron work together to send alerts to train line web pages, home page alerts, twitter feeds and email subscribers.

Features
This enables packaging pieces in code form to easily port from one instance to another -- especially crucial with multiple teams working across multiple environment.

Rabbit Hole
This will block users from seeing utility nodes, such as alerts, out of context.

Webform
Customizable, stable/accepted module for forms, so the team could develop permanent forms (such as Vendor Registration) and temporary forms (such as Community Improvement Suggestions).

Workbench
This handles workflow and moderation for Metra staff, along with appropriate email notifications.

Team members:

Project team: