Metropolitan

Water

District

Website

illustration of a monitor with a screenshot of mwdh2o.com
MWD looked to have a site that be aligned with their vision and innovation ventures as well as address functional shortcomings, layout design, and storytelling.
Role
Lead UX Designer
Project Span
36 Months
Release date
January 2023
Visit Site ▸▸▸

Project Scope

The Metropolitan Water District of Southern California (MWD) is a cooperative of fourteen cities, eleven municipal water districts, and one county water authority. MWD transports, treats, and delivers water to 19 million consumers in a 5,200-square-mile service area.

UX Assignments

  • Redesign the site architecture
  • Tell the story of MWD,it’s history, and how water gets to Southern California.
  • The site should have a centralized document repository.
  • All documents should be filed and categorized.
  • Design should be as modular as possible to allow for asset reuse.

Contributions & Deliverables

  • Stakeholder Interviews
  • Sitemap
  • Wireframes
  • Content & layout mapping
  • Collaborate with the Sr. Art Director
  • Collaborate with Overseas Development Team
Arrow pointing from one visual mock to anotherScreenshot of the old MDW homepagescreenshot of the new MWD homepage

Stakeholder Insights

To understand this project I viewed many historical documentaries and took a deep dive into their current site. I also requested the client take me and the team through a new hire training course into what it is that MWD does. With that being said, there was a lot riding on these stakeholder interviews.

  • They reported that the architecture and navigation of the site were hard to follow.
  • They also felt content was hidden and hard to find, even for return users.
  • They believed the site serves its “basic need” of being a hub for documents but does it poorly.
  • The search fictionality does not display proper results and sometimes lists content outside of the site domain.
  • The titles and vernacular of navigation items are not always reflective of their content.
  • They want to educate the public on who MWD is with relation to their water utility companies.
  • The site’s current design should evoke pride in MWD for its employees, customers, and local authorities through current designs and interactions.

Sitemap

After listening to stakeholders and auditing the site, I created a sitemap structure based on what was available. I also changed the content within those buckets.

  • I created a document resource library accessible from the utility navigation.
  • The client was open to creating new sections to “tell a story” of who they were, so I added sections to speak to their environmental stewardship and their history. These were in line with what they wanted.
  • The sitemap had a supporting content guide document describing what kind of content would be displayed within pages.
  • Based on this content audit, I was able to propose page templates with modular component
  • I moved secondary content that disrupted the story that MWD wanted to tell to the footer.
sitemap diagram depicting the new MWD navigation, content direction, and page template types

Document Repository Search

The document repository search allows users to find documents they need without having to dig through the site.

Categorization

With the help of the client, I was able to lay down a taxonomy to categorize content within a very robust spreadsheet. This spreadsheet was to guide the development team on the dependencies of this search/content filter.

Accessing the Document Repository Search

I wanted users to be able to access the repository at any time while on the site, so the document repository was placed within the utility navigation. Clicking on the repository opened a modal takeover with the filtering system.

curved green arrow pointing downMetropolitan Water District desktop navigation and header wireframe Metropolitan Water District desktop wireframe of the Find a Document Search with filters in their collapsed state.

Search and Filters

Users are able to search for specific documents, but because many times the document titles do not match the file name, they do not appear within internal search results. Filtering and sorting functionality was added.

    Metropolitan Water District desktop wireframe of the Find a Document Search displaying subject matter filtering options.
    Metropolitan Water District desktop wireframe of the Find a Document Search displaying document type filtering options.
    Metropolitan Water District desktop wireframe of the Find a Document Search displaying date filtering options.
    Metropolitan Water District desktop wireframe of the Find a Document Search displaying subject matter filtering options.

    Mobile Document Repository

    Though it seems highly unlikely that anyone may be accessing these documents on their mobile devices; per client request, I created a mobile version of the document repository.

    Mobile wireframe depicting the layout and functionality of the Metropolitan Water District document search overlay.

    Takeaways

    Be on your “A” game when you have many cooks in the kitchen.

    Sometimes it is hard to keep track of what people say, and especially when there are a lot. Taking notes and recapping were essential before leaving to make sure I was going in the right direction.

    It is always helpful to present written rationale for clients who may not be able to envision a product at its beginning stages.

    With this project it helped best to tell the client why and how we got to the solution we were presenting.

    It’s okay to not get it right the first time you present a deliverable.

    It was difficult to know what the client wanted. My best approach was to create what I believed the client wanted, run it through the team and then, I would present that to the client. Most times, I knew I would get a lot of feedback, but it gave me a better sense of how to handle the direction of that part of the project.

    Alberto Garcia • 2025