Aaron Antrim presentation at the Spring 2016 California Association for Coordinated Transportation (CalACT)

1. Building a transit website
around user needs
Aaron Antrim
Trillium | www.trilliumtransit.com
aaron@trilliumtransit.com | 503-567-8422

2. 1.Transit websites
from the perspective
of their users
2.Accessibility for all
3.Find out what people
click -Using Google
Analytics
4.Making the most of
the website

3. Users’ perspective
Riders
Board members,
media, etc.
Questions:
‣ What route & schedule
do I use?
‣ Real-time: When does
my bus come?
‣ What is the fare?
Policies?
Questions:
‣ Latest board agenda &
minutes?
‣ Planning documents
‣ About the agency
‣ Staff names & contact

4. Users’ perspective
๏ Riders
‣ New riders vs. existing riders
‣ Residents vs. visitors
๏ Board members, media, etc.

5. Design a storefront display
Showcase what you
offer, such as:
‣The transportation
network itself
‣Freedom & mobility
‣Affordability

8. Administrative &
board info highlighted
in purple

9. First step:
Create a “wireframe” to prioritize
limited screen real estate

12. Selected websites
Design ideas for transit

13. bart.gov
• homepage does
not require
scrolling
• highly multi-
lingual
• captures BART
brand with
colors and
shapes

15. Alaskaair.com
• Simple navigation
at the top
• Clean / corporate
• Destination-based
marketing beneath
the fold
• Mobile-ready

18. DROP-DOWN
NAVIGTION

19. delta.com
• primary “trip tools” float
above feature image
• very consistent branding
(Delta Airlines colors,
etc.)

20. LA Metro
What not to do:
Transit website
as a maze

23. mendocinotransit.org
• homepage offers
effective “service
overview”
• scenic backdrop image
• consistency with
printed information
• key information is
“above-the-fold”
• Clean but scenic &
friendly

24. sctransit.com
• simplified navigation with
“pop-open” drawers
• big, central splash image
• consistency with Sonoma
County Transit brand
through colors, line
elements
• Clean/corporate look

27. squareup.com
• example of current simple &
direct style for websites

28. trimet.org
Old website; recently revised
• busy homepage, probably
overloaded
• nice pop-out drawer
navigation
• rider testimonials on the
homepage
• interactive map & trip
planner is featured

30. Trimet.org

32. Mobile view

33. Friendly about section beneath the fold.

35. Eldoradotransit.com:
• Brand consistency
• Simplicity
• Information-rich map

42. Most users will see
your website on
their mobile phone.

43. More than 75% of users to
sctransit.com are mobile

48. Our customers didn’t sign up
for an easter egg hunt.

51. Social
media:
Another field
on which to
hide easter
eggs?

52. Social media
Proceed with caution!
Don’t encourage people to leave your website for a lower-
quality experience.
Good for:
* Community engagement
* Customer service
Bad for:
* Organizing service alerts and essential information
More discussion: http://bit.ly/transit-communication

54. Real-time information

55. What is Real-time information?
● Vehicle Positions
● Real-time arrival estimates (trip updates)
● Service alerts
Route 5 is experiencing significant delays
due to flooded roads

56. ● Vehicle Positions
● Real-time arrival estimates (trip updates)
● Service alerts
Real-time information sources
Require
automatic
vehicle
location
(AVL)
hardware on
buses
Can be managed via
web-based customer
service tools
Route 5 is experiencing significant delays
due to flooded roads

57. Service Alerts
● Your customer service department can manage service alerts
● Requires a web-based tool to translate from human-readable format:
○ “Route 5 is experiencing significant delays due to flooded roads”
...to a machine-readable format like GTFS-realtime Service Alerts[1]:
header {
gtfs_realtime_version: "1.0"
timestamp: 1450386709
}
entity {
id: "1"
alert {
informed_entity {
agency_id: "Hillsborough Area Regional Transit"
}
header_text {
translation {
text: "Route 5 delays"
language: "en"
}
}
description_text {
translation {
text: "Route 5 is experiencing significant delays due to flooded roads"
language: "en"
}
...
[1] https://developers.google.com/transit/gtfs-realtime/service-alerts?hl=en

58. Service Alerts Publishing Tools
Google Transit Partner Dash:
● Freely available
● Publishes alerts only to
Google Maps

59. Service Alerts Publishing Tools
Trillium Transit Alerts:
● Available as product from Trillium
● Publishes alerts to any app supporting GTFS-
realtime Service Alerts
○ Google Maps
○ The Transit App
○ OpenTripPlanner
○ OneBusAway
● Target alerts to particular routes and stops
● Also offers integration to publish same alerts to:
○ Websites
○ Social media accounts
○ Email, SMS, and other Alerts
More info at http://trilliumtransit.com/gtfs/transit-alerts/

60. Service Alerts Publishing Tools
IBI TRANSIT-alerts:
● Available as product from IBI Group
● Publishes alerts to any app supporting GTFS-
realtime Service Alerts
○ Google Maps
○ The Transit App
○ OpenTripPlanner
○ OneBusAway
● Target alerts to particular routes and stops
● Also offers integration to publish same alerts to:
○ Websites
○ Social media accounts
○ Email, SMS, and other Alerts
More info at http://transitrealtime.com/docs/IBI_TRANSIT-alerts.pdf

61. Service Alerts Publishing Tools
Do-It-Yourself (DIY) open-source tools:
● OneBusAway
○ Part of the main OneBusAway server application -
https://github.com/OneBusAway/onebusaway-application-
modules/wiki/Creating-Service-Alerts
○ A stand-alone web application -
https://www.youtube.com/watch?v=roIsmq9R7Wc,
https://github.com/OneBusAway/onebusaway-service-alerts
● GTFS-rt-admin
○ A stand-alone web application - https://github.com/conveyal/gtfs-rt-admin

62. How to share vehicle positions and arrival estimate data?
1. Include RFP language requesting GTFS-realtime[1] or SIRI[2] Application Programming Interface (API) when
procuring an AVL system
○ Make sure you retain ownership of your data
○ Require that your real-time IDs match your schedule GTFS data
○ Require that your GTFS and GTFS-realtime data are updated in sync
○ Request the timepoint field in stop_times.txt - it’s increasingly important for real-time
2. Prior to accepting product, test API with at least one app
○ e.g., Google Maps
Already have an AVL system, but not a realtime API?
● A good read - “Legacy AVL system? It’s okay, join the club,” https://kurtraschke.com/2015/01/legacy-avl-export
● Open-source converters:
○ GTFS-realtime - https://github.com/luqmaan/awesome-transit#gtfs-realtime
○ SIRI - https://github.com/luqmaan/awesome-transit#siri
[1] https://developers.google.com/transit/gtfs-realtime/
[2] https://en.wikipedia.org/wiki/Service_Interface_for_Real_Time_Information

63. On the horizon - open AVL systems
● Choose your AVL vendor to provide vehicle positions
● TransiTime.org - Create arrival estimates from vehicle positions
● OneBusAway.org - Distribute info to mobile apps
○ iPhone
○ Android
○ Windows Phone
○ Amazon Fire Phone
○ Google Glass
○ SMS, Phone, and more...
Gives agencies options and ownership of system

64. Accessibility for all
More at: http://bit.ly/transit-website-accessibility
What is accessibility?
• On the web, access for users
who are sight-impaired and use
screen-reader software.
• Federal law (Section 508)
defines accessibility
requirements.

65. Accessibility for all
More at: http://bit.ly/transit-website-accessibility
How to achieve accessibility
• Write good HTML code, follow
guidelines
(https://www.w3.org/WAI/intro/wc
ag)
• Use an automated checker such
as WAVE (wave.webaim.org)
• User testing! Hire a screen-
reader user or find a volunteer to
use and test your website.

66. Accessible Not accessible
• Images without
“alternate” text
• Maps (!!)
• Most PDF files
• Text in an
HTML
document
• Well-formed
tables
• Alternate text
that
accompanies
images

67. Define “scope” of table headers.
<TH SCOPE=”ROW”>Transit Center</TH>

68. Issue: When there are multiple dimensions of headers

71. Using Google Analytics
• Cost-free!
• Just insert some code into your website
• Configure monthly reports

72. What can you discover?
• How many people use your website?
• How long do they spend on the site? Various
pages?
• What paths do they take through the website?
• Where do they leave?
• How do people find your website?
• What search terms do they use?
• What links do they click on other sites?
• What devices and browsers are they using?

73. Making the most of a website
in your marketing program

74. Trinity Transit: It all started with a map…

75. Consistent information
throughout

79. Search Engine Marketing
(SEO)
• Keywords
• Links
• Partners
• Google search referral performance

80. Questions?
Aaron Antrim
Trillium | www.trilliumtransit.com
aaron@trilliumtransit.com
503-567-8422 ext 3