Real-time travel data landing

The Real-Time Travel Data Landing page allows users to find all types of current travel information for roads, bridges and ferries.

Anatomy

Title and summary

The Real-time travel data landing page has a title and a summary at the top.

Road/ferry route search

All pages in the Real-time travel data have the search form at the top below the page title and summary. See how search works for more details.

General Alert

A general travel-related alert is available on the landing page above the pathway cards. It has a tag with an icon and a label of "Traveler notice". There is a title and description. The description can have links in the text when needed.

See alert cards for more styling details.

Route times and tolls

When a search has been entered, any matching Route Times or Tolls will be pulled in above the Pathway Cards. Whether the Route times are delayed or not, they will show up.

Route times

Route Times should match the user's chosen road, and start and stop points, or ferry route. Route Times have a tag showing if there is a delay or not, a title showing the delay time from [Start] to [Stop] on [Road] or [Route], the current travel time, the current HOV lane travel time (if available), and average travel time.

Tolls

Tolls should match the user's chosen road between their start and stop points. Tolls have a tag showing that this road has a toll, and a title showing [rate] on [toll location] [direction].

Specs

• Tags

  • Padding: 4px 8px

  • Font-size/line-height: base0/base2 (mobile), base2/base4 (desktop)

  • Background colors: delay - warning, no delay - success, toll - dark accent

  • Font colors: gray 100 or white

  • Margin bottom: 8px

• Titles

  • Same size and treatment as H5

  • Margin bottom: 8px

• Details

  • Font-size/line-height: base3/base5

Pathway cards

The landing page features cards for each of the alerts, cameras, and restriction pages. Use pathway card styling and interactions.

Interactions

When the user searches or clears a search on this page, the number count on each pathway card updates with the number of results available for that search.

Read more on how search works.

Featured fact

There is room on the Real-time travel data landing page for a featured fact highlighting travel-related information that helps the user understand why this section is unique and the data WSDOT provides is important.

Secondary links

The secondary links include additional pages in this section that aren't as "real-time", aren't impacted by the search, or are links to static pages that users might look for in this section.

Interactions

When there is no search entered, route times is available on the list of secondary links. When search query is entered, route times disappears from the list of secondary links.

Read more on how search works.

Footer

The footer on this page type includes the fact bar.

Inspect real-time travel data in public site mockups in Figma