A web platform for mapping water, sanitation and hygiene (WASH) facilites
- Households Served
- 90,239
- Mapped Facilities
- 12,423
- Organizations Signed-Up
- 7
- Platform Perfomance
- 99%
Overview
AccessWASH is comprised of a team of environmental and software engineers ambitious about making an impact to the water, sanitation and hygiene (WASH) industry using software, hardware and data-driven solutions.
Like a matchmaker, AccessWASH connects communities seeking sustainable WASH facilities with organizations and resources ready to help make a lasting difference.
- My Role:
Front-End Engineer
- Timeline:
4 months (Feb 2023 - Jul 2023)
- Team:
3 Software Engineers & 3 Environmental Engineers
Problem
- Location Tracking:
- Hard to keep track of where all our water and sanitation facilities are built across different communities.
- Facility Updates:
- No easy way to know if water pumps and sanitation are working properly or need repairs.
- Data Sharing:
- Different groups working on water and sanitation projects can't easily share information with each other.
- Resource Planning:
- Without good information about what's working and what's not, it's hard to plan where to build new facilities or fix old ones.
Prototyping
Our design team created the high fidelity mockups of our product using Figma.
- Map Visualization:
- Used a simple graysclae map with bright blue markers to make it easy to see where WASH projects are located
- Visual Hierarchy:
- Organized content with clear headings, spacing, and buttons to help users naturally find what they're looking for
- Color Psychology:
- Selected blue and white as primary colors for immediate visual connection to water initiatives while maintaining strong contrast ratios
- Typography Choice:
- Used sans serif fonts across all interfaces fo easy readability particularly for data-heavy sections across devices
- Segmented User Journeys:
- Created separate, clear paths for different users (WASH Partners, Technology Providers, Knowledge Partners) to help them quickly find relevant information
- Custom Form Development:
- Built our own user-friendly forms since existing open-source alternatives didn't work well with our platform
Features
- Map Dashboard:
- The interactive map serves as the platform's core feature, using a grayscale basemap with bright blue markers that displays WASH facilities, allowing users to filter by facility type and access detailed information through pop-up cards.
- Responsive Design:
- The platform implements a mobile-first approach with a clean, water-themed blue and white color scheme, ensuring seamless functionality across all devices while maintaining strong visual hierarchy and clear navigation.
- Contact System:
- The contact form feature provides real-time error feedback using Chakra UI, and includes success notifications to ensure reliable communication between users and administrators.
- Content Management:
- The Ghost CMS integration powers a comprehensive knowledge hub that facilitates information sharing to WASH practitioners, enabling the documentation and distribution of best practices in WASH facility management.
- Engagement Framework:
- A collection of forms enables organizations to register as partners, submit new projects, and connect with technical experts, providing a collaborative environment for improving WASH infrastructure.
Tasks & Tech Stack
As part of my responsibilities, I developed the front-end of the web application from our UI/UX designs, integrated backend communication using Axios and DjangoREST, and managed the frontend deployment and DevOps processes.
Axios
Django REST
Ghost CMS
Git
Next.js
Node.js
React
Tailwind CSS
TypeScript
Vercel as PaaS
We chose these tools since they provided fast, open-source solutions for the best possible performance.
Forms Life Cycle
- Form Creation:
- Create new forms through a simple interface with instant success notifications upon submission
- Form List View:
- Browse all submitted forms in a dashboard with quick filters for status, dates, and WASH project types
- Form Deactivation:
- Deactivated forms move to a separate inactive tab for better organization, with the ability to reactivate them when needed
- Form Deletion:
- Permanently remove forms with a confirmation to prevent accidental deletion, followed by a success notification
Custom-Built Forms
Data Validation & Error Handling
- Validation Layers.
- Implemented a two-tier system where RJSF/AJV8 handles frontend validation in real-time, while backend checks add an extra security layer before database storage, ensuring data integrity without sacrificing user experience.
- Facility Rules.
- Developed WASH facility validation that checks geographic coordinates, condition ratings, and operational status, using predefined rules that maintain data quality
- Error Feedback.
- Created an error handling system using Chakra UI that displays inline validation errors, highlights problem fields, and provides fix instructions—all grouped logically to help users efficiently correct their submissions.
Performance
I implemented Vercel Web Analytics for monitoring the performance of the website. It provides insights into the number of web visitors and the speed of accessing individual pages of the app.
Impact
The platform successfully serves 7 partner organizations and manages over 12,000 WASH facilities while maintaining strong performance and user satisfaction.
99%
Platform Performance
Achieved and maintained a 99% performance score on Vercel Analytics, ensuring fast and reliable access to critical facility data while handling thousands of data points seamlessly.
12,423 facilities mapped
Facility Coverage
Mapped and actively tracking 12,423 WASH projects, including water supply points, sanitation facilities, and hygiene stations, providing comprehensive visibility into infrastructure distribution and status.
66 monthly visitors
Transactions this year
Generated consistent monthly engagement with 66 active visitors, demonstrating the platform's value in day-to-day operations for WASH facility management and monitoring.
7 utilities
Sign Ups
Successfully onboarded 7 organizations actively managing WASH facilities on the platform.
Reflection
Looking back on my work developing the platform's frontend, here are valuable lessons I gained for improving our WASH management system:
- Staff Account Management:
- Should have built multi-user organization accounts initially, allowing different staff members to have separate logins and access levels from the start.
- Offline Functionality:
- Need to implement local form data storage to protect against data loss when field workers are documenting projects in areas with unreliable internet.
- Form Input Flexibility:
- Should expand form capabilities to handle multiple images per water point and more diverse input types to better serve real-world documentation needs.
- Map Data Integration:
- Add functionality to import existing local map data into the platform, preventing duplicate work and leveraging organizations' existing geospatial information.