West Point Treatment Plant

Website

Creating easy access to learning about West Point Treatment Plant and the improvement projects.

In this case study:

  • Competitor analysis

  • Wireframing

  • User testing

Role: UI designer, UX designer

Overview

The West Point Treatment Plant site is one of many King County websites for people living in and visiting the region to learn about county facilities and engage with improvement projects. However, while the existing site provided essential information, it fell short in visual appeal and hierarchy, which would be crucial for fostering community engagement and encouraging users to stay connected with and better understand the county's initiatives.

During a preliminary discussion with the client, we established three major goals: encourage more visitors to the web page, create more consistent presentation of information across pages, and refocus content presentation.

Learning patterns and constraints

We established measures of success that would relate to the client’s goals.

  • Ensure visitors are able to navigate to the secondary pages.

  • Increase subscribers to the newsletter

Before proposing a design to the client, I first conducted an analysis of other project websites within King County and other government agencies. I researched how elements were being used to support project outreach and what designs helped build visual interest in what could otherwise be seen as very technical language. This analysis would also allow our design to maintain consistency with other pages and best use the elements already within the client’s branding.

South County Recycling and Transfer Station Project

  • Introduction video provides project context immediately, and summarizes enough for visitors who don’t scroll

  • Featured photo accompanying each major section of text increases readability and makes the page more interesting to keep scrolling

  • Project schedule table provides a visual way to convey information

  • Resources and links located at the bottom matches expectations created by footers

SR167 Completion Project

  • Project map immediately delivers priority information regarding who is impacted by the project

  • Bulleted key information with corresponding tabs for more details helps efficiently summarize the project, but users can easily navigate to more if interested

  • “What to expect” section with latest updates located underneath project overview may not be intuitive

  • CTA at the bottom to sign up for updates blends in with the footer because of similar background color

Design

Power Quality Improvement Project

With the Power Quality Improvements building being the current featured project, we used this page as a base to standardize how project information will be presented.

Improve hierarchy

  • Create a banner with the project update so that it is more prominently featured

  • Increase size and organization of stay informed banner to create a clear call to action

Create visual interest

  • Change project schedule and timeline to be featured as a table to break up bodies of text and help users more clearly understand the project progression

Improve ease of navigation

  • Condense FAQ section into accordion tabs, allowing users to more efficiently navigate to information relevant to their goals

Public Engagement

Create visual interest

  • Insert hero image at the top of the page to create visual interest and preview the page’s content

  • Change upcoming events to be featured as a table to break up bodies of text and help users more clearly see dates. Also maintains consistency with PQI

  • Adding photos and alternating background colors to the remaining sections, which helps avoid fatiguing and losing user’s interest. Alternatively proposed creating accordion tabs for these sections so that navigation could be more efficient.

Improve ease of navigation

  • Organized “on this page” navigation links to be one column, enhancing readability

Improvements Projects

Improve hierarchy

  • Featured project section to celebrate the PQI project and draw more traffic to it

Increase size and organization of stay informed banner to create a clear call to action

Improve

  • Organized active and planned projects list into cards to create more visual interest and break up bodies of text

To prepare the high fidelity mockups for share-out with the client, we broke down each element of our design proposal, explaining the features, our reasoning behind it, and perceived benefits.

During this presentation, the web development team shared technical constraints and feedback on our proposal. 

  • Move forward with the CTA banner - creates a clear CTA and also groups the relevant information (link to the previous newsletter)

  • Maintain list of links over cards to better fit user expectations of how county sites are laid out

  • Maintain project schedule table - must ensure table can be made responsive

  • Appreciate the link to the online open house is more visible

Testing

Parallel to these efforts, the web team had also been collecting heat map data, highlighting what areas were and were not being noticed by visitors.

  • No users were using the right column navigation to visit other pages

  • There were high levels of interest in the active projects pages

We coordinated with the web team to implement the proposed design and conduct another heat map test across 30 days.

  • There was little change in subscription numbers. However, it is unclear as of now whether this is a reflection of the design or the users visiting the pages.

Reflection and next steps

My experience with the West Point project showcased the iterative nature of the design process, particularly when collaborating across multiple teams. The high fidelity prototype proved invaluable for communicating with stakeholders ranging from web design experts to the project manager, enhancing their understanding through visualization. Evaluating an existing website from an external UX perspective apart from the client’s internal web team provided significant insights into the importance of clear communication channels. This experience has been instrumental in my growth as a UX designer.

Next Steps

We are currently revising our design to incorporate insights from the heat maps and the team feedback. We will be reviewing additional site analytics, including the source of traffic (people who came from the newsletter would not subscribe, etc.).