Water Access Initiative
Responsive website redesign for a nonprofit clean-water initiative
Drop of Water NGO · Pro bono consulting via Taproot
Overview
Role:
UX audit, visual direction, responsive UI design, stakeholder communication
Organization:
Drop of Water NGO
Timeline:
4 weeks
Status:
Homepage direction approved; engagement paused before additional pages
Challenge
Context
The four-week Taproot engagement focused on auditing the existing experience, defining a visual direction, and designing a responsive homepage with reusable components.
UX Audit
Design opportunity
Design Response
Mission and impact were difficult to identify quickly
Introduced a mission-led hero with impact-oriented messaging
Primary actions lacked clear visual priority
Made Donate the primary CTA and Partner the secondary CTA
Visual language was inconsistent
Defined a unified system for typography, color, imagery, and components
Content was fragmented across the experience
Reorganized the homepage around mission, impact, approach, stories, and action
The Brief
The client requested a mission-led homepage featuring its four-pillar approach, impact metrics, community stories, and clearer paths to donate or partner. The design also needed reusable components that could scale to future pages.
Research and Visual Direction
Moodboard
Calm and credible -r estrained blue and earth tones
Human and immediate - documentary community photography
Culturally grounded - I created a custom geometric pattern in Figma, drawing inspiration from Ethiopian decorative motifs to bring cultural specificity into the visual system without relying on a generic nonprofit aesthetic.
Turning the Audit into a Clearer Homepage Narrative
I reorganized the homepage so visitors could understand the mission first, see evidence of impact, learn how the organization works, and then choose how to help.
Design System
Beyond the homepage, a complete design system with color scales, typography hierarchy, accessibility standards, component library, and reusable building blocks was built to support future pages.
Cards and Icons
Colors, Typography
Components
Timeline
Audit and alignment
Reviewed the existing site, references, goals, and project scope.
Visual direction
Developed and aligned on a moodboard and two homepage directions.
Design and iteration
Refined hierarchy, CTAs, color, and reusable components through feedback.
Approval and organizational pause
The initial direction was approved, but the engagement paused when broader founder input revealed unresolved internal preferences.
Outcome and Reflection
The homepage direction and visual system were approved by the initial stakeholder, along with the proposed hierarchy, calls to action, and reusable components. The engagement paused when broader founder input revealed a need for internal alignment before additional pages could proceed.
What I learned
This project reinforced that design quality depends not only on visual execution, but also on stakeholder alignment. A strong design direction can create momentum, but the project also needs shared decision-making and organizational clarity to move forward successfully.
What I would do next
Before expanding the remaining pages, I would facilitate a content and decision-making workshop with all founders. This would establish shared priorities, clarify approval ownership, and give the design team a stable basis for continuing.
Status
Approved homepage direction; client invited to resume after internal alignment