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
About the project
Modernizing a critical public resource for clarity, accessibility, and trust
Serving more than 19 million Southern Californians, the Metropolitan Water District needed a digital presence that reflected the scale and urgency of its mission. The existing website buried vital information such as conservation programs, emergency updates, and water quality data within dense navigation and outdated content. The redesign focused on improving accessibility, streamlining content, and creating a more intuitive experience for both the public and internal teams.
The project involved close collaboration with a governing board representing multiple departments, each with distinct priorities. Aligning these perspectives required clear communication, iterative feedback, and careful coordination to reach a unified direction.
Below: The legacy website’s dense navigation and fragmented design underscored the need for a modern, intuitive structure.
Defining Structure and Flow
I led the visual design and collaborated on UX architecture to reimagine how users locate and understand information. A new sitemap simplified navigation and prioritized the most accessed content, helping visitors find key data without friction. Once the structure was defined, I worked with the UX lead to refine layout and hierarchy through iterative wireframes and feedback sessions with internal stakeholders.
Establishing the Visual System
With user flows validated, I established a refreshed visual direction that modernized the brand’s digital expression while maintaining its sense of trust and heritage. I built a comprehensive design system to ensure scalability, brand cohesion, and long-term maintainability across all page types and devices. The system included modular templates, reusable components, and detailed documentation that streamlined collaboration between design and engineering. I refined typography and color for hierarchy and legibility and collaborated closely with developers to ensure every component aligned with MWD’s CMS and met WCAG accessibility standards.
To communicate behavior early, I prototyped interactive storytelling features and motion transitions that clarified the user journey for both stakeholders and developers.
Below: Prototype animation demonstrating motion design, transitions, and interactive storytelling concepts.
No items found.
Delivering a Unified Experience
The redesign delivered a unified digital platform that improved both the public experience and internal workflow. Visitors can now access information faster, and staff can update content with confidence. The site earned seven W3 Awards including Best in Show, User Experience, and Data Visualization, and received a Webby Honors distinction for Data Visualization.
No items found.