Website design principles

The website's look and feel, content, flow and personality are based on the following design principles.

Focused on users and their top tasks

We want a website that is usable and accessible, where people can do the things they came to do and get answers to their questions quickly and easily. We surveyed and observed thousands of our website’s visitors to make sense of who they are and what they need from the website.

One primary user group, three secondary user groups

We have identified four user groups and created descriptions that include each group’s needs, tasks and pain points . The groups are Travelers, Business partners, Rule-seekers and Watchdogs. We know that over 85% of the visitors to the website are Travelers, based on a comprehensive user survey in 2016 and targeted research with each user group since. Most of the people in the other three groups tell us that they visit the site for travel-related information, in addition to their other tasks. For these reasons, we designated Travelers as the primary user group for the website overall. Individual sections and pages target one or more of the four user groups. For example, the Engineering & Standards section is primarily written and designed for Rule-seekers and Business Partners, not Travelers or Watchdogs.

General public vs. Transportation professionals

We are responsible for the state’s multimodal transportation system. This means that our website has content for people using the transportation system, as well as for transportation professionals who build, maintain and operate the system. We’ve worked to separate these areas of focus in the website structure so they can be written appropriate for their audience and do not impede either audience from completing their tasks.

Task-based

The website’s purpose is to help visitors complete their tasks. Whether transactional or information-seeking, we want our users to find what they are looking for, understand what they have found and take the appropriate next steps.

We prioritize content that supports tasks completed by many people and/or completed often. We deprioritize content that is informational or “good-to-know”.

Usable and accessible on any device

Analytics tells us that two-thirds of website visitors are coming from a mobile device. We designed the website on a small screen first to ensure its usability and then adjusted the layout and navigation for larger screen sizes. All content and functionality are available from any device. All content meets WCAG 2.0 A and AA standards for accessibility, including:

• Every table and visual (figure, map, chart) has a summary alternative (ALT) text description that conveys the intended meaning. Images aid users in understanding the content and are not strictly for decorative purposes.

• Tables contain data (numeric data, cost comparisons, etc.) and are not used to lay out text content. If there is data displayed in an image or on a map, there is also a link to download the data in an accessible format, (Excel file for example).

• Headers prioritize text content (H1, H2, H3, H4) and we do not skip heading levels to ensure screen readers can understand the hierarchy of content.

• All files linked to the website are accessible.

  • Do not put content in audio or video only. Media should have captions and transcripts.

  • Do not link Word documents to the website. This can create accessibility and legal issues. Link to an accessible PDF instead.

Making location-based content accessible

A lot of the content on the website is primarily described by its location. Studies show that users appreciate maps that present location-based content to help understand the content and complete tasks. These maps are rarely accessible for users with vision and some physical impairments. For this reason, we strive to provide location-based content in lists and tables, as well as on maps and searchable by county, road and other appropriate descriptors.

Clear and direct

The website is clear and direct. We purposely avoid content and design elements that are distracting, flashy or get in the way of completing tasks. Users can expect a clean and modern design with transparent and trustworthy content written in plain language that is easy to navigate. We want users to feel that we have done, and are willing to continue doing, the hard work required to provide a website that is easy to use, communicative and supportive.

Confident and communicative visual design

The goal of clear communication influences the look & feel of the site in several ways. It leads to a clean design with fewer links, white space and content that is easy to scan and digest. There is a limited set of utilitarian colors, drop shadows and decorative elements to create consistency with the brand and the overall intended message of the site. This design makes it easy for visitors to navigate to complete their task and focus on the high priority content on the page. It also better supports users of screen readers and users with varying cognitive abilities by prioritizing content and context over flash.

The boldest visual treatments have been directly influenced by the WSDOT logo. The forward slant amid an otherwise simple T design reinforces the direct and forward movement of the agency and website. Select components and elements throughout the site replicate this shape to evoke forward movement and guidance.

Quick navigation to useful content

Since the WSDOT website is large and supports a wide variety of audiences and tasks, the first two to three levels of the website help users navigate the correct pathway to find content that supports their task. We use specific and plain language in link labels and provide summaries for each link. Link summaries provide additional keywords or industry terms that help users to make quick and easy click decisions and to know they are on the right track.

Once users reach the right place on the website to complete their task, the focus shifts from navigation to content. Deprioritize navigation elements and focus on page content at these levels of the site. Content has clear hierarchy, uses plain language and prioritizes the information that helps users complete their tasks.

Systems and standards maintain consistency and quality

Consistency in layout and terminology is one of the most important things we can do to provide a usable website. Consistency helps our users locate information, learn functionality and feel confident that they can complete their tasks on webpages they haven’t visited yet or recently. For example, filtering works consistently across different content types so users can learn what to expect and be more successful whenever filtering functionality is present. This also allows content editors to use the established design solution for filtering without having to “reinvent the wheel."

Standards and processes help maintain the high quality we have established, especially in content and accessibility. We have already standardized content related to projects, contracts, mountain passes, weather stations and studies. Additional content types will be identified and standardized as content is improved before and after launch.