Role

Product Lead

Timeline

18 months

Team

  • HCD team (research, content, design, accessibility)
  • Development team
  • Sponsor
Laptop screen displaying the Washington State Legislature 'About the Legislature' webpage with sections on the House of Representatives and Senate chambers.

Scope

Initial user research, website strategy, redesigned site architecture, website concepts, usability testing, re-brand and visual design, organizational change management throughout.

I contributed to this work as part oF Anthro-Tech Inc. in 2023 & 2024.

1. Collaborative & productive cross-discipline work

As the product lead, I coordinated seven teams to research, design, and develop a new CMS and public website for access to the Legislative chambers and agencies.

Project timeline from October 2023 to November 2024 showing phases like discovery, MVP definition, web content strategy, website redesign, and MVP launch with tasks including user research, CMS requirements, content planning, usability studies, accessibility audits, and project management.

Project Management

Full-stack Development

Organizational Change Management

Content Strategy

UX Design

Digital Accessibility

Steering Committee

1,300+ users contributed feedback

30 agency and chamber representatives apprised

6 iterations of site structure addressing input & testing

Employing OOUX built a shared vocabulary and model of the site and its content across content, design, and development team members.
This got the teams working together and understanding each other easier!

Diagram showing relationships and attributes of Chambers, Committees, Legislators, and Staff Members with labeled colored boxes representing properties and nested connections.
Diagram showing relationships between legislative entities including Law, Rule, Bill, Chamber, Person, Committee, Procedure, and Event with cardinality annotations.

2. Designing a sustainable site structure for long term clarity

The previous site had three main navigation elements (side navigation, main actions list, and footer links) with duplicating links and competing options.

New priorities would get shoved in without any clarity or sense of relationship.

Washington State Legislature website homepage showing navigation menu, committee hearing schedules, public notices, and legislative resources.
Hierarchical sitemap diagram showing the top 3-4 layers of website structure, including sections Home, Bills, Learn and participate, State laws and rules, Legislators, and About the Legislature with subpages and notes.
Slide titled Executive Summary: High-level categories with a list of 10 orange rounded rectangles showing categories: Legislators, Laws, Parliamentary procedures, Committees, Bill and session information, Participate in the Legislature, Visit the Capitol, Learn about the legislative process, Ethics and oversight, and Accessibility. Left side text notes the categories are based on participant groups and labels and will inform decisions for new information architecture.Screenshot of a Miro board showing a complex internal IA working file with color-coded sticky notes and blocks titled Bill and session, Learn about, Laws, Committees, Legislators, Accessibility, Visiting, and Ethics.Pie chart showing 87% success rate for finding government audit reports, with 71% direct success, 16% indirect success, 9% direct failure, and 4% indirect failure; includes task description and user feedback about ease of finding audit information.Starting sitemap v1 diagram showing a content inventory audit with categories: Bills and session, The lawmaking process, State laws and rules, Legislators, and About the Legislature, with hierarchical labeled boxes and participant statistics.A pie tree diagram titled 'Task 2: Testify' showing hierarchical website navigation paths with nodes such as Homepage, Bills and Session, Committee meetings, and Bills, each with pie chart segments and connecting lines.

Structured IA housing over 300 pages

Task-based sitemap addressing 7 personas main goals

3. Modular content types for flexible development

Washington State Legislature webpage wireframe showing a layout with a header, breadcrumb navigation, page title and summary, sections for child pages with and without children, a search filter for child pages, a quote block, a call to action section, related resources, and footer with legislative contact info and links.
Wireframe layout of Washington State Legislature committee webpage showing sections for committee name, summary, members, activity, calendar, participation, resources, related committees, and contact information.
Wireframe layout of a Washington State Legislature webpage showing navigation menus, page title, summary, image gallery, body text, quotes, step-by-step guide, related resources, related links, and footer contact information.
Wireframe layout of a Washington State Legislature agency webpage showing sections for agency name, summary, featured links, calendar of events, resources, purpose, contact info, members and staff, and related links.

I led the design team to define dozens of unique content types with their own layouts that can be combined modularly to create different page layouts for different purposes.

19 unique page types

8 reusable content containers

4. Improving usability

Website tab showing form to search bills and initiatives by biennium, bill type, and topic, with a search button.
Search interface with dropdowns for Bills and initiatives, Committees, Laws and rules, Legislators, input for bill number, and buttons to search current bill numbers or see all bills from last session.

The "quick searches" had too many options, we set them to start with the most common uses and allow the user to customize once they got further in their search.

Educational resources section with links for Classroom resources, Classes and tutorials for the public, Legislative documents in alphabetical order, Elected officials, Senate Presidents, and State symbols.
Educational resources section with categories including classroom materials, legislative documents, pension resources, state symbols, civic organizations, and maps for Washington state.
Webpage section for Washington State laws (RCW) with search options by title number, links to current laws, session laws, past laws archive, and help with state laws.
Webpage section titled State laws (RCW) with description about Washington state laws, a button labeled Go to State laws (RCW), a search form for RCW by title number with a search button, and a link to All current State laws.

The design team hypothesized that exposing more options on landing pages would give better visibility, but testing showed that to be wrong. I led the team to design content templates that either elevated content up to the landing page without needing to go through deeper layers or focus on top actions and provide consistent methods for accessing deeper options.

Washington State Legislature website navigation menu showing sections under Learn and participate, including House of Representatives, Senate, Committees, Legislative agencies, Procedures, Ethics, and History of the Legislature with corresponding links.
Washington State Legislature website navigation menu with sections for bills, session, learning, state laws, legislators, and about. The 'Learn and participate' section is expanded showing links including Ethics, with sublinks for advisory opinions, compliant opinions, alerts, and reports.
Washington State Legislature website navigation menu with expanded 'Bills, meetings and session' dropdown showing links for Bills, Meetings, Session, and Legislation proposed by citizens.

I encouraged the team to explore additional navigation items, you can see it went through iterations to come to the most usable and maintainable structure.

4. Developing a modular design system for endless flexibility

Collage of multiple webpage screenshots from the Washington State Legislature website showing home, Senate, bills, lawmaking participation, committees, legislative process overview, member biography, and representative listings.

We carefully designed complementary colors and card variants so each content type could be used in any order with toggles to change the styles so the page was broken up in natural and intuitive ways. This required close collaboration with the development team to make sure the CMS had those functionalities in place.