[Metra Rail](/project/metra-rail) ----------------------------------- Submitted by Eric Leech on Wed, 02/11/2026 - 16:15 Project Category [Transit](/taxonomy/term/6) [Ecommerce](/taxonomy/term/46) Project Image Image ![Responsive website design displayed on multiple devices including desktop, laptop, tablet and smartphone](https://cp-portfolio.acquia.site/sites/default/files/styles/large_w1024/public/2026-03/Metra_featured_image.png.webp?itok=bz2Q1-7N) Target Audience Chicago area commuters Technology [Drupal](/taxonomy/term/21) [Shopify](/taxonomy/term/81) [AWS](/taxonomy/term/71) [AI](/taxonomy/term/96) Description **Metra Digital Transformation: Drupal Replatforming and AWS E-commerce for Seamless Commuter Experience** ---------------------------------------------------------------------------------------------------------- Metra is one of the largest and most complex commuter rail systems in North America, providing service to and from downtown Chicago with 241 stations over 11 routes, totaling nearly 500 route miles and approximately 1,200 miles of track. As the fourth busiest commuter rail system in the United States, Metra’s website receives over 36,000 visitors daily – and can spike significantly when Chicago celebrates a sports win. Metra needed a comprehensive digital upgrade to replace its legacy systems and deliver a unified, mobile-first experience across its main information site and ecommerce platform. The project focused on securing the platform with modern infrastructure and enabling efficient knowledge transfer for staff. Clarity co-developed metra.com using Drupal and integrated a parallel, high-performance .NET e-commerce application hosted on Amazon Web Services (AWS). This dual-platform approach ensured a seamless experience for all users, from commuters to vendors, enabling intuitive access to information. User flows were significantly improved, and the Drupal upgrade reinforced WCAG accessibility compliance and responsive design. This collaboration established a high-performing, scalable, and secure digital foundation. Together, these efforts created a resilient, inclusive, and future-ready digital ecosystem that supports Metra's mission across the Chicago-land region. Link [Metra](https://metra.com/) Short Project Description The Metra Drupal website is responsive, accessible, highly performant, and integrates GTFS schedules and real-time feeds to provide up-to-date and accurate information for Chicago commuters. Project Duration 2016 to Present Project Services [Responsive Design](/taxonomy/term/111) [UX & Graphic Design](/taxonomy/term/101) [Website Design & Development](/taxonomy/term/36) [Integrations](/taxonomy/term/116) [Accessibility Remediation](/taxonomy/term/106) Accordion Display Field 1 | Website Redesign and Modernization -------------------------------------- ### Enhancing digital presence through strategic replatforming and redesigns. #### **Metra Commuter Rail** Clarity was selected to redesign Metra’s main site, Metra.com, using Drupal as the site CMS, co-developing the site with Metra staff to ensure full and ongoing knowledge transfer. Clarity has worked with Metra since 2016, through three separate website designs, from Drupal 7 through Drupal 11. Website administrators have a range of tools that allow them to add and update content directly to the website when needed, using a range of design layouts that they can customize as needed with the assurance that the resulting pages will be responsive. User flows have been improved for both one-time and repeat website visitors so that information is available when and where users intuitively expect it, including schedule and alert updates that are refreshed every 30 seconds. ### **Key Outcomes & Expertise:** - Sustained platform stability across Drupal 7, 8, 9, 10, and 11 versions. - Improved user flows for commuters, "MyMetra" users, and procurement vendors. - Optimized for website users who need information immediately so they can scan and absorb what they need when they are on-the-run. 2 | eCommerce and Program Registration -------------------------------------- ### Secure E-commerce Platform Development for High-Volume Revenue Streams. Clarity initially implemented a custom, parallel .NET ecommerce application hosted on AWS; the application included a customized administrative interface to manage the full life cycle of a transaction. Website visitors could move easily between the two websites because user accounts on both were managed by a centralized OAuth single sign-on system. This dual approach created a unified user experience, improved user flows for both commuters and vendors, and ensured long-term scalability and security across both platforms. The solution improved user flows for both commuters and vendors accessing purchasing and procurement information, and significantly reduced application complexity for client staff. Note that because of revenue shifts, this portion of the site was decommissioned as of September 1, 2018. Several years later, Metra engaged Clarity to create another ecommerce site using the Shopify platform in order to sell tickets for holiday trains. Clarity configured the [shop.metra.com](http://shop.metra.com) site to meet Metra’s specific needs, including treating tickets as configurable products across different lines, limiting ticket purchases and timing the release of tickets to ensure maximum equity. ### **Key Outcomes & Expertise:** - Integrated the main Drupal site with a secure, parallel .NET ecommerce application. - Created a single sign-on experience for users to navigate between the main Drupal-based website and the .NET ecommerce application. - Configured a Shopify site to provide a lean and efficient holiday ticketing system. 3 | Accessibility and Inclusive Design -------------------------------------- Metra faced the critical challenge of ensuring its high-traffic public website was fully accessible and inclusive for all residents, in line with mandates for digital equity. Clarity methodically brought the website into full compliance with WCAG 2.1 Level AA standards. The solution involved detailed technical implementation, including enforcing consistent color contrast, establishing proper semantic structure, and ensuring accurate ARIA labeling. This commitment to inclusive design resulted in a public platform that is not only robust and modern but also legally compliant and equitable, ensuring every resident can access key commuter information and essential services regardless of their device or ability. ### **Key Accessibility Outcomes:** - Achieved full compliance with WCAG 2.1 Level AA standards. - Implemented technical controls for consistent color contrast and semantic structure. - Delivered a public-facing platform that is fully inclusive and equitable for all users. 4 | AI-Assisted Outcomes: Alt Text Generation --------------------------------------------- Metra faced an ongoing challenge in ensuring compliance with the images used on its website to support information critical to the public. Manual alt text authoring was slow and inconsistent, and sometimes inadequate to end-user needs. Clarity solved this challenge by developing and implementing a custom AI-based alt text generation tool directly integrated into the CMS. This innovative solution fully automates descriptions of images. The strategic use of AI results in a dramatic reduction in manual authoring time for the content team, simultaneously ensuring higher technical consistency. This dual approach not only accelerated accessibility compliance but also enriched image metadata, providing a foundation for stronger SEO performance and scalable content publishing. ### **Key AI Outcomes and Efficiency:** - Developed an AI-based alt text generation tool for accessibility efficiency. - Reduced manual authoring time and increased content consistency. - Improved compliance and enriched image metadata for stronger SEO performance. 5 | Responsive Website for Commuters ------------------------------------ Metra needed to ensure that the information on its website could be easily found, scanned, and absorbed by transit riders trying to get the latest schedule updates from their phones as they stood on commuter platforms. This challenge required a specialized, fast-loading solution optimized for users who might be racing for the next train. Clarity solved this by developing and maintaining the website to be responsive across different screen sizes. The website layout shifts to optimally display the most important information even at the smallest screen sizes. ### **Key Responsive Outcomes:** - Launched a responsively designed website. - Provided an easy, fast solution for commuters on the go. 6 | High Performance AWS Web Hosting ------------------------------------ Managing a high-traffic public platform like the [metra.com](http://metra.com) website requires continuous, rigorous attention to the full digital ecosystem, including optimizing the hosting for both scalability and speed. The site is designed with multiple layers of targeted caching at both the application and server level, which ensures that the site is highly performant but also delivers accurate, near-real-time schedule and alert information as needed. At the same time, the web servers are designed to scale up as traffic demands dictate the need: there is a minimal hosting environment during off-peak hours, but that same environment can scale up quickly by multiples if traffic suddenly spikes, ensuring that website visitors always get what they need, but that Metra is using its resources as efficiently as possible. ### **Key Hosting Outcomes and Practices:** - Implemented secure Drupal configurations to protect data. - Applied continuous measures: regular patching, module updates, and vulnerability monitoring. - Ensured compliance with industry best practices and government security standards. - Engineered the environment to scale up and down according to website traffic demands. 7 | Integrations with Critical Information Systems -------------------------------------------------- Metra’s most critical information for Chicago-area commuters centers on its schedules and alerts – users need to know that what they’re reading on the website accounts for up-to-date arrival and departure times from any of its 240+ stations. Clarity has achieved this with a tight series of integrations with Metra’s GTFS schedules data and real-time feeds, refreshed on the site every 30 seconds, with daily scheduled updates and mechanisms for override refreshes as needed. Metra has multiple other third-party integrations as well, with a list that spans from email to social media platforms and customer service intake tools: - Esri Maps - Google Analytics - Google Gemeni - Google Maps - Google Translate - GTFS - IssueTrak - Mailchimp/Mandrill - Mailgun - Solr - Twitter / X All of these integrations allow Metra to serve its audiences with information that makes their commute as easy as possible. ### **Key Integration Outcomes and Practices:** - Implemented dynamic GTFS schedules and real-time trip feeds. - Expanded integrations to systems that allow users to be alerted by email or tweets. - Incorporated external systems that allow users to understand their information contextually, including maps and multiple languages.