Case Study Overview

Client: USAID – Global Waters Program

Timeline: Multi-phase redesign and optimization

My Role: Web Development Specialist

Tools Used: Figma, Adobe Photoshop, Drupal 7/8, HTML5, CSS3, JavaScript, jQuery, Bootstrap, PHP, MySQL

Project Summary:

GlobalWaters.org serves as the primary knowledge-sharing platform for USAID's global water, sanitation, hygiene (WASH), and climate resilience programs. The project focused on modernizing the user experience, improving accessibility, strengthening content discovery, and optimizing front-end performance, while protecting the integrity of a large, data-heavy Drupal ecosystem.

The Challenge

The legacy Global Waters platform had grown organically over many years. While rich in content, it presented several usability and performance challenges:

1. Overcrowded layouts and inconsistent visual hierarchy
2. Difficult navigation for first-time users
3. Limited mobile optimization
4. Accessibility gaps that affected screen reader and keyboard users
5. Legacy Drupal theming that restricted visual flexibility
6. Performance bottlenecks caused by unoptimized assets

The challenge was to modernize the experience without disrupting critical government workflows, content structures, or multilingual publishing needs.

Goals & Objectives

The legacy Global Waters platform had grown organically over many years. While rich in content, it presented several usability and performance challenges:

1. Improve content discoverability and user navigation
2. Establish a clean, modern visual system aligned with USAID branding
3. Enhance accessibility to meet WCAG / Section 508 requirements
4. Optimize performance and front-end efficiency
5. Improve mobile responsiveness
6. Support frequent content updates from non-technical editors
7. Maintain Drupal scalability and security

Research Process

Methods Used:

1. UX heuristic evaluation
2. Analytics review of high-exit and low-engagement pages
3. Stakeholder interviews
4. Content audits
5. Accessibility testing with WAVE and manual keyboard testing

Key Findings:

1. Users struggled to locate updated reports and featured programs
2. Homepage content lacked clear priority hierarchy
3. Mobile users experienced usability issues with navigation
4. Some content-heavy pages caused cognitive overload

These insights directly shaped the redesign strategy.

Information Architecture

I worked closely with content strategists and developers to:

1. Reorganize homepage content blocks for clearer storytelling
2. Improve top-level navigation structure
3. Simplify content pathways for:
What We Do
Where We Work
Resources
Blogs & Stories

This created faster access to high-value research, funding resources, and climate strategy content.

Wireframes & Ideation

Low-fidelity wireframes were created to:

1. Test new homepage content hierarchy
2. Simplify featured content layouts
3. Improve readability of longer articles
4. Reduce unnecessary page depth

Multiple concepts were tested internally before arriving at a modular block-based layout that scaled across program areas.

Visual Design System

The final UI design system emphasized:

1. Strong visual hierarchy
2. High-contrast typography for accessibility
3. Clean grid structure
4. Modular content cards
5. Consistent CTA placement
6. Optimized media presentation

The system aligned with USAID's brand standards, while giving editors greater flexibility to highlight timely initiatives.

Prototypes & Interaction Design

Interactive prototypes demonstrated:

1. Homepage feature rotations
2. Expanded resource filtering
3. Improved article layouts
4. Fully responsive navigation behaviors

These prototypes ensured stakeholder alignment before development.

Front-End Development

Work performed on site building:

1. Refactored Drupal 7 PHP themes and JavaScript behaviors
2. Built responsive layouts using Bootstrap and custom CSS
3. Developed custom UI components and widgets
4. Optimized image sprites and asset delivery
5. Implemented Twig/YAML-based theming strategies for Drupal 8 migration planning
6. Tested cross-browser compatibility and performance

This ensured the platform was both design-forward and technically resilient.

Accessibility Enhancements

Accessibility was a core priority:

1. Improved color contrast across navigation and CTAs
2. Added ARIA labels for screen readers
3. Ensured full keyboard navigation
4. Improved focus states and tab order
5. Conducted WCAG validation using WAVE and manual audits

These updates significantly enhanced usability for visually impaired users.

Usability Testing

Usability testing included:

1. Staff moderators testing navigation flow
2. NGO partners reviewing content clarity
3. Accessibility users validating screen reader behavior

Feedback directly informed refinements to layout density, content hierarchy, and interactive elements.

Final Solution

The finalized platform delivered:

1. A modern, clean homepage design
2. Clear featured content rotation
3. Modular news and resource sections
4. Strong storytelling through imagery
5. Fully responsive behavior
6. Improved discoverability of climate strategy content

The homepage now functions as a high-impact information gateway for global water initiatives.

Impact & Outcomes

1. Improved content engagement and conversion rates
2. Faster page-load performance through optimized assets
3. Stronger mobile usability
4. Increased accessibility compliance
5. More efficient editorial publishing workflows
6. Higher usability scores during internal evaluations

Lessons Learned

1. Government platforms must balance innovation with stability
2. Accessibility must be embedded from the start, not added later
3. Modular design systems significantly improve long-term scalability
4. Close synchronization between UX and Drupal development is critical

My Contribution

1. Led UX evaluation and front-end optimization
2. Designed wireframes and responsive layouts
3. Built and optimized Drupal UI components
4. Led accessibility remediation efforts
5. Supported Drupal 7 to 8 architecture planning
6. Optimized performance and asset delivery
7. Collaborated with content managers and federal stakeholders

Software and Tools Used

1. Figma
2. Adobe Photoshop
3. Drupal 7 & 8
4. HTML5, CSS3, JavaScript, jQuery
5. Bootstrap
6. PHP, MySQL

Final Thoughts

The Global Waters redesign strengthened the platform's ability to communicate mission-critical water and climate initiatives across a global audience. The work blended UX strategy, accessibility engineering, and front-end development to create a system that is scalable, inclusive, and editorially sound.

This project highlights my ability to support in the modernization of complex federal platforms, while maintaining performance, compliance, and usability at enterprise scale.