2022-04-19 Festivals & Events Design

Filters

• Reviewed wireframe from Uni

Decisions:

• No heading required for search/filter section (optional)

  • Search bar

    • No placeholder text

    • Button  - Text only

  • Default filter

    • one generic fieldset text

    • optional fieldset text for a group

    • collapsed by default (configurable)

    • no intro text (e.g. no explanatory text of “select filters to narrow down search results”)

    • labels are mandatory (dropdown text can be blank or have text like “select one” avoid redundancy text with label)

    • “Clear All” button - red style

    • No icons

      • note. add legend on a map

    • Collapsed with filters selected - same as current QuickMap filter

      • Able to remove individual filters or button to Clear All

Open

Current http://toronto.ca designs on left; proposed wireframe on right

Actions

Spotlight

• Not discussed

Actions

Calendar

• Sara showed design suggestion from prototype

  • Start and End date, using current date picker component

    • Start date, defaults to today

    • End date, blank by default

Open

Decisions

• Agreed on using standard date picker

• Recommendation is that date should appear between Search and Filter

Actions

Featured

• Sara updated prototype based on The Events Calendar Demo

  • Moved “Featured” to top left above title of the event, in small black font

    • Better for reading order and visually makes it part of the event information

  • Graphic changed from “star” to “bookmark” in yellow

• Discussion

  • Liked the design

    • Small font is good here - visual distinction from rest of text, and is appropriate use of small font within style guide

    • Colour of icon - yellow works here as it serves a similar function to the highlight

    • “Bookmark / Flag” graphic needs to be paired with words to make sense of it. It is used for different contexts on other websites (Events Calendar uses icon to mean featured, other sites use it to indicate a bookmark). It is not used on http://toronto.ca for any other meaning currently.

  • Can this design be used elsewhere on the site?

    • Works to highlight items in list views

    • Can allow a different label instead of “featured”

    • Unsure if it works in a content area, would need to see in context. There is a requirement to create a secondary highlight component.

Decisions

• Location: top-left of list

• Font: Small bold

• Graphic: yellow bookmark

Photo Gallery

• Looked at different options for photo galleries

• Uni brought design ideas

• Also looked at

  • City of Chicago :: Photo Gallery

  • Sunnybrook Park - City of Toronto

• See Photo Gallery for more information on the above examples

• Requirements:

  • Must accommodate landscape and portrait images

  • Caption must be shown on large images

  • Able to navigate through images via keyboard/mouse/swipe

Actions