This document summarizes a presentation given by Theonic Way of Fig Leaf consulting about their work redesigning the Washington Metropolitan Area Transit Authority (WMATA) website. It discusses the background of the current WMATA website, visions and solutions for the new site, and a demo of features like trip planning, alerts and the content management system. The new site uses a ColdFusion, Node.js and CommonSpot CMS architecture to improve responsiveness, integrate APIs and enable content authors.

1. Archdiocese of Baltimore (AOB)
Web Presence Redesign
C108: ColdFusion in Transit Action
Theonic Way
VP of Consulting, Strategy & Operations
tway@figleaf.com
https://www.figleaf.com | https://training.figleaf.com

2. Customer Case Study: Design & Development of the new
Washington Metropolitan Area Transit Authority Website
https://beta.wmata.com

3. ❏ Intro. to Fig Leaf (~5 min)
❏ Background on current WMATA.com
(~5 min)
❏ Visions & Solutions for new WMATA.com
(~40 min)
❏ Demo & Announcements
(~10 min)
Agenda at a Glance

4. Introduction to Fig Leaf

5. Our Profile / figleaf.com
❏ Founded in 1992
❏ Certified Service-Disabled, Veteran-Owned Small
Business (SDVOSB)
❏ Corporate HQ
1400 16th Street NW Suite 450
Washington, DC 20036
202-797-7711 main
❏ Senior Executive Team with Certified ColdFusion
Developers, Certified Technical Trainers & Authors
❏ President & Founder - Steve Drucker
❏ CEO - Dave Gallerizzo
❏ CTO & Co-founder - Dave Watts

6. Our Services
Consulting
❏ Content Strategy, Usability
Review & Analysis
❏ UI/UX, Web Design &
Branding
❏ CMS (Drupal,
CommonSpot, Episerver,
Sitefinity, WordPress)
❏ Web App Development
(ColdFusion, Node.js,
ExtJS, PHP, .NET, Sencha,
JavaScript, HTML/CSS)
Training & Courseware
❏ Developed Official Adobe
ColdFusion Courseware &
Salesforce Lightning & Trained
more 35,000+ Web
professionals
❏ Adobe, Acquia, Google and
Sencha Training Partner:
https://training.figleaf.com
Managed Services
❏ Amazon Web Services (AWS)
Cloud Hosting & Premier
Support Services
❏ Microsoft Azure, Google Cloud

7. Our Key Technology Partners

8. .GOV, .EDU, .ORG, .COM CF Clients
nps.gov
umuc.edu
dcbar.org
customermap.exim.gov
belden.comashcroft.com
uwstout.edu
wmata.com
uwp.eduuwsuper.edu

9. ❏ Intro. to Fig Leaf & Our Relationship with
ColdFusion
❏ Background on current WMATA.com
❏ Visions & Solutions for new WMATA.com
(~40 min)
❏ Demo & Announcements
(~10 min)
Next on Agenda

10. Background on Current WMATA.com
❏ Non-responsive Design &
60% of traffic from mobile
❏ Powered by ColdFusion 10,
IIS, MS SQL, Google Custom
Search Engine
❏ Limited CMS ability with
custom-built tools
❏ 8-year-old design & 22M
page views per month

11. Key Audiences & Traffic
❏ Savvy Daily Commuters, Out-of-town First-time Transit
Passengers, Vendors and Contractors doing business with
WMATA, WMATA Internal Users
❏ About 3⁄4 of visits to the site are local to the DC area;
Over half of traffic from searches involving the terms
WMATA or metro; A third of traffic comes to the site
directly.
❏ Referral traffic from related WMATA web tools, local
government, and other local transportation websites.

12. Redesign Objectives & Scope
❏ Simplify Trip-planning,
Fare-finding, Next
Bus/Train Arrival with
Visual elements &
Interactive Maps
❏ Provide effective,
compelling
communications for
breaking news, real-time
alerts and advisories
❏ Mobile-first Responsive Design
❏ User-centric Action-oriented IA
❏ Three Visual Design Concepts
❏ Built with Adobe ColdFusion 10+/
IIS / MS SQL
❏ < 2s page load time
❏ Hosted inside WMATA on-perm
datacenter

13. ❏ Intro. to Fig Leaf & Our Relationship with
ColdFusion
❏ Background on WMATA.com Redesign
❏ Visions & Solutions for new WMATA.com
❏ Demo & Announcements
(~10 min)
Next on Agenda

14. Creative Visions: Minimal, Flat, Clean & Modern

17. Open &
Airy
Design
Reducing
cluttered
feeling

18. Interactive Trip Planning with Visual Maps

19. Rider Tool: Trip Planner

21. Rider Tool: Service Nearby

23. CMS Solution: CF-powered CommonSpot

24. PaperThin CommonSpot CMS Supports
❏ Popular Grid Systems for Responsive Design
❏ 100% Bootstrap Compatible
❏ Custom Code Integrations
❏ .Net, PHP, Ruby, Java, CFM, CFC, etc.
❏ Embeddable Custom Code
❏ CFML or HTML Code through Custom Scripts
❏ Latest Web Standards HTML5/CSS3

25. Custom Script for Rail & Bus Alerts
❏ Fetched from RSS sources
❏ http://www.metroalerts.info/rss.aspx?bus
❏ http://www.metroalerts.info/rss.aspx?rs
❏ Transformed into JSON object cached
on the file system
❏ Updated asynchronously via AJAX
❏ Rendered on multiple locations

26. http://beta.wmata.com/service/status/

27. Custom Scripts for Stations

28. CMS Enables Content Authors
❏ To change page layout
on demand
❏ To display/hide content
❏ To group related
content

29. Integration with External APIs

30. ATIS API by Trapeze Group
❏ ATIS API provides trip planning
and other transit information.
❏ Use of third-party geocoding
services such as those provided by
Google Maps can be used to supply
the latitude / longitude required
by many of the ATIS SOAP
methods.
❏ Locate Methods: provide
geocoding services for
ATIS-powered apps and
eliminates the need to maintain
an external DB. Not suitable for
auto-complete/type-ahead.
❏ Type-ahead Methods: literal in
their search and are
implemented using SQL LIKE
statements.
❏ TransitMethods: Plan Trip,
Closest Stops, Next Bus/Train,
Service Nearby, etc.

31. Google Places API
❏ Google Places API Web Service and
Place Autocomplete share a usage
quota.
❏ Enforces a default limit of 1,000 free
requests per 24 hour period,
calculated as the sum of client-side
and server-side requests
❏ Autocomplete is a feature of the
Places library in the Google Maps
JavaScript API, offering two widgets:
Autocomplete & SearchBox
http://goo.gl/wZuKe7

32. WMATA Developer API
Bus Position JSON for Route B30
https://api.wmata.com/Bus.svc/json/jBusPositions?RouteID=B30

33. Hybrid CF & Node.js Solution

34. Why CF/Node.js Architecture
❏ Embedded AJAX applications
fetch data from an XML-based API
behind the firewall
❏ Node.js Server-side components
best-suited for REST APIs and
handling large-volume
asynchronous requests for
dynamic data
❏ CF & Node.js share the workload
giving scalability & cost-effective
solution

35. Demo & Announcements

36. XBOX One
Drawing Today
@Fig Leaf Booth
4:30pm

37. We’re Hiring in Washington DC!
2 ColdFusion Positions - Onsite at
WMATA & Department of Justice
jobs@figleaf.com

38. Questions? Thank you.
We’ve Got You Covered.