Tour Template

 Relevant data

 Background

A new page design was created for Cultural Hotspot Tours, that allows for photos, descriptions, a map, and the ability to navigate between “stops” on a tour. This design has been re-used for Toronto Museums' Self-Guided Tours

We are recommending to re-use this design for Festivals & Events calendar. This page is to define the Tour template and when it is used.

When to use

define

Desktop

Tour is a full-width page. Key features:

• Photo (if present) is left aligned so that it renders first on mobile

• Description in main body

• Tour Stops (Locations) is a feature in the right rail

  • Small map that can zoom in/out and pan to see locations with current location highlighted

  • List of all locations with current location highlighted

  • If required, a link to “Get Directions” is included in the location list

  • Ability to get back to list of all tours (if multiple tours)

• Optional buttons to navigate through the tour - “Start” “Previous” “Next”

Variations

• This pattern may be re-used for locations that are not tours. Examples include Festivals & Events, Doors Open, Licious events. For these the variations may be:

  • Individual page may have zero (e.g. virtual), one or multiple locations

Open

Example of a stop on the tour

Open

Variation for Festivals & Events

Mobile

Tour is a full-width page. Key features:

• Photo (if present) appears first

• Description in main body

• Tour Stops (Locations) appear below description

  • Small map that can zoom in/out and pan to see locations with current location highlighted

  • List of all locations with current location highlighted

  • If required, a link to “Get Directions” is included in the location list

  • Ability to get back to list of all tours (if multiple tours)

• Optional buttons to navigate through the tour - “Start” “Previous” “Next”

  • On mobile these are rendered so they always appear at the bottom of the screen

 Options considered

 Action items

 Outcome