Metropolitan Water District
Project Description
The Metropolitan Water District of Southern California is the largest regional water wholesaler in the country, delivering water to over 19 million people across six counties.
Project Credits
Creative Direction:
Andrew Au — Giorg Yela
Release Date
2021
No items found.
About the project
MWD’s legacy website didn’t reflect the scale or urgency of their mission. Vital public resources like conservation programs, emergency notices, and water quality data were buried in dense navigation and outdated PDFs. At the same time, internal teams faced challenges managing content due to inefficient workflows and limited CMS flexibility. The redesign aimed to modernize the site’s structure, improve accessibility, and deliver a more intuitive experience for both public and internal audiences.
A comprehensive sitemap was developed to simplify the experience and make key information easier to find. The new structure prioritized the most commonly accessed content, reducing redundancy and guiding users along clearer, more intuitive paths.
Once the architecture was in place, wireframes were created to explore layout, hierarchy, and interaction patterns across key page types. This allowed the team to validate assumptions, gather feedback, and make informed refinements before moving into high fidelity design.
With the new structure in place, I worked with MWD’s internal designer to define a refreshed visual tone, modernizing the brand while honoring its legacy. After several rounds of iteration and a detailed board review, we landed on an approved direction.
I then built a scalable template system and a comprehensive design library to ensure consistency across pages and devices. I collaborated closely with developers to make sure each component worked within MWD’s CMS, and used typography and color to establish clear hierarchy while meeting WCAG accessibility standards. To support that collaboration and bring the system to life, I prototyped interactive features such as animated storytelling, scroll-based transitions, and guided program tours. These prototypes helped illustrate functionality not only for developers but also for stakeholders, making the experience tangible before build. A detailed style guide gave the internal team the tools to maintain and expand the system with confidence.
The result was a digital platform that significantly improved user experience and internal workflow. Visitors can now access critical information quickly, and staff can update content with ease. After launch, we continued to support the client by adding new features and making adjustments based on both client and user feedback. Post-launch, MWD saw improved engagement, fewer support inquiries, and widespread industry recognition. The project received seven W3 Awards, including User Experience, Structure and Navigation, Services and Utilities Website, Use of Data Visualization, Visual Appeal, Editorial Experience for Websites, and Best in Show. It also earned a Webby Award honors distinction for Data Visualization.
No items found.