building a transit website around user needs - calact 2016 spring presentation

Building a transit website around user needs

Aaron AntrimTrillium | www.trilliumtransit.comaaron@trilliumtransit.com | 503-567-8422

1.Transit websites from the perspective of their users

2.Accessibility for all3.Find out what

people click -Using Google Analytics

4.Making the most of the website

Users’ perspectiveRiders 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

‣ What route & schedule do I use?

‣ Real-time: When does my bus come?

Users’ perspective

๏ Riders‣ New riders vs. existing riders

‣ Residents vs. visitors

๏ Board members, media, etc.

Design a storefront display

Showcase what you offer, such as:

‣The transportation network itself

‣Freedom & mobility‣Affordability

Administrative & board info highlighted

in purple

First step:

Create a “wireframe” to prioritize limited screen real estate

Selected websitesDesign ideas for transit

bart.gov• homepage

does not require scrolling

• highly multi-lingual

• captures BART brand with colors and shapes

Alaskaair.com• Simple

navigation at the top

• Clean / corporate

• Destination-based marketing beneath the fold

• Mobile-ready

DROP-DOWN NAVIGTION

delta.com• primary “trip tools”

float above feature image

• very consistent branding (Delta Airlines colors, etc.)

LA MetroWhat not to do:Transit website as a maze

mendocinotransit.org• homepage offers

effective “service overview”

• scenic backdrop image

• consistency with printed information

• key information is “above-the-fold”

• Clean but scenic & friendly

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

squareup.com• example of current

simple & direct style for websites

trimet.orgOld website; recently revised• busy homepage,

probably overloaded• nice pop-out drawer

navigation• rider testimonials on the

homepage• interactive map & trip

planner is featured

Trimet.org

Mobile view

Friendly about section beneath the fold.

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

Most users will see your website on their mobile

phone.

More than 75% of users to sctransit.com are

mobile

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

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

Social mediaProceed 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

Real-time information

What is Real-time information?

● Vehicle Positions

● Real-time arrival estimates (trip updates)

● Service alertsRoute 5 is experiencing significant delays

due to flooded roads

● 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

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

Service Alerts Publishing Tools

Google Transit Partner Dash:

● Freely available

● Publishes alerts only to Google Maps

More info at https://support.google.com/transitpartners/answer/6173315?hl=en

Service Alerts Publishing ToolsTrillium 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/

Service Alerts Publishing ToolsIBI 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

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

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

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

● TransiTime.org - open-source project to create arrival estimates from vehicle positions

● OneBusAway.org - distribute info to mobile apps○ iPhone

○ Android

○ Windows Phone

○ Fire Phone

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.

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/wcag)

• 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.

Accessible Not accessible• Images

without “alternate” text

• Maps (!!)• Most PDF files

• Text in an HTML document

• Well-formed tables

• Alternate text that accompanies images

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

Issue: When there are multiple dimensions of headers

Using Google Analytics

• Cost-free!

• Just insert some code into your website

• Configure monthly reports

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?

Making the most of a website in your

marketing program

Trinity Transit: It all started with a map…

Consistent information throughout

Search Engine Marketing (SEO)

• Keywords• Links• Partners• Google search referral performance

Questions?

Aaron AntrimTrillium | www.trilliumtransit.com

aaron@trilliumtransit.com503-567-8422 ext 3