CLEAN NIGERIA: USE THE TOILET CAMPAIGN
Revamping CNC Website to Drive Awareness and Action for Nigeria’s Open Defecation Eradication Campaign
.png)
%20(1).png)
MY ROLE
-
Worked closely with front-end developers to effectively implement the end-to-end design process.
-
Creation of high-fidelity prototypes and design handover doc
-
Conducted user research and usability testing, and developed design systems.
Platform: Website
Duration: 2023
Industry Sector: NGO (Water & Sanitation)
Collaboration Tools: Figma, Asana, Google Doc.
PROJECT OVERVIEW
BACKGROUND
The "Clean Nigeria: Use the Toilet" campaign is a non-profit initiative aiming to eradicate open defecation in Nigeria by 2025. Currently, 1 in 4 Nigerians (24.4%) still defecate in the open, leading to the spread of preventable diseases such as diarrhea, cholera, typhoid, and dysentery. Particularly concerning is the North Central region, where 1 in 2 people practice open defecation. The campaign focuses on fostering a culture of safe and hygienic defecation through the provision of clean, accessible sanitation facilities, especially in rural areas.
THE PROBLEM
The CNC website was experiencing several issues that hindered user engagement and functionality. The visual design appeared outdated, which made it less appealing and engaging for visitors. Also, the website layout was cluttered, causing users to feel overwhelmed and struggle with navigating the site effectively. There were also inconsistencies in how information was displayed, leading to confusion and a disjointed user experience.
THE SOLUTION
After thoroughly analyzing the previous website and incorporating user feedback, several impactful changes were implemented. The visual interface was enhanced, making it more aesthetically pleasing and engaging for users. The website layout was restructured, allowing for more intuitive navigation and improving overall user interaction. Lastly, a consistent presentation of information was established across the site, ensuring a smoother and more cohesive experience for users.
RESEARCH
CURRENT STATE EVALUATION
The redesign process began with a thorough evaluation of the existing CNC website's structure, layout, and navigation. This assessment helped pinpoint areas requiring immediate and long-term improvements while clarifying the purpose of CNC and identifying its core needs. The key issues uncovered through heuristic evaluation were:
Outdated Design:
The website's visual design appeared outdated, with a crowded homepage. Some images failed to load, and the map background’s poor color contrast reduced its usability.
Lack of Focal Point
The cluttered layout lacked a clear hierarchy, making it difficult for users to focus on key elements or locate important information.
Unclear Downloads:
Users struggled to understand what they were downloading—whether PDFs, videos, or jingles—leading to confusion when trying to access specific content.
Hard to Navigate:
The search function and filters were unintuitive, making it hard for users to find important information, such as zones that still practiced open defecation or needed facilities.
Inconsistent Design Elements:
Design inconsistencies across the footer pages, including misalignment, color discrepancies, font variations, and uneven spacing, negatively impacted the user experience.
USER INTERVIEWS & FINDINGS
In my effort to comprehensively understand the CNC website's user experience, I conducted interviews with four users. The insights gathered from these interactions offer valuable perspectives on user expectations, pain points, and preferences.
​​
-
Information Overwhelm: 70% of users mentioned that they had trouble finding key information due to visual overload, highlighting the need for a clearer content hierarchy.
​
-
Download Categorization: 60% of participants felt confused about the types of resources available for download, emphasizing the need for clearer categorization.
​
-
Navigation Experience: 40% of users expressed frustration with the website's navigation, pointing to the need for a more intuitive structure. ​​
COMPETITIVE ANALYSIS
To identify best practices, I conducted a competitive analysis of websites from similar non-profit organizations, including Washims, Charity Water, WaterAid, and Swachh Bharat Mission. This analysis aimed to identify best practices that could be adapted to enhance the CNC website, particularly in terms of user-friendliness and visual engagement.
SYNTHESIS AND CONSIDERATIONS
-
Streamline navigation to offer users a more seamless and efficient experience.
​
-
Incorporate visually appealing design elements that align with CNC's mission and values.
​
-
Introduce interactive elements to actively engage and enhance users' experiences.
​
-
Utilize multimedia to effectively communicate CNC’s mission and impact across multiple channels.
DEFINING THE PROBLEM
PROBLEM STATEMENT & GOALS
Based on the issues identified with the existing website, the primary objective is to more seamless and intuitive experience. Using “How Might We” statements as a framework, the design process was guided by the following prompt:
​
​How might we enhance the overall user experience of the CNC website by improving its usability, visual appeal, and functionality?
PRODUCT GOALS
The primary product goals are to enhance visual appeal by developing a design that fosters user trust and aligns with modern design norms, simplify information presentation to reduce cognitive strain and help users easily find relevant content, optimize layout hierarchy to effectively guide users' attention for a seamless browsing experience, and improve user-friendliness by refining navigation to ensure intuitive and efficient user journeys that prioritize ease of use.
IDEATION
IMAGINING A BETTER SOLUTION
Drawing on the insights from my research, I brainstormed, compiled, and organized the essential content and functionalities that needed enhancement. My goal was to establish a clear information hierarchy for the website. I prioritized incorporating the most critical information in the redesigned version, ensuring a clean and intuitive layout that allows users to navigate seamlessly.
.png)
SKETCHING POTENTIAL SOLUTIONS
I began the redesign process by sketching potential solutions to visualize a structured content arrangement that addresses user concerns and enhances intuitiveness. Following this, I developed low-fidelity wireframes for preliminary testing with stakeholders and users, allowing for efficient feedback collection and refinement before creating the high-fidelity prototype.
HIGH-FIDELITY PROTOTYPES
Building on the initial test feedback, I advanced to developing high-fidelity wireframes and a prototype. This phase focused on refining the design by enhancing visual elements and user interactions. I incorporated the insights gained from early testing to improve the website's user experience and overall usability significantly.
.png)
USABILITY TESTING
CONCEPT VALIDATION
To evaluate the effectiveness of the website redesign, I conducted usability testing with four users, focusing on functionality, layout, visual design, and interactivity. The testing aimed to assess how well users could navigate the new design, identify areas for improvement, and measure its overall intuitiveness.
The feedback received from users validated the design concept and provided critical insights for future iterations:
​
-
Enhanced Visual Appeal: Users found the layout clearer, making it easier to focus on key elements.
​
-
Simplified Information Layout: Participants found the streamlined content easier to navigate, reducing cognitive effort.
​
-
Efficient Navigation: Users found the redesigned site much easier to navigate, enhancing overall usability.
DESIGN SYSTEM
DEVELOPER HAND-OFF
To ensure design consistency and a smooth transition to developers, I created reusable design components that allowed for flexibility while maintaining uniform UI patterns. During the collaborative phase, I worked closely with engineers to align design and implementation, ensuring technical feasibility and promoting efficiency throughout the project.
CONCLUSION
TAKEAWAY
-
Improved User Satisfaction: The streamlined layout and clear visual hierarchy enhanced navigation, significantly reducing user frustration and boosting overall satisfaction.
​
-
Enhanced User Engagement: Positive feedback reflects heightened user engagement, as participants found the new design more appealing and user-friendly.
​
-
Early Engineering Involvement: Involving engineers early in the process minimized rework and leveraged their technical insights to shape an effective design strategy.
​
-
Design for Efficiency: Implementing a modular design system streamlined the development process and improved visual consistency across the platform.
​
-
Collaborative Team Insights: Working with a diverse team during the exploration phase fostered valuable insights and innovative ideas, enriching the overall design approach.​​​
NEXT STEPS
If I were to continue, I would explore the following:
​​
-
Explore New Features to further improve user experience and strengthen the platform's value proposition.
​
-
Continue refining and designing better experiences by adhering to design principles and the product roadmap.
​
-
Conduct usability testing to validate the improvements and ensure user issues are fully addressed.
.png)
