Home

The home page welcomes visitors to the site by focusing on top-tasks and providing glimpses into what type of information they'll be able to find.

Homepage-specific considerations

• Prioritizes travel-related information - over 85% of visitors use the site for travel-related information

• De-prioritizes content that does not support users’ top tasks

• Represents the entire state / is not Seattle-centric

• Actionable and streamlined – fewer links, but with more opportunity to start some tasks straight from the homepage

• Dynamic content elements to keep it fresh

  • Seasonal travel information

  • Project highlighted can update quarterly or as needed

  • From the agency content can update frequently to reflect news and agency initiatives

  • Alerts that qualify for homepage placement are regularly updated and removed when no longer relevant

• Opportunity to share brand personality

Anatomy

Emergency alert

The emergency alert allows some space for an emergent, high impact alert to be above the fold on the homepage . Use for emergent issue that is driving traffic to the site , something WSDOT are told to put on the homepage by the Governor's Office. These alerts should be time-boxed, temporary, and re-assessed daily under the criteria that defines "emergent".

Specs

• Title font: same as H5

• Description font: body small

• Space between the icon and the title: 8px (mobile), 16px (desktop)

• Icon size: 24px x 24px

• Padding: 8px auto (mobile), 16px auto (desktop)

• Color: Warning 50% saturation

• Border-top: 8px

Travel data by mode

The banner displays the five modes for which we have travel-related content . The tabs contain both real-time data and static data that can be seasonal.

The form on Cars & Trucks, Ferries, and Local Aircraft allows for a real-time travel data search to begin straight from the home page.

The content links to static travel content and seasonal content when possible.

Note: WSDOT website does not have travel content for public transportation, so it is not included as a travel mode.

Travel modes

Specs

• Padding: 40px auto 80px auto

• Mode buttons

  • Size: 63px x 72px (mobile), 88px auto (desktop)

  • Padding: 6px 4px

  • Space between buttons: 4px

  • Icon size: 29px

  • Button colors in off state: dark accent/light accent

  • Button colors in on state: dark accent text and brand primary icon/white

• Banner content

  • Background colors: white/gray 5 95%

  • Border radius: 4px

  • Padding: 16px 32px

  • Height: The height of the div must be as tall as the column of buttons

  • Titles: H3

  • Text: body medium

  • Form field height: 32px

High impact notification

Any non-emergency alert is displayed in a full width bar that provides flexibility and readability . These allow space for a high impact alert related to travel that apply to a majority audience in Washington .

These would be high statewide travel impact (planned or emergent) and these notifications should be time-boxed, temporary, and re-assessed daily under the criteria that defines "high impact state travel".

Limited to a maximum of two alerts at any time.

Specs

• Background color: warning 25%

• Follow same spacing and alignment as the emergency alert

• Margin: 2px 0

Project search & project highlight

Quick search of current projects

• Ability to start your projects search straight from the homepage

Project highlight

Contributes to the dynamic content on the homepage – can be changed out quarterly or when a planned activity will drive visitors to the website to look up information

Specs

• Background color: primary brand 4%

• Form field height: 48px

• Project highlight background color: primary brand

Top tasks for business partners and rule-seekers

• Access to the two top tasks for each of the remaining sections and audiences:

  • Business with WSDOT and business partners

  • Engineering & Standards and rule-seekers

• These were selected as the top tasks by considering page views, user-reported top tasks, and are also reflected as the top tasks on each section’s landing page

• Represent what WSDOT does and how it supports its mission (still tweaking)

Specs

• Background color: white

• Padding: 80px auto

• Buttons

  • Background color: white

  • Border: 1px solid primary 80

  • Text color: primary 80

  • Icon color: primary 40

  • Padding: 16px 32px

  • Space between buttons: 20px

  • Shadow: clickable card

  • Hover/active state: reverse colors, remove shadow

  • Align buttons so the angles align (22px staggering)

From the agency

Opportunity to push information, highlight a blog post, show WSDOT’s personality, or share feel good stories

Specs

• Padding: 56px auto

• Space between clickable cards: 16px (mobile), auto (desktop)

• Padding around text area: 16px (mobile), 24px (desktop)

• Date text: body smallest

• Title text link: H4

• Description: body small

Other specs

• This page type has the performance highlights at the top of the footer (not all templates do)

Inspect home page in public site mockups in Figma

Change log

07/26/21 - Changed the styling on the emergency alert. Lightened background color to make more accessible - added border-top to continue to highlight and draw attention.