Water Access Initiative
Drop of Water. Website Redesign: Discovery and Design Direction
Pro Bono Consulting · Taproot
2025
NGO / NON profit
Figma
Pro Bono · Taproot
Website Design
Stakeholder Management
Solo Designer
My role
Sole designer across the full engagement from brief intake through final design delivery. Every decision was made, justified and communicated directly to the client.
Context
The Problem
Drop of Water is an Ethiopian water access NGO working to eliminate the water gap through community-centered infrastructure, local system strengthening, and youth engagement programs.
The organization
Founded by seven female students at Mekelle University, Drop of Water builds sustainable water and sanitation systems across Ethiopia with a focus on community ownership, youth leadership, and long-term accountability rather than one-off infrastructure projects.
The Engagement
Sourced through Taproot a pro bono professional services platform connecting skilled volunteers with nonprofits. The engagement was timeboxed upfront and scoped to deliver a redesigned homepage direction aligned with the organization's mission and visual identity.
the brief
Hero
Full-width image or short video of a water site or community. Tagline: "By means of safe water, we give life." Vision statement prominent above the fold. Donation CTA integrated into the hero.
Core Sections
Four-pillar Approach section: Design & Build, Maintain & Monitor, Local System Strengthening, Youth Engagement
Impact metrics with annual report integration
Stories section with human-centered narrative
Partner & donation CTAs
Footer with an image of the community
Referneces
The client provided two comparable NGO websites as visual and structural references pointing toward a clean, image-led, mission-forward aesthetic. Both used strong photography, minimal copy hierarchies, and clear donor conversion paths.
research and visual direction
Before producing any screens, I developed a moodboard to anchor the visual language translating the organization's values into a palette and aesthetic direction both parties could align on before committing to design.
Moodboard-Visual Lnaguage
The moodboard drew from three elemental anchors , Earth, Sun, Water, to build a palette that felt grounded and human rather than corporate or clinical. Cultural textile patterns from Ethiopian visual tradition were incorporated as border and decorative motifs, giving the site a sense of place.
Comparable Site Analysis
Strong photography: Mission-driven NGOs lead with human faces and community context, not icons or abstract imagery
Minimal copy hierarchy:Tagline → Impact stat → CTA. The sites resist the urge to explain everything above the fold
Donor conversion path: Donation buttons visible within the first scroll, not buried in navigation
Story-led credibility: Individual beneficiary stories outperform generic impact statements in building trust with donors
Final Direction,
Approved homepage design
A cohesive homepage with a clear content hierarchy: hero → impact stats → four-pillar approach → why water → stories → partner CTA. The client confirmed she was happy with the direction and ready to extend to remaining pages before internal founder misalignment paused the engagement.
Section 01
Hero: tagline + impact CTA
Section 02
Impact stats + annual report.
Section 03
Four-pillar approach
Section 04
Why water · Stories · Partner CTA
Section 05
Footer: community image+quick links
design system
Beyond the homepage, I built a complete design system with color scales, typography hierarchy, accessibility standards, component library, and reusable building blocks. This ensured the design could scale consistently across all remaining pages without requiring new decisions at every step.
Cards and building blocks
Stories · Donation · Hero · Footer · Why Water
Colors, Typography and Accessibility
WCAG AA · Merriweather + Roboto · Full color scale
Components
Nav · Icons · Buttons · Donation modal · Background Cards
Timeline - 4 weeks
Phase 01
Brief & Scoping
Initial call,
written brief request
reference review
scope, timeline, and deliverables confirmation before starting the project
Phase 02
Research & Moodboard
Analyzed comparable NGO sites.
Developed a moodboard.
Confirmed alignment before producing final screens.
Phase 03
Design Directions
Produced two homepage directions. Each committed to a different emotional register to best align with client's preferences.
Phase 04
Iteration & Approval
Refined based on client feedback color system, donation CTA placement, footer options. Client approved the second direction and confirmed readiness to extend to remaining pages.
Phase 05
Organizational Misalignment -> Closure
Additional founders introduced conflicting preferences post-approval. This was identified as an organizational alignment issue (not a design problem).I recommended a formal pause, giving the organization the space to align internally before continuing the work
Insigts
Design Skills
Brief interpretation: Translated a written document into structured design decisions without a creative director or senior designer to validate against
Visual direction: Developed a moodboard and palette grounded in cultural context, not generic NGO templates
Iteration under real constraints: Responded to live stakeholder feedback across color, layout, and content decisions
Professional Skills
Scope management: Defined the engagement terms upfront and held to them without being rigid or damaging the relationship
Stakeholder diagnosis: Correctly identified that the blocker was organizational misalignment not a design problem requiring another iteration
Professional communication: Closed the engagement clearly, honestly, and constructively in writing, with full context
Real-world ambiguity: The engagement began with a single point of contact guiding the brief and approving the design direction. As the project progressed, additional founders became involved introducing a need for broader internal alignment before the work could continue.
Key Lesson
Good design cannot move faster than the organization behind it
Relationship
Preserved: invitation to return when internal alignment is reached