The presentation was prepared for the BC Apps 4 Climate change contest as a view into how we approach designing apps so that they deliver a useful, usable, and compelling user experience. The presentation walks through two case studies of application design we did for TransLink, the redesign of the Trip Planner App, as well as the design of the Transit Alerts subscription tool.

1. Designing Usable Apps:
2 Case Studies
BC Apps 4 Climate Action Webinar
June 22, 2010
Karyn Zuidinga
Principal & Director of User Experience
office 604 669 7655

2. Agenda
• Introductions
• About Analytic Design Group
• About me
• Background about the two projects
• Case Study #1: TransLink Trip Planner Redesign
• Case Study #2: TransLink Transit Alerts
• Questions

3. Analytic Design Group
Analytic Design Group Inc. (ADGi) is a visionary user experience
consulting firm with proven strategic, research, and design
skills to revolutionize your online presence. ADGi has a depth of
experience in several industries, with a range of consumer and
business audiences and across a range of hardware and software
platforms.
We conduct dozens of usability tests on different
applications, websites, and devices each year, which informs
the design and expert analysis work we do by offering us insights
into the way real users interact with real websites and applications.

4. Who am I?
• 12+ years experience designing information and interaction
spaces for the web, software, and mobile devices
• She has provided the strategic information design direction and
insights for such significant projects as the PHSA Intranet
Redesign, the BCCDC website redesign, TransLink’s website, Trip
Planner, and Alerts Tool redesign, SportFitcanada.com redesign,
and DYS Architects.
• Karyn has also worked with AT&T to help refine their usability
testing requirements for data-driven devices,
Karyn Zuidinga,
• Karyn’s specific skills set includes strategic planning, concept
Principal & modeling, information architecture, interaction design, user
Director of User research, user requirements documentation, and requirements
Experience elicitation and documentation.

5. TripPlanner Background
• TransLink has had a TripPlanner on the TransLink website for
several years
• The software is provided by a third party (Trapeze) and the
data (bus routes, locations, schedules, etc.) comes from Coast
Mountain Bus Company, the front end is developed/
maintained by TransLink/Coast Mountain Bus Company
• The site gets about 1,000,000 visitors per month and about
90% of that traffic uses Trip Planner
• A significant portion of customer complaints in 2008/09 related
to Trip Planner Functionality

6. TransLink Trip Planner
Redesign
• In late 2008 TransLink engaged ADGi to conduct an expert
review and then usability test the TripPlanner App
• Based on the results of these activities, TransLink decided to
implement most of the design recommendations

7. Trip Planner Step 1:
Enter Departure & Destination
Before

9. What users
normally
would enter
163 W. Hastings, Vancouver

11. 163 Hastings
How you were
supposed to
enter the address

12. Even if the system was able
to parse the address it
would return bizarre (for the
user) responses like this one
163 Hastings
How you were
supposed to
enter the address

13. 163 Hastings
How you were
supposed to
enter the address
How many people
really plan a
transit trip more
than a day or two
in advance?

14. If your location was
in this list selecting
it from among a
very long list of
locations in this
163 Hastings drop-down was
Very Difficult
How you were
supposed to
enter the address

15. 163 Hastings
How you were
supposed to
enter the address
Asking users to
ʻsortʼ results prior
to giving them any
makes it hard for
users to determine
how to sort

16. Trip Planner: Step 1
Enter Departure & Destination
Design Recommendation

17. Schedules & Maps > Trip Planner
Trip Planner
1 2 3
Enter Trip Criteria Select Itinerary View Trip Details
Enter an address, intersection, landmark or Olympic venue. (See list of locations)
From: To:
You can enter any of the following: Avoid using:
Stop Number: e.g. 50001 suite numbers
Address: e.g. 555 Hastings street suffixes (st, ave, etc)
Intersection: e.g. Burrard at Robson directional indicators (N, S, E, W)
Location: e.g. Metrotown Station city name
Enter your preferred departure or arrival time.
Depart
00:00 am mm/dd/yyyy
Arrive
Find Routes >

18. Schedules & Maps > Trip Planner
Trip Planner
1 2 3
Enter Trip Criteria Select Itinerary View Trip Details
Auto-suggest
Enter an address, intersection, landmark or Olympic venue. (See list of locations)
From: To:
Cambie Centre
You can Loop any of the following:
Cambie enter Avoid using:
Campbell Number: e.g. 50001
Stop Square suite numbers
xxxcamxxx e.g. 555 Hastings
Address: street suffixes (st, ave, etc)
Intersection: e.g. Burrard at Robson directional indicators (N, S, E, W)
Location: e.g. Metrotown Station city name
Enter your preferred departure or arrival time.
Depart
00:00 am mm/dd/yyyy
Arrive
Find Routes >

19. Schedules & Maps > Trip Planner
Trip Planner
1 2 3
Enter Trip Criteria Select Itinerary View Trip Details
Enter an address, intersection, landmark or Olympic venue. (See list of locations)
From: To:
You can enter any of the following: Avoid using:
Stop Number: e.g. 50001 suite numbers
Address: e.g. 555 Hastings street suffixes (st, ave, etc)
Intersection: e.g. Burrard at Robson directional indicators (N, S, E, W)
Location: e.g. Metrotown Station city name
Make calendar less
prominent
Enter your preferred departure or arrival time.
Depart
00:00 am mm/dd/yyyy
Arrive
Find Routes >

20. Schedules & Maps > Trip Planner
Separate list fo
Trip Planner ʻpopular locati
1 2 Cam3
Enter Trip Criteria Select Itinerary View Trip Details
List of Locations
You can enter any of the following:
Avoid using:
Select the following locations as the start and end points for your trip.
Stop Number: e.g. 50001 suite numbers
HeadingAddress: e.g. FromHastings Add to To Field
Add to 555 Field Suggest a Location
Enter an address, intersection, landmark or Olympic venue. (See list of locations)
1
locationIntersection: e.g. Burrard at Robson
1
street suffixes (st, ave, etc)
Looking for a location but don'
directional indicators (N, S, E
list? Suggest a location. If it m
From: To:locationLocation: e.g. Metrotown Station
2
location 3
city name it in our list, we will.
include
location 4 Location Name
Enter your preferred departure or arrival time.
location 5
location 6
Depart
You can enter any of the following: location 7 using:
Avoid 00:00
Arrive
am mm/dd/yyyy Street Address
location 8
Stop Number: e.g. 50001 suite numbers
location 9
Find Routes >
Address: e.g. 555 Hastings street suffixes (st, ave, etc)
location 10 select city
Heading 2
Intersection: e.g. Burrard at Robson directional indicators (N, S, E, W)
location 1
Submit
Location: e.g. Metrotown Station city name
location 2
location 3
location 4
location 5
Enter your preferred departure or arrival time.
location 6
location 7
location 8
Depart location 9
00:00 am mm/dd/yyyy 10
Arrive location
Submit
Find Routes >

21. Trip Planner: Step 1
Enter Departure & Destination
Implemented Changes

23. System
recognizes
directions and
prompts street
names and
direction.

24. Improved help
text.

25. Customization is
restricted to critical
information.
No sorting
preferences.

26. Trip Planner, Step 2:
Search Results
Before

28. The 3 best trips
are displayed
but users may
not realize that
the options they
selected on the
first screen
changes the
results they get.

29. Trip Planner, Step 2:
Search Results
Design Recommendation

30. Trip Planner
1 2 3
Enter Trip Criteria Select Itinerary View Trip Details
Your search for routes
From: <location>, <city name> To: <location>, <city name>
At: <departing>, <time, date>
Prioritize By:
Shortest Trip Time
Shortest Walking Distance
Fewest Transfers
Refresh Routes
Select the route you want to see details for:
Mode & Bus Number Trip Start Trip End Duration Transfers Walk Fare
A=Adult
C=Concession
Expo Can. 0:00 am 0:00 pm 0 hr 00 min 0 0.00 km $0.00 (A)
000 Line Line 000
$0.00 (C)
000 000 000 0:00 am 0:00 pm 0 hr 00 min 0 0.00 km $0.00 (A)
$0.00 (C)
Expo 0:00 am 0:00 pm 0 hr 00 min 0 0.00 km $0.00 (A)
000 Line
000
$0.00 (C)
Note: Times at bus stops and between transfers are based on normal service conditions. Actual
times may vary. Transfers are valid for 90 min. An additional fare may be required for Trip Plans
exceeding 90 min. Concession Fares = Children, Students, Seniors, HandyCard Holders.

31. Trip Planner
1 2 3
Enter Trip Criteria Select Itinerary View Trip Details
Repeat/display Your search for routes
the search
parameters From: <location>, <city name> To: <location>, <city name>
At: <departing>, <time, date>
Prioritize By:
Shortest Trip Time
Shortest Walking Distance
Fewest Transfers
Refresh Routes
Select the route you want to see details for:
Mode & Bus Number Trip Start Trip End Duration Transfers Walk Fare
A=Adult
C=Concession
Expo Can. 0:00 am 0:00 pm 0 hr 00 min 0 0.00 km $0.00 (A)
000 Line Line 000
$0.00 (C)
000 000 000 0:00 am 0:00 pm 0 hr 00 min 0 0.00 km $0.00 (A)
$0.00 (C)
Expo 0:00 am 0:00 pm 0 hr 00 min 0 0.00 km $0.00 (A)
000 Line
000
$0.00 (C)
Note: Times at bus stops and between transfers are based on normal service conditions. Actual
times may vary. Transfers are valid for 90 min. An additional fare may be required for Trip Plans
exceeding 90 min. Concession Fares = Children, Students, Seniors, HandyCard Holders.

32. Trip Planner
1 2 3
Enter Trip Criteria Select Itinerary View Trip Details
Your search for routes
From: <location>, <city name> To: <location>, <city name>
At: <departing>, <time, date>
Show sort Prioritize By:
options on
results page Shortest Trip Time
Shortest Walking Distance
Fewest Transfers
Refresh Routes
Select the route you want to see details for:
Mode & Bus Number Trip Start Trip End Duration Transfers Walk Fare
A=Adult
C=Concession
Expo Can. 0:00 am 0:00 pm 0 hr 00 min 0 0.00 km $0.00 (A)
000 Line Line 000
$0.00 (C)
000 000 000 0:00 am 0:00 pm 0 hr 00 min 0 0.00 km $0.00 (A)
$0.00 (C)
Expo 0:00 am 0:00 pm 0 hr 00 min 0 0.00 km $0.00 (A)
000 Line
000
$0.00 (C)
Note: Times at bus stops and between transfers are based on normal service conditions. Actual
times may vary. Transfers are valid for 90 min. An additional fare may be required for Trip Plans
exceeding 90 min. Concession Fares = Children, Students, Seniors, HandyCard Holders.

33. Trip Planner
1 2 3
Enter Trip Criteria Select Itinerary View Trip Details
Your search for routes
From: <location>, <city name> To: <location>, <city name>
At: <departing>, <time, date>
Prioritize By:
Shortest Trip Time
Shortest Walking Distance
Fewest Transfers
Refresh Routes
Allow users to
resubmit search Select the route you want to see details for:
with new options
Mode & Bus Number Trip Start Trip End Duration Transfers Walk Fare
A=Adult
C=Concession
Expo Can. 0:00 am 0:00 pm 0 hr 00 min 0 0.00 km $0.00 (A)
000 Line Line 000
$0.00 (C)
000 000 000 0:00 am 0:00 pm 0 hr 00 min 0 0.00 km $0.00 (A)
$0.00 (C)
Expo 0:00 am 0:00 pm 0 hr 00 min 0 0.00 km $0.00 (A)
000 Line
000
$0.00 (C)
Note: Times at bus stops and between transfers are based on normal service conditions. Actual
times may vary. Transfers are valid for 90 min. An additional fare may be required for Trip Plans
exceeding 90 min. Concession Fares = Children, Students, Seniors, HandyCard Holders.

34. Trip Planner, Step 2:
Search Results
Implemented Changes

36. Show sort
options on
results page

37. Allow users
to resubmit
search with
new options

38. Trip Planner, Step 3:
Selected Route
Before

40. The selected
itinerary is
separated visually
from the step by
step details

41. In testing most
users didnʼt notice
map as it was
below the fold

42. Impossible for the user
to tell if there are any
alerts/problems with
any of the routes in
their selected itinerary

43. Trip Planner, Step 3:
Selected Route
Design Recommendation

44. Schedules & Maps > Trip Planner
Trip Planner
1 2 3
Enter Trip Criteria Select Itinerary View Trip Details
Your search for routes Printer friendly version
From: <location>, <city name> To: <location>, <city name>
At: <departing>, <time, date> Travel Time: 0 h 00 mins
Transfers: 0 Total Walking Distance: 0.00 km
Fare Info: For this itinerary buy an adult 0 zone fare. Find out more about fare zones.
Step by Step Route Map
Click on the routes below to see detailed schedule information.
Depart: 0:00 pm - <direction and name of intersection/location>
000 On: <bus or mode name>
Arrive: 0:00 pm - <direction and name of intersection/location>
Transfer
Expo Depart: 0:00 pm - <direction and name of intersection/location>
Line On: <bus or mode name>
Arrive: 0:00 pm - <direction and name of intersection/location>
Transfer
Depart: 0:00 pm - <direction and name of intersection/location>
000 On: <bus or mode name>
Arrive: 0:00 pm - <direction and name of intersection/location>
< Back to Routes Plan Return Trip

45. Schedules & Maps > Trip Planner
Trip Planner
The selected
itinerary is 1 2 3
integrated with the Enter Trip Criteria Select Itinerary View Trip Details
step by step
Your search for routes Printer friendly version
details
From: <location>, <city name> To: <location>, <city name>
At: <departing>, <time, date> Travel Time: 0 h 00 mins
Transfers: 0 Total Walking Distance: 0.00 km
Fare Info: For this itinerary buy an adult 0 zone fare. Find out more about fare zones.
Step by Step Route Map
Click on the routes below to see detailed schedule information.
Depart: 0:00 pm - <direction and name of intersection/location>
000 On: <bus or mode name>
Arrive: 0:00 pm - <direction and name of intersection/location>
Transfer
Expo Depart: 0:00 pm - <direction and name of intersection/location>
Line On: <bus or mode name>
Arrive: 0:00 pm - <direction and name of intersection/location>
Transfer
Depart: 0:00 pm - <direction and name of intersection/location>
000 On: <bus or mode name>
Arrive: 0:00 pm - <direction and name of intersection/location>
< Back to Routes Plan Return Trip

46. Schedules & Maps > Trip Planner
Trip Planner
1 2 3
Enter Trip Criteria Select Itinerary View Trip Details
Your search for routes Printer friendly version
From: <location>, <city name> To: <location>, <city name>
At: <departing>, <time, date> Travel Time: 0 h 00 mins
Transfers: 0 Total Walking Distance: 0.00 km
Fare Info: For this itinerary buy an adult 0 zone fare. Find out more about fare zones.
Step by Step Route Map
Click on the routes below to see detailed schedule information.
Depart: 0:00 pm - <direction and name of intersection/location>
000 On: <bus or mode name>
Arrive: 0:00 pm - <direction and name of intersection/location> The route map is
Transfer
in a tab next to
step by step
Expo Depart: 0:00 pm - <direction and name of intersection/location> details
Line On: <bus or mode name>
Arrive: 0:00 pm - <direction and name of intersection/location>
Transfer
Depart: 0:00 pm - <direction and name of intersection/location>
000 On: <bus or mode name>
Arrive: 0:00 pm - <direction and name of intersection/location>
< Back to Routes Plan Return Trip

47. Schedules & Maps > Trip Planner
Trip Planner
1 2 3
Enter Trip Criteria Select Itinerary View Trip Details
Your search for routes Printer friendly version
From: <location>, <city name> To: <location>, <city name>
At: <departing>, <time, date> Travel Time: 0 h 00 mins
Transfers: 0 Total Walking Distance: 0.00 km
Fare Info: For this itinerary buy an adult 0 zone fare. Find out more about fare zones.
Step by Step Route Map
Click on the routes below to see detailed schedule information.
Depart: 0:00 pm - <direction and name of intersection/location>
000 On: <bus or mode name>
Arrive: 0:00 pm - <direction and name of intersection/location>
Transfer
Expo Depart: 0:00 pm - <direction and name of intersection/location>
Line On: <bus or mode name>
Arrive: 0:00 pm - <direction and name of intersection/location>
Transfer If a route has an alert
Depart: 0:00 pm - <direction and name of intersection/location> associated with it, an
000 On: <bus or mode name> icon is displayed to
Arrive: 0:00 pm - <direction and name of intersection/location> alert the user to
potential issues
< Back to Routes Plan Return Trip

48. Trip Planner, Step 3:
Selected Route
Implemented Changes

50. Users can
see that there
is a map without
scrolling.

51. Alerts marked

52. TransLink Transit Alerts
• In the fall of 2009 TransLink engaged ADGi to help design a
“notifications tool”
• While there are similar tools that we are aware of
(Massachusetts Bay Area Transit, Portland) they are very
simple and don’t really deliver the functionality that TransLink
required
• We were essentially starting from scratch

53. First Attempt
• Quick visualization
• Discuss a specific prototype
• Flag incomplete features
• Identify positive and negative aspects of user’s experience
• Does this match user’s expectations?

54. My Trips
I need to...
Send
notification Trip name Notify me on...
Update Contact
Work Commute (Round Trip) Weekdays, AM peak, Info
Skytrain (south) PM peak edit
Add New Trip
20 Victoria (north)
Suspend Account
Granville Island Sunday, AM peak edit
228 Lonsdale Quay (south)
Seabus (south)
50 Granville Island
Add new trip

55. My Trips
I need to...
Send
notification Trip name Notify me on...
Update Contact
Alerts grouped Work Commute (Round Trip) Weekdays, AM peak, Info
into trips Skytrain (south) PM peak edit
Add New Trip
20 Victoria (north)
Suspend Account
Granville Island Sunday, AM peak edit
228 Lonsdale Quay (south)
Seabus (south)
50 Granville Island
Add new trip

56. My Trips
I need to...
Send
notification Trip name Notify me on...
Update Contact
Work Commute (Round Trip) Weekdays, AM peak, Info
Skytrain (south) PM peak edit
Add New Trip
20 Victoria (north)
Suspend Account
Days and times
displayed in easy
Granville Island Sunday, AM peak edit
to read format.
228 Lonsdale Quay (south)
Seabus (south)
50 Granville Island
Add new trip

57. My Trips / Create a new Trip
Create Trips Setup Notifications Manage Subscriptions
Work Commute
Trip Name Granville Island This is a return trip
Skytrain (south)
Bus Skytrain Seabus Train
Bus Name 228 - Lonsdale Quay North South OR Stop ID
Save Cancel
Add another leg
Create new trip
Setup Notifications

58. Separate trip
creation from
notification details My Trips / Create a new Trip
and manage
Create Trips Setup Notifications Manage Subscriptions
notifications
Work Commute
Trip Name Granville Island This is a return trip
Skytrain (south)
Bus Skytrain Seabus Train
Bus Name 228 - Lonsdale Quay North South OR Stop ID
Save Cancel
Add another leg
Create new trip
Setup Notifications

59. My Trips / Create a new Trip
Create Trips Setup Notifications Manage Subscriptions
Work Commute
Trip Name Granville Island This is a return trip
Needed to deal Skytrain (south)
with the fact that in
Bus Skytrain Seabus Train
any trip there are
potentially multiple
modes of transit Bus Name 228 - Lonsdale Quay North South OR Stop ID
Save Cancel
Add another leg
Create new trip
Setup Notifications

60. My Trips / Create a new Trip
Create Trips Setup Notifications Manage Subscriptions
Work Commute
Trip Name Granville Island This is a return trip
Skytrain (south)
Bus Skytrain Seabus Train
Bus Name 228 - Lonsdale Quay North South OR Stop ID
Save Cancel
Early on we
introduced the Add another leg
idea that a single
trip could have
multiple legs
Create new trip
Setup Notifications

61. My Trips / Create a new Trip
Create Trips Setup Notifications Manage Subscriptions
Work Commute
Allowing the user
to select a return
Trip Name Granville Island This is a return trip trip means that
they have to
Skytrain (south) specify times
Bus Skytrain Seabus Train
Bus Name 228 - Lonsdale Quay North South OR Stop ID
Save Cancel
Add another leg
Create new trip
Setup Notifications

62. My Trips / Create a new Trip
Create Trips Setup Notifications Manage Subscriptions
Work Commute
Trip Name Granville Island This is a return trip
Skytrain (south)
Bus Skytrain Seabus Train
Bus Name 228 - Lonsdale Quay North South OR Stop ID
The user must
Save Cancel know their stop ID
and there is no
way to select
Add another leg
multiple routes
Create new trip
Setup Notifications

63. My Trips / Create a new Trip
Create Trips Setup Notifications Manage Subscriptions
Work Commute
Granville Island
Days
Weekdays
Weekends
Specific days Mon Tues Wed Thu Fri Sat Sun
Times
AM Peak (9am - 11am)
PM Peak (3pm - 6pm)
Evening (6pm - 9pm)
Manage Subscriptions

64. My Trips / Create a new Trip
Create Trips Setup Notifications Manage Subscriptions
Work Commute
Granville Island
The ability to
specify days and Days
times was a
Weekdays
requirement
(although the Weekends
ability to specify
Specific days Mon Tues Wed Thu Fri Sat Sun
times was not
going to be rolled
out for Phase 1) Times
AM Peak (9am - 11am)
PM Peak (3pm - 6pm)
Evening (6pm - 9pm)
Manage Subscriptions

65. My Trips / Create a new Trip
Create Trips Setup Notifications Manage Subscriptions
Work Commute
Granville Island
Days
Weekdays
Weekends
Specific days Mon Tues Wed Thu Fri Sat Sun
Times The times selected
AM Peak (9am - 11am) will apply to all the
days selected
PM Peak (3pm - 6pm) above: the user
Evening (6pm - 9pm) canʼt specify
different times for
different days
Manage Subscriptions

66. My Trips / Create a new Trip
Create Trips Setup Notifications Manage Subscriptions
How do you want to be reached?
Mobile Text Message Email
Phone number
Provider Choose...
Add another text/email
Suspend Notifications
Unsubscribe
Save

67. My Trips / Create a new Trip
Create Trips Setup Notifications Manage Subscriptions
The ability to How do you want to be reached?
choose the form
of notification Mobile Text Message Email
was a
requirement
Phone number
Provider Choose...
Add another text/email
Suspend Notifications
Unsubscribe
Save

68. My Trips / Create a new Trip
Create Trips Setup Notifications Manage Subscriptions
How do you want to be reached?
Mobile Text Message Email
Phone number
Provider Choose...
Can have
multiple
notifications Add another text/email
Suspend Notifications
Unsubscribe
Save

69. My Trips / Create a new Trip
Create Trips Setup Notifications Manage Subscriptions
How do you want to be reached?
Mobile Text Message Email
Phone number
Provider Choose...
Add another text/email
The user can
Suspend Notifications only manage
subscriptions in
Unsubscribe
setup flow
Save

70. System requirements &
feature simplification
Conversations with TransLink, the external development team
(FCV technologies), and internal Coast Mountain Bus
developers, lead to a more ‘system oriented flow’, that captured
all the system requirements.
All features are complete, this is the first “working” system.
All the system and business requirements are nailed down. But
what about the user? Have we got it right from that
perspective?

71. My Notifications How notifications work collapse
Receive notification regarding trips you take. Whether on the go with your mobile
or on email, stay informed about possible delays and issues.
You have no Notifications set up right now
Please choose from the options below.
Set up a new Trip Notification
icon If you know how to get there you can add notifications for specific routes that you
take.
Forum
Weʼre glad you are Set up a new Trip Notificationonline discussion! Here is where you create your Alias, the
interested in participating in our
nickname others will know you by on the consultation discussion boards. (Others will see this by the comments
you post, rather than your real name).
Station/Stop Notifications
Alais icon Update
Running Man out everything pertaining to a bus stop. Get notified if a bus stop moves, if a
Find
SkyTrain station elevator is undergoing maintenance.
Set up a new Station/Stop Notification
System-wide Notifications
icon Get the high level reports of important information pertaining to the entire transit
system. Find out about those unrelated events that can delay your trusted
communite.
Turn on system-wide notifications

72. My Notifications How notifications work collapse
Receive notification regarding trips you take. Whether on the go with your mobile
or on email, stay informed about possible delays and issues.
You have no Notifications set up right now
Please choose from the options below.
Set up a new Trip Notification
Responded icon If you know how to get there you can add notifications for specific routes that you
to developer take.
suggestion: Forum
“There are Weʼre glad you are Set up a new Trip Notificationonline discussion! Here is where you create your Alias, the
interested in participating in our
three types nickname others will know you by on the consultation discussion boards. (Others will see this by the comments
of alerts, get you post, rather than your real name).
the user to
select type
Station/Stop Notifications
Alais icon Update
Running Man out everything pertaining to a bus stop. Get notified if a bus stop moves, if a
Find
of alert at the
dashboard” SkyTrain station elevator is undergoing maintenance.
Set up a new Station/Stop Notification
System-wide Notifications
icon Get the high level reports of important information pertaining to the entire transit
system. Find out about those unrelated events that can delay your trusted
communite.
Turn on system-wide notifications

73. My Notifications How notifications work collapse
Receive notification regarding trips you take. Whether on the go with your mobile
or on email, stay informed about possible delays and issues.
You have no Notifications set up right now
Please choose from the options below.
Set up a new Trip Notification
icon If you know how to get there you can add notifications for specific routes that you
take.
Forum
Weʼre glad you are Set up a new Trip Notificationonline discussion! Here is where you create your Alias, the
interested in participating in our
nickname others will know you by on the consultation discussion boards. (Others will see this by the comments
you post, rather than your real name).
Station/Stop Notifications
Alais icon Update
Running Man out everything pertaining to a bus stop. Get notified if a bus stop moves, if a
Find
SkyTrain station elevator is undergoing maintenance.
Issue: Set up a new Station/Stop Notification
Need to
educate
user on System-wide Notifications
differences
icon Get the high level reports of important information pertaining to the entire transit
in alert
system. Find out about those unrelated events that can delay your trusted
types communite.
Turn on system-wide notifications

74. Step 1: Define Trip Step 2: Setup Notifications
Create a one way trip. Name it something memorable, so that you can recognize the notification.
Trip name Going to Work
Trip legs
Trip legs
Add the legs (or routes) that will make up your trip in one direction. Remember, for the return trip, you need
Add the legs (or routes) that will make up your trip in one direction. Remember, for the return trip, you need
to create another trip.
to create another trip.
Select the mode of transport
Select a route Direction
Bus SkyTrain SeaBus West Coast
Express
OR
Select route(s) by Stop ID
Enter stop ID Go Select your route at this stop
Note: To select multiple routes hold down the option key
(PC) or command key (Mac) while clicking
Save Cancel
Add another leg
Add another leg
Setup Notifications

75. Step 1: Define Trip Step 2: Setup Notifications
Create a one way trip. Name it something memorable, so that you can recognize the notification.
Trip name Going to Work
Trip legs
Trip legs
Add the legs (or routes) that will make up your trip in one direction. Remember, for the return trip, you need
Add the legs (or routes) that will make up your trip in one direction. Remember, for the return trip, you need
to create another trip.
to create another trip.
Direction now Select the mode of transport
works better, fits
with how users
interact on Select a route Direction
TripPlanner - also Bus SkyTrain SeaBus West Coast
UI is a little tidier Express
OR
Select route(s) by Stop ID
Enter stop ID Go Select your route at this stop
Note: To select multiple routes hold down the option key
(PC) or command key (Mac) while clicking
Save Cancel
Add another leg
Add another leg
Setup Notifications

76. Step 1: Define Trip Step 2: Setup Notifications
Create a one way trip. Name it something memorable, so that you can recognize the notification.
Trip name Going to Work
Trip legs
Trip legs
Add the legs (or routes) that will make up your trip in one direction. Remember, for the return trip, you need
Add the legs (or routes) that will make up your trip in one direction. Remember, for the return trip, you need
to create another trip.
to create another trip.
Select the mode of transport
Select a route Direction
Bus SkyTrain SeaBus West Coast
Express
OR
User can now Select route(s) by Stop ID
select multiple
routes
Enter stop ID Go Select your route at this stop
Note: To select multiple routes hold down the option key
(PC) or command key (Mac) while clicking
Save Cancel
Add another leg
Add another leg
Setup Notifications

77. 1. Define Trip 2. Setup Notifications
Trip name Going to Work
Trip Legs 020, Millennium line
Notify me...
Select when you want to receive notifications about this trip.
Days Times
Weekdays AM peak (9am - 11am)
Weekends Midday (11am - 3pm)
Specific days PM peak (3pm - 6pm)
Mon Tues Wed Thu Fri Evening (6pm - 9pm)
Sat Sun As alerts are posted
Everyday
Method of Notification
You can receive notifications via email or mobile text message (or both).
Text message number: (604)778-2500 provider: Rogers Change
Email address: antek@analyticdesigngroup.com Change
Save

78. Were able
to simplify 1. Define Trip 2. Setup Notifications
and have
only two Trip name Going to Work
steps
Trip Legs 020, Millennium line
Notify me...
Select when you want to receive notifications about this trip.
Days Times
Weekdays AM peak (9am - 11am)
Weekends Midday (11am - 3pm)
Specific days PM peak (3pm - 6pm)
Mon Tues Wed Thu Fri Evening (6pm - 9pm)
Sat Sun As alerts are posted
Everyday
Method of Notification
You can receive notifications via email or mobile text message (or both).
Text message number: (604)778-2500 provider: Rogers Change
Email address: antek@analyticdesigngroup.com Change
Save

79. 1. Define Trip 2. Setup Notifications
Trip name Going to Work
Trip Legs 020, Millennium line
Consolidated Notify me...
days and Select when you want to receive notifications about this trip.
times
Days Times
Weekdays AM peak (9am - 11am)
Weekends Midday (11am - 3pm)
Specific days PM peak (3pm - 6pm)
Mon Tues Wed Thu Fri Evening (6pm - 9pm)
Sat Sun As alerts are posted
Everyday
Method of Notification
You can receive notifications via email or mobile text message (or both).
Text message number: (604)778-2500 provider: Rogers Change
Email address: antek@analyticdesigngroup.com Change
Save

80. 1. Define Trip 2. Setup Notifications
Trip name Going to Work
Trip Legs 020, Millennium line
Notify me...
Select when you want to receive notifications about this trip.
Days Times
Weekdays AM peak (9am - 11am)
Weekends Midday (11am - 3pm)
Specific days PM peak (3pm - 6pm)
Mon Tues Wed Thu Fri Evening (6pm - 9pm)
Sat Sun As alerts are posted
Everyday
Method of Notification
You can receive notifications via email or mobile text message (or both).
Reduced to
only one Text message number: (604)778-2500 provider: Rogers Change
text or
email for
Email address: antek@analyticdesigngroup.com Change
alerts
Save

81. Refining User Experience
What needs more explanation? What needs to hide?
What is needlessly complicated?
What would make life a little easier for the user?

82. My Alerts How alerts work Collapse
Receive alerts regarding transit trips you take. Whether on the go with your mobile
or on email, stay informed about possible delays and issues.
Send Alert Notify me on...
Morning Commute Weekdays Delete
Leg 1 20 Victoria: Harrison Loop, Victoria Dr at Fraserview Dr AM Peak
Leg 2 Expo Line: Waterfront
System-wide Alerts Weekdays Delete
AM Peak
Set up a new Alert Plan your trip using Trip Planner
If you know how to get there you can add If you're not sure how to get there, trip planner
notifications quickly for your trip. will find a route for you.
Set up a new Alert Go to Trip Planner
Alert Preferences
Suspend all alerts
From 2009-09-01 to
Update

83. My Alerts How alerts work Collapse
Receive alerts regarding transit trips you take. Whether on the go with your mobile
or on email, stay informed about possible delays and issues.
Send Alert Notify me on...
Morning Commute Weekdays Delete
Leg 1 20 Victoria: Harrison Loop, Victoria Dr at Fraserview Dr AM Peak
Leg 2 Expo Line: Waterfront
System-wide Alerts Weekdays Delete
AM Peak
Users donʼt
have to know
Set up a new Alert Plan your trip using Trip Planner
much about
alerts because If you know how to get there you can add If you're not sure how to get there, trip planner
there is one notifications quickly for your trip. will find a route for you.
starting point.
Set up a new Alert Go to Trip Planner
Alert Preferences
Suspend all alerts
From 2009-09-01 to
Update

84. My Alerts How alerts work Collapse
Receive alerts regarding transit trips you take. Whether on the go with your mobile
or on email, stay informed about possible delays and issues.
Send Alert Notify me on...
Morning Commute Weekdays Delete
Leg 1 20 Victoria: Harrison Loop, Victoria Dr at Fraserview Dr AM Peak
Leg 2 Expo Line: Waterfront
System-wide Alerts Weekdays Delete
AM Peak
Set up a new Alert Plan your trip using Trip Planner
If you know how to get there you can add If you're not sure how to get there, trip planner
notifications quickly for your trip. will find a route for you. Integration with trip
planner. Users can
Set up a new Alert Go to Trip Planner use the more
familiar trip planner
and save itineraries
Alert Preferences as alerts. Huge gain
for user experience.
Suspend all alerts
From 2009-09-01 to
Update

85. My Alerts How alerts work Collapse
Receive alerts regarding transit trips you take. Whether on the go with your mobile
or on email, stay informed about possible delays and issues.
Send Alert Notify me on...
Morning Commute Weekdays Delete
Leg 1 20 Victoria: Harrison Loop, Victoria Dr at Fraserview Dr AM Peak
Leg 2 Expo Line: Waterfront
System-wide Alerts Weekdays Delete
AM Peak
Set up a new Alert Plan your trip using Trip Planner
If you know how to get there you can add If you're not sure how to get there, trip planner
notifications quickly for your trip. will find a route for you.
Set up a new Alert Go to Trip Planner
Alert Preferences
Easily
suspend all
Suspend all alerts
alerts for a
period of time, From 2009-09-01 to
such as a
vacation. Update

86. Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to receive alerts. Remember, for the
return trip, you need to create another alert.
Step 1: Name your Trip
First, give this trip a name, e.g. morning commute.
Enter Name Save Name
Step 2: Add Trip Legs
Legs are transfers. For instance you might transfer from one bus to another or from one mode (e.g. Bus) to
another (e.g. SkyTrain) on any given trip.
Step 3: Set Up Notification
Select when you are interested in receiving alerts for this trip.

87. Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to receive alerts. Remember, for the
return trip, you need to create another alert.
Step 1: Name your Trip
First, give this trip a name, e.g. morning commute.
Enter Name Save Name
Step 2: Add Trip Legs
Legs are transfers. For instance you might transfer from one bus to another or from one mode (e.g. Bus) to
another (e.g. SkyTrain) on any given trip.
Step 3: Set Up Notification
Select when you are interested in receiving alerts for this trip.
Went back to three steps: this is counterintuitive as usually adding steps does not
usually simplify or reduce complexity for the user.

88. Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to receive alerts. Remember, for the
return trip, you need to create another alert.
Step 1: Name your Trip
First, give this trip a name, e.g. morning commute.
Enter Name Save Name
Step 2: Add Trip Legs
Legs are transfers. For instance you might transfer from one bus to another or from one mode (e.g. Bus) to
another (e.g. SkyTrain) on any given trip.
Step 3: Set Up Notification
Select when you are interested in receiving alerts for this trip.
Went back to three steps: this is counterintuitive as usually adding steps does not
usually simplify or reduce complexity for the user.
But we improved the experience by:
1) Making Step 1 incredibly simple
2) Exposing the complete process to the user
3) But only allowing progress to next step on Save

89. Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to receive alerts. Remember, for the
return trip, you need to create another alert.
Step 1: Name your Trip Change
Morning Commute
Step 2: Add Trip Legs
Legs are transfers. For instance you might transfer from one bus to another or from one mode (e.g. Bus) to
another (e.g. SkyTrain) on any given trip.
Leg 1 20 Victoria/Downtown: Harrison Loop, Victoria Dr at Fraserview Change Delete
Leg 2
Mode of Transit Route and Stop/Station
Select mode of Tell us what route you take and where you get on and off. Select as many
transport for this leg routes, stops or stations as you like, but you have to pick at least one of each.
QuickFind Enter route name, number or bus stop # Go
Bus
Routes Stops/Stations
SkyTrain Please select a route
002 MacDonald/Burrard Stn
003 Main/Downtown
SeaBus 004 Phibbs Exchange/Powell
005 Robson/Downtown
West Coast
Express 006 Davie/Downtown
007 Nanaimo/Dunbar
Cancel Add Another Leg Save Trip
Step 3: Set Up Notification
Select when you are interested in receiving alerts for this trip.

90. Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to receive alerts. Remember, for the
return trip, you need to create another alert.
Step 1: Name your Trip Change
Morning Commute
Step 2: Add Trip Legs
Legs are transfers. For instance you might transfer from one bus to another or from one mode (e.g. Bus) to
another (e.g. SkyTrain) on any given trip.
Leg 1 20 Victoria/Downtown: Harrison Loop, Victoria Dr at Fraserview Change Delete
Changed orientation Leg 2
from horizontal to
vertical, allowed a Mode of Transit Route and Stop/Station
simple left to right Select mode of Tell us what route you take and where you get on and off. Select as many
view and a transport for this leg routes, stops or stations as you like, but you have to pick at least one of each.
straightforward
QuickFind Enter route name, number or bus stop # Go
progression from Bus
select mode of
transit to select Routes Stops/Stations
route(s) to select SkyTrain Please select a route
002 MacDonald/Burrard Stn
stop(s)
003 Main/Downtown
SeaBus 004 Phibbs Exchange/Powell
005 Robson/Downtown
West Coast
Express 006 Davie/Downtown
007 Nanaimo/Dunbar
Cancel Add Another Leg Save Trip
Step 3: Set Up Notification
Select when you are interested in receiving alerts for this trip.

91. Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to receive alerts. Remember, for the
return trip, you need to create another alert.
Step 1: Name your Trip Change
Morning Commute
Step 2: Add Trip Legs
Legs are transfers. For instance you might transfer from one bus to another or from one mode (e.g. Bus) to
another (e.g. SkyTrain) on any given trip.
Leg 1 20 Victoria/Downtown: Harrison Loop, Victoria Dr at Fraserview Change Delete
Leg 2
Changed search
Mode of Transit Route and Stop/Station by stop ID into a
Select mode of Tell us what route you take and where you get on and off. Select as many full search that
transport for this leg routes, stops or stations as you like, but you have to pick at least one of each.
finds both routes
QuickFind Enter route name, number or bus stop # Go and stops
Bus
Routes Stops/Stations
SkyTrain Please select a route
002 MacDonald/Burrard Stn
003 Main/Downtown
SeaBus 004 Phibbs Exchange/Powell
005 Robson/Downtown
West Coast
Express 006 Davie/Downtown
007 Nanaimo/Dunbar
Cancel Add Another Leg Save Trip
Step 3: Set Up Notification
Select when you are interested in receiving alerts for this trip.

92. Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to receive alerts. Remember, for the
return trip, you need to create another alert.
Step 1: Name your Trip Change
Morning Commute
Step 2: Add Trip Legs
Legs are transfers. For instance you might transfer from one bus to another or from one mode (e.g. Bus) to
another (e.g. SkyTrain) on any given trip.
Leg 1 20 Victoria/Downtown: Harrison Loop, Victoria Dr at Fraserview Change Delete
Leg 2
Changed search
Mode of Transit Route and Stop/Station by stop ID into a
Select mode of Tell us what route you take and where you get on and off. Select as many full search that
transport for this leg routes, stops or stations as you like, but you have to pick at least one of each.
finds both routes
QuickFind Enter route name, number or bus stop # Go and stops
Bus
Routes Stops/Stations Allowed multiple
SkyTrain Please select a route route and stop
002 MacDonald/Burrard Stn
003 Main/Downtown selection
SeaBus 004 Phibbs Exchange/Powell
005 Robson/Downtown
West Coast
Express 006 Davie/Downtown
007 Nanaimo/Dunbar
Cancel Add Another Leg Save Trip
Step 3: Set Up Notification
Select when you are interested in receiving alerts for this trip.

93. Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to receive alerts. Remember, for the
return trip, you need to create another alert.
Step 1: Name your Trip Change
Morning Commute
Step 2: Add Trip Legs
Legs are transfers. For instance you might transfer from one bus to another or from one mode (e.g. Bus) to
another (e.g. SkyTrain) on any given trip.
Leg 1 20 Victoria/Downtown: Harrison Loop, Victoria Dr at Fraserview Change Delete
Leg 2
Changed search
Mode of Transit Route and Stop/Station by stop ID into a
Select mode of Tell us what route you take and where you get on and off. Select as many full search that
transport for this leg routes, stops or stations as you like, but you have to pick at least one of each.
finds both routes
QuickFind Enter route name, number or bus stop # Go and stops
Bus
Routes Stops/Stations Stop alerts
SkyTrain Please select a route seamlessly
002 MacDonald/Burrard Stn
003 Main/Downtown integrated into trip
SeaBus legs. User is not
004 Phibbs Exchange/Powell
aware of the
005 Robson/Downtown distinction, and is
West Coast
Express 006 Davie/Downtown presented with a
007 Nanaimo/Dunbar simpler experience.
Cancel Add Another Leg Save Trip
Step 3: Set Up Notification
Select when you are interested in receiving alerts for this trip.

94. Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to receive alerts. Remember, for the
return trip, you need to create another alert.
Step 1: Name your Trip Change
Morning Commute
Step 2: Create Trip Legs
Legs are transfers. For instance you might transfer from one bus to another or from one mode (e.g. Bus) to
another (e.g. SkyTrain) on any given trip.
Leg 1 20 Victoria/Downtown: Harrison Loop, Victoria Dr at Fraserview Dr Change
Leg 2 Expo Line: Waterfront Change
Step 3: Set Up Notification
Select when you are interested in receiving alerts for this trip.
Notification Times
Select when you want to receive alerts.
Days Mon Tues Wed Thu Fri Sat Sun
Times AM peak Midday PM peak Evening As alerts are posted
9am-11am 11am - 3pm 3pm - 6pm 6pm - 9pm
System-wide Alerts
I want to receive alerts that affect the whole transit system. These alerts usually pertain to weather
related or emergency stoppages and are very likely to impact your trip.
Mon Tues Wed Thu Fri Sat Sun
Contact Information
Choose how you want all your alerts to be sent to you. Please note that changing your contact
information will affect your One Customer Profile and all your alerts.
Text message number: (604)778-2500 provider: Rogers Change
Email address: antek@analyticdesigngroup.com Change
Save Alert

95. Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to receive alerts. Remember, for the
return trip, you need to create another alert.
Step 1: Name your Trip Change
Morning Commute
Step 2: Create Trip Legs
Legs are transfers. For instance you might transfer from one bus to another or from one mode (e.g. Bus) to
another (e.g. SkyTrain) on any given trip.
Leg 1 20 Victoria/Downtown: Harrison Loop, Victoria Dr at Fraserview Dr Change
Leg 2 Expo Line: Waterfront Change
Step 3: Set Up Notification
Select when you are interested in receiving alerts for this trip.
Further simplified
day/time selection, Notification Times
weekdays selected Select when you want to receive alerts.
by default. Interface Days Mon Tues Wed Thu Fri Sat Sun
is less efficient, but
easier to understand. Times AM peak Midday PM peak Evening As alerts are posted
9am-11am 11am - 3pm 3pm - 6pm 6pm - 9pm
System-wide Alerts
I want to receive alerts that affect the whole transit system. These alerts usually pertain to weather
related or emergency stoppages and are very likely to impact your trip.
Mon Tues Wed Thu Fri Sat Sun
Contact Information
Choose how you want all your alerts to be sent to you. Please note that changing your contact
information will affect your One Customer Profile and all your alerts.
Text message number: (604)778-2500 provider: Rogers Change
Email address: antek@analyticdesigngroup.com Change
Save Alert

96. Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to receive alerts. Remember, for the
return trip, you need to create another alert.
Step 1: Name your Trip Change
Morning Commute
Step 2: Create Trip Legs
Legs are transfers. For instance you might transfer from one bus to another or from one mode (e.g. Bus) to
another (e.g. SkyTrain) on any given trip.
Leg 1 20 Victoria/Downtown: Harrison Loop, Victoria Dr at Fraserview Dr Change
Leg 2 Expo Line: Waterfront Change
Step 3: Set Up Notification
Select when you are interested in receiving alerts for this trip.
Notification Times
Select when you want to receive alerts.
Days Mon Tues Wed Thu Fri Sat Sun
Times AM peak Midday PM peak Evening As alerts are posted
9am-11am 11am - 3pm 3pm - 6pm 6pm - 9pm
System-wide Alerts
Critical system I want to receive alerts that affect the whole transit system. These alerts usually pertain to weather
wide alerts related or emergency stoppages and are very likely to impact your trip.
integrated as an
Mon Tues Wed Thu Fri Sat Sun
opt out process.
Contact Information
Choose how you want all your alerts to be sent to you. Please note that changing your contact
information will affect your One Customer Profile and all your alerts.
Text message number: (604)778-2500 provider: Rogers Change
Email address: antek@analyticdesigngroup.com Change
Save Alert

97. Implementation
Implementation was tested.
The trip metaphor was successful.
Integrating trip planner boosted the visibility and success of the
application.

99. testing showed
that the legs
where a little too
large, making
other items on
the page hard to
find.

100. email
verification
added

102. no problems
recorded,
advancing
through steps,
was according to
user expectations

104. Final text was
short and easy
to follow.

105. Users where
not able to
select multiple
routes.

106. Stops where not in
order as they appear
in a route. Users
had difficulty finding
certain stops. Third
party system and
complexity of the
transit system
(certain buses
change route
according to time of
day) pushed this to
a phase 2
implementation.

108. Some users had
difficulty with the
form at his point
because the headers
of completed steps
did not “fade out”.
Users did not have
any visual cues
where to focus their
attention

109. Thank You
Questions?