Designing Usable Apps:
2 Case Studies



BC Apps 4 Climate Action Webinar
June 22, 2010

Karyn Zuidinga
Principal & Direct...
Agenda
•   Introductions
    •   About Analytic Design Group
    •   About me
•   Background about the two projects
•   Ca...
Analytic Design Group
Analytic Design Group Inc. (ADGi) is a visionary user experience
consulting firm with proven strategi...
Who am I?
                   • 12+ years experience designing information and interaction
                     spaces for ...
TripPlanner Background
•   TransLink has had a TripPlanner on the TransLink website for
    several years
•   The software...
TransLink Trip Planner
    Redesign
•   In late 2008 TransLink engaged ADGi to conduct an expert
    review and then usabi...
Trip Planner Step 1:
Enter Departure & Destination
Before
What users
normally
would enter
              163 W. Hastings, Vancouver
163 Hastings



How you were
supposed to
enter the address
Even if the system was able
                                   to parse the address it
                                   ...
163 Hastings



  How you were
  supposed to
  enter the address

How many people
really plan a
transit trip more
than a d...
If your location was
                                   in this list selecting
                                   it from ...
163 Hastings



How you were
supposed to
enter the address



                                   Asking users to
         ...
Trip Planner: Step 1
Enter Departure & Destination
Design Recommendation
Schedules & Maps > Trip Planner

Trip Planner
        1                      2                        3
Enter Trip Criteri...
Schedules & Maps > Trip Planner

         Trip Planner
                   1                     2                        3...
Schedules & Maps > Trip Planner

Trip Planner
        1                      2                        3
Enter Trip Criteri...
Schedules & Maps > Trip Planner
                                                                                          ...
Trip Planner: Step 1
Enter Departure & Destination
Implemented Changes
System
recognizes
directions and
prompts street
names and
direction.
Improved help
text.
Customization is
restricted to critical
information.
No sorting
preferences.
Trip Planner, Step 2:
Search Results
Before
The 3 best trips
are displayed
but users may
not realize that
the options they
selected on the
first screen
changes the
res...
Trip Planner, Step 2:
Search Results
Design Recommendation
Trip Planner
        1                       2                        3
Enter Trip Criteria       Select Itinerary        ...
Trip Planner
                         1                       2                        3
                 Enter Trip Crite...
Trip Planner
                       1                       2                        3
               Enter Trip Criteria ...
Trip Planner
                           1                       2                        3
                   Enter Trip C...
Trip Planner, Step 2:
Search Results
Implemented Changes
Show sort
options on
results page
Allow users
to resubmit
search with
new options
Trip Planner, Step 3:
Selected Route
Before
The selected
itinerary is
separated visually
from the step by
step details
In testing most
users didnʼt notice
map as it was
below the fold
Impossible for the user
to tell if there are any
alerts/problems with
any of the routes in
their selected itinerary
Trip Planner, Step 3:
Selected Route
Design Recommendation
Schedules & Maps > Trip Planner


Trip Planner
        1                          2                     3
Enter Trip Crite...
Schedules & Maps > Trip Planner


                      Trip Planner
The selected
itinerary is                  1         ...
Schedules & Maps > Trip Planner


Trip Planner
        1                          2                     3
Enter Trip Crite...
Schedules & Maps > Trip Planner


Trip Planner
        1                          2                     3
Enter Trip Crite...
Trip Planner, Step 3:
Selected Route
Implemented Changes
Users can
see that there
is a map without
scrolling.
Alerts marked
TransLink Transit Alerts
•   In the fall of 2009 TransLink engaged ADGi to help design a
    “notifications tool”
•   While...
First Attempt
• Quick visualization
• Discuss a specific prototype
• Flag incomplete features
• Identify positive and negat...
My Trips
                                                                    I need to...
Send
notification    Trip name   ...
My Trips
                                                                                     I need to...
               ...
My Trips
                                                                                        I need to...
            ...
My Trips / Create a new Trip
     Create Trips                Setup Notifications                Manage Subscriptions




 ...
Separate trip
creation from
notification details   My Trips / Create a new Trip
and manage
                           Creat...
My Trips / Create a new Trip
                             Create Trips                Setup Notifications                Ma...
My Trips / Create a new Trip
                          Create Trips                Setup Notifications                Manag...
My Trips / Create a new Trip
     Create Trips                Setup Notifications                Manage Subscriptions




 ...
My Trips / Create a new Trip
     Create Trips                Setup Notifications                Manage Subscriptions




 ...
My Trips / Create a new Trip
     Create Trips           Setup Notifications         Manage Subscriptions




   Work Commu...
My Trips / Create a new Trip
                          Create Trips           Setup Notifications         Manage Subscripti...
My Trips / Create a new Trip
     Create Trips           Setup Notifications         Manage Subscriptions




   Work Commu...
My Trips / Create a new Trip
     Create Trips                Setup Notifications    Manage Subscriptions




  How do you ...
My Trips / Create a new Trip
                       Create Trips                Setup Notifications    Manage Subscriptions...
My Trips / Create a new Trip
                    Create Trips                Setup Notifications    Manage Subscriptions


...
My Trips / Create a new Trip
     Create Trips                Setup Notifications    Manage Subscriptions




  How do you ...
System requirements &
feature simplification
Conversations with TransLink, the external development team
(FCV technologies)...
My Notifications            How notifications work                                                      collapse
 Receive no...
My Notifications            How notifications work                                                      collapse
           ...
My Notifications            How notifications work                                                      collapse
           ...
Step 1: Define Trip         Step 2: Setup Notifications


Create a one way trip. Name it something memorable, so that you ca...
Step 1: Define Trip         Step 2: Setup Notifications


                        Create a one way trip. Name it something m...
Step 1: Define Trip         Step 2: Setup Notifications


                  Create a one way trip. Name it something memorab...
1. Define Trip              2. Setup Notifications

Trip name Going to Work


Trip Legs           020,      Millennium line
...
Were able
to simplify   1. Define Trip              2. Setup Notifications
and have
only two      Trip name Going to Work
st...
1. Define Trip              2. Setup Notifications

               Trip name Going to Work


               Trip Legs       ...
1. Define Trip              2. Setup Notifications

             Trip name Going to Work


             Trip Legs           ...
Refining User Experience
What needs more explanation? What needs to hide?
What is needlessly complicated?
What would make l...
My Alerts       How alerts work                                                                     Collapse
Receive alert...
My Alerts       How alerts work                                                                     Collapse
             ...
My Alerts       How alerts work                                                                     Collapse
Receive alert...
My Alerts       How alerts work                                                                     Collapse
             ...
Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to ...
Get Transit Alerts on your cellphone or by email.
  Create a trip, by defining trip leg(s), and then select when you want t...
Get Transit Alerts on your cellphone or by email.
  Create a trip, by defining trip leg(s), and then select when you want t...
Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to ...
Get Transit Alerts on your cellphone or by email.
                       Create a trip, by defining trip leg(s), and then s...
Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to ...
Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to ...
Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to ...
Get Transit Alerts on your cellphone or by email.
Create a trip, by defining trip leg(s), and then select when you want to ...
Get Transit Alerts on your cellphone or by email.
                        Create a trip, by defining trip leg(s), and then ...
Get Transit Alerts on your cellphone or by email.
                   Create a trip, by defining trip leg(s), and then selec...
Implementation
Implementation was tested.
The trip metaphor was successful.
Integrating trip planner boosted the visibilit...
testing showed
that the legs
where a little too
large, making
other items on
the page hard to
find.
email
verification
added
no problems
recorded,
advancing
through steps,
was according to
user expectations
Final text was
short and easy
to follow.
Users where
not able to
select multiple
routes.
Stops where not in
order as they appear
in a route. Users
had difficulty finding
certain stops. Third
party system and
compl...
Some users had
difficulty with the
form at his point
because the headers
of completed steps
did not “fade out”.
Users did n...
Thank You	
Questions?
Designing usableapps 3
Designing usableapps 3
Designing usableapps 3
Designing usableapps 3
Designing usableapps 3
Designing usableapps 3
Designing usableapps 3
Designing usableapps 3
Designing usableapps 3
Designing usableapps 3
Designing usableapps 3
Upcoming SlideShare
Loading in …5
×

Designing usableapps 3

2,065 views

Published on

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.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,065
On SlideShare
0
From Embeds
0
Number of Embeds
166
Actions
Shares
0
Downloads
33
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide







  • Difficult to correctly format the addresses/locations in the From and To fields as the system does not recognize directional indicators or city names.

    Selecting from Popular locations is difficult because the user needs to first select a category, e.g. transportation options and then a specific location.

    While the calendar is useful, given that most users are planning trips that will happen in the next few days, it is not necessary to have such a large calendar.

    The sort options are not useful without the context of the results.

  • Difficult to correctly format the addresses/locations in the From and To fields as the system does not recognize directional indicators or city names.

    Selecting from Popular locations is difficult because the user needs to first select a category, e.g. transportation options and then a specific location.

    While the calendar is useful, given that most users are planning trips that will happen in the next few days, it is not necessary to have such a large calendar.

    The sort options are not useful without the context of the results.

  • Difficult to correctly format the addresses/locations in the From and To fields as the system does not recognize directional indicators or city names.

    Selecting from Popular locations is difficult because the user needs to first select a category, e.g. transportation options and then a specific location.

    While the calendar is useful, given that most users are planning trips that will happen in the next few days, it is not necessary to have such a large calendar.

    The sort options are not useful without the context of the results.

  • Difficult to correctly format the addresses/locations in the From and To fields as the system does not recognize directional indicators or city names.

    Selecting from Popular locations is difficult because the user needs to first select a category, e.g. transportation options and then a specific location.

    While the calendar is useful, given that most users are planning trips that will happen in the next few days, it is not necessary to have such a large calendar.

    The sort options are not useful without the context of the results.

  • Difficult to correctly format the addresses/locations in the From and To fields as the system does not recognize directional indicators or city names.

    Selecting from Popular locations is difficult because the user needs to first select a category, e.g. transportation options and then a specific location.

    While the calendar is useful, given that most users are planning trips that will happen in the next few days, it is not necessary to have such a large calendar.

    The sort options are not useful without the context of the results.

  • Difficult to correctly format the addresses/locations in the From and To fields as the system does not recognize directional indicators or city names.

    Selecting from Popular locations is difficult because the user needs to first select a category, e.g. transportation options and then a specific location.

    While the calendar is useful, given that most users are planning trips that will happen in the next few days, it is not necessary to have such a large calendar.

    The sort options are not useful without the context of the results.

  • Difficult to correctly format the addresses/locations in the From and To fields as the system does not recognize directional indicators or city names.

    Selecting from Popular locations is difficult because the user needs to first select a category, e.g. transportation options and then a specific location.

    While the calendar is useful, given that most users are planning trips that will happen in the next few days, it is not necessary to have such a large calendar.

    The sort options are not useful without the context of the results.

  • Difficult to correctly format the addresses/locations in the From and To fields as the system does not recognize directional indicators or city names.

    Selecting from Popular locations is difficult because the user needs to first select a category, e.g. transportation options and then a specific location.

    While the calendar is useful, given that most users are planning trips that will happen in the next few days, it is not necessary to have such a large calendar.

    The sort options are not useful without the context of the results.

  • Difficult to correctly format the addresses/locations in the From and To fields as the system does not recognize directional indicators or city names.

    Selecting from Popular locations is difficult because the user needs to first select a category, e.g. transportation options and then a specific location.

    While the calendar is useful, given that most users are planning trips that will happen in the next few days, it is not necessary to have such a large calendar.

    The sort options are not useful without the context of the results.

  • Difficult to correctly format the addresses/locations in the From and To fields as the system does not recognize directional indicators or city names.

    Selecting from Popular locations is difficult because the user needs to first select a category, e.g. transportation options and then a specific location.

    While the calendar is useful, given that most users are planning trips that will happen in the next few days, it is not necessary to have such a large calendar.

    The sort options are not useful without the context of the results.



  • Added a list of suggested values when users type in an address or location.

    Moved the Popular locations from drop-down boxes to a link with a list of all locations.

    Changed the depart and arrive selection from a drop-down list to radio buttons so that users can see both options.

    Reduced the size of the calendar selector.

    Removed the sort options to the next screen.






  • Added a list of suggested values when users type in an address or location.

    Moved the Popular locations from drop-down boxes to a link with a list of all locations.

    Changed the depart and arrive selection from a drop-down list to radio buttons so that users can see both options.

    Reduced the size of the calendar selector.

    Removed the sort options to the next screen.






  • Added a list of suggested values when users type in an address or location.

    Moved the Popular locations from drop-down boxes to a link with a list of all locations.

    Changed the depart and arrive selection from a drop-down list to radio buttons so that users can see both options.

    Reduced the size of the calendar selector.

    Removed the sort options to the next screen.






  • Added a list of suggested values when users type in an address or location.

    Moved the Popular locations from drop-down boxes to a link with a list of all locations.

    Changed the depart and arrive selection from a drop-down list to radio buttons so that users can see both options.

    Reduced the size of the calendar selector.

    Removed the sort options to the next screen.






  • Added a list of suggested values when users type in an address or location.

    Moved the Popular locations from drop-down boxes to a link with a list of all locations.

    Changed the depart and arrive selection from a drop-down list to radio buttons so that users can see both options.

    Reduced the size of the calendar selector.

    Removed the sort options to the next screen.






  • Added a list of suggested values when users type in an address or location.

    Moved the Popular locations from drop-down boxes to a link with a list of all locations.

    Changed the depart and arrive selection from a drop-down list to radio buttons so that users can see both options.

    Reduced the size of the calendar selector.

    Removed the sort options to the next screen.






  • Added a list of suggested values when users type in an address or location.

    Moved the Popular locations from drop-down boxes to a link with a list of all locations.

    Changed the depart and arrive selection from a drop-down list to radio buttons so that users can see both options.

    Reduced the size of the calendar selector.

    Removed the sort options to the next screen.






  • Added a list of suggested values when users type in an address or location.

    Moved the Popular locations from drop-down boxes to a link with a list of all locations.

    Changed the depart and arrive selection from a drop-down list to radio buttons so that users can see both options.

    Reduced the size of the calendar selector.

    Removed the sort options to the next screen.






  • Added a list of suggested values when users type in an address or location.

    Moved the Popular locations from drop-down boxes to a link with a list of all locations.

    Changed the depart and arrive selection from a drop-down list to radio buttons so that users can see both options.

    Reduced the size of the calendar selector.

    Removed the sort options to the next screen.











  • All design changes were implemented except:

    Popular locations were not changed because ...

    Kept some of the search filters on this screen





  • All design changes were implemented except:

    Popular locations were not changed because ...

    Kept some of the search filters on this screen





  • All design changes were implemented except:

    Popular locations were not changed because ...

    Kept some of the search filters on this screen





  • All design changes were implemented except:

    Popular locations were not changed because ...

    Kept some of the search filters on this screen





  • All design changes were implemented except:

    Popular locations were not changed because ...

    Kept some of the search filters on this screen






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











  • The map is at the bottom of the steps (below the fold) and is hard to see.



  • The map is at the bottom of the steps (below the fold) and is hard to see.



  • The map is at the bottom of the steps (below the fold) and is hard to see.



  • The map is at the bottom of the steps (below the fold) and is hard to see.



  • The map is at the bottom of the steps (below the fold) and is hard to see.




  • Design Changes:

    The route map is now in a separate tab beside the step by step instructions.

  • Design Changes:

    The route map is now in a separate tab beside the step by step instructions.

  • Design Changes:

    The route map is now in a separate tab beside the step by step instructions.

  • Design Changes:

    The route map is now in a separate tab beside the step by step instructions.

  • Design Changes:

    The route map is now in a separate tab beside the step by step instructions.






  • Quick visualization of the high level requirements. Hard to have a meeting around a theoretical solution with all the parties providing all the relevant details. It is easier to discuss a prototype.
    The interface is incomplete, it is meant to start a conversation. Walking through the flow, incomplete functionality is easily captured and discussed.
    Test what would work for the user on a high level. Very apparent what forms of presentation work for the user, and which require more work.






















  • next version - two steps but three kinds of alerts - simplest to program system
  • next version - two steps but three kinds of alerts - simplest to program system
  • next version - two steps but three kinds of alerts - simplest to program system








  • simplification + system requirements




























  • Designing usableapps 3

    1. 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. 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. 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. 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. 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. 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. 7. Trip Planner Step 1: Enter Departure & Destination Before
    8. 8. What users normally would enter 163 W. Hastings, Vancouver
    9. 9. 163 Hastings How you were supposed to enter the address
    10. 10. 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
    11. 11. 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?
    12. 12. 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
    13. 13. 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
    14. 14. Trip Planner: Step 1 Enter Departure & Destination Design Recommendation
    15. 15. 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 >
    16. 16. 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 >
    17. 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 Make calendar less prominent Enter your preferred departure or arrival time. Depart 00:00 am mm/dd/yyyy Arrive Find Routes >
    18. 18. 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 >
    19. 19. Trip Planner: Step 1 Enter Departure & Destination Implemented Changes
    20. 20. System recognizes directions and prompts street names and direction.
    21. 21. Improved help text.
    22. 22. Customization is restricted to critical information. No sorting preferences.
    23. 23. Trip Planner, Step 2: Search Results Before
    24. 24. 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.
    25. 25. Trip Planner, Step 2: Search Results Design Recommendation
    26. 26. 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.
    27. 27. 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.
    28. 28. 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.
    29. 29. 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.
    30. 30. Trip Planner, Step 2: Search Results Implemented Changes
    31. 31. Show sort options on results page
    32. 32. Allow users to resubmit search with new options
    33. 33. Trip Planner, Step 3: Selected Route Before
    34. 34. The selected itinerary is separated visually from the step by step details
    35. 35. In testing most users didnʼt notice map as it was below the fold
    36. 36. Impossible for the user to tell if there are any alerts/problems with any of the routes in their selected itinerary
    37. 37. Trip Planner, Step 3: Selected Route Design Recommendation
    38. 38. 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
    39. 39. 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
    40. 40. 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
    41. 41. 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
    42. 42. Trip Planner, Step 3: Selected Route Implemented Changes
    43. 43. Users can see that there is a map without scrolling.
    44. 44. Alerts marked
    45. 45. 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
    46. 46. 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?
    47. 47. 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
    48. 48. 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
    49. 49. 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
    50. 50. 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
    51. 51. 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
    52. 52. 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
    53. 53. 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
    54. 54. 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
    55. 55. 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
    56. 56. 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
    57. 57. 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
    58. 58. 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
    59. 59. 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
    60. 60. 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
    61. 61. 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
    62. 62. 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
    63. 63. 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?
    64. 64. 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
    65. 65. 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
    66. 66. 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
    67. 67. 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
    68. 68. 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
    69. 69. 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
    70. 70. 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
    71. 71. 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
    72. 72. 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
    73. 73. 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
    74. 74. 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?
    75. 75. 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
    76. 76. 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
    77. 77. 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
    78. 78. 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
    79. 79. 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.
    80. 80. 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.
    81. 81. 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
    82. 82. 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.
    83. 83. 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.
    84. 84. 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.
    85. 85. 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.
    86. 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 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.
    87. 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 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
    88. 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 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
    89. 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: 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
    90. 90. Implementation Implementation was tested. The trip metaphor was successful. Integrating trip planner boosted the visibility and success of the application.
    91. 91. testing showed that the legs where a little too large, making other items on the page hard to find.
    92. 92. email verification added
    93. 93. no problems recorded, advancing through steps, was according to user expectations
    94. 94. Final text was short and easy to follow.
    95. 95. Users where not able to select multiple routes.
    96. 96. 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.
    97. 97. 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
    98. 98. Thank You Questions?

    ×