CNC ADMIN PORTAL
A data-driven admin portal for tracking and monitoring progress toward reducing open defecation in Nigeria.
.png)
MY ROLE
-
Collaborated with front-end developers to seamlessly execute the end-to-end design process.
-
Created visually appealing and interactive prototypes.
-
Conducted user research and usability testing, and developed design systems.
Platform: Web-app
Duration: 8 Weeks
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 at completely eradicating open defecation in Nigeria by 2025. The initiative aims to instill a new culture of safe defecation by providing clean and accessible sanitary facilities, particularly in rural communities, to mitigate the spread of diseases such as diarrhea, cholera, typhoid, and dysentery throughout the nation.
THE PROBLEM
The "Clean Nigeria: Use the Toilet" campaign aims to eliminate open defecation by 2025. To effectively monitor and ensure the sustainability of the Open Defecation Free (ODF) status in Nigeria, a web-based admin portal is required. This platform aims to transform raw data related to ODF in Nigeria into a visually engaging format, encourage admin engagement, and provide comprehensive accountability measures.​
THE SOLUTION
To address the challenges in monitoring and ensuring the sustainability of open defecation-free (ODF) status in Nigeria, I designed a web-based admin portal for CNC. The app contains features such as interactive data visualization, which simplifies the presentation of ODF metrics, as well as customization for diverse needs, ensuring an intuitive and adaptable experience for administrators tracking ODF metrics.​
RESEARCH
PROJECT KICK-OFF
We adopted a goal-directed design approach for the CNC Admin Portal design process, ensuring a seamless progression within the defined timeframe. Our design flow was built on three fundamental principles: communication, collaboration, and iteration. These concepts serve as the foundation for our design approach for the CNC Admin Portal functionality.
UNDERSTANDING THE MARKET
To kickstart the design of the admin portal, I started by conducting both secondary and primary research.
The objective was to:
​
-
Understand how the campaign initiative industry toward eliminating open defecation operates.
​
-
Identify and comprehend the specific features within the open defecation elimination industry.
​
-
Gain insights into the dynamics of users involved in the campaign initiative.
​
-
Formulate a strategy to guide design efforts for the development of the admin portal.
COMPETITIVE ANALYSIS
To understand more about the market, I conducted a competitive analysis by assessing similar webapps of campaign initiatives with the same goals. My objectives were to gain an overview of the industry and trends, draw inspiration, and identify best practices. I focused on two successful non-profit organizations, which are Washims and The Swachh Bharat Mission​ While most of the features offered by competitors were quite similar, the image below highlighted the differences in strengths and weaknesses of each application.
.png)
SYNTHESIS AND CONSIDERATIONS
-
Implement customizable elements to adapt to varying regional and community-specific needs.
​
-
Incorporate clear and concise design elements, prioritizing ease of use for administrators.
​
-
Ensure that data is presented in a manner that facilitates quick understanding and decision-making.
​
-
Implement transparent reporting functionalities to promote accountability.
USER INTERVIEWS AND PROFILING:
To gain a deeper understanding of the target users for the admin portal, I conducted user interviews with both admin personnel and local government (LG) community field agents.
​
My goal was to:
​
-
Investigate how admin personnel currently handle data, reports, and tracking in their workflow.
​
-
Explore the current process of inputting reports and providing updates on ODF status from the field.
​
-
Understand their specific needs and expectations from an admin portal to facilitate efficient reporting.​​
Admin Personnel:
​
-
Role: Responsible for overseeing the overall administration and management of the ODF status tracking system.
​
-
Tasks: Approving/rejecting reports, adding/removing portal users, monitoring ODF progress.
​
-
Needs: Clear interface, efficient report review process, user management capabilities.
​
LG Community Field Agents:
​
-
Role: Involved in ground-level activities, collecting data, and contributing to ODF progress reports.
​
-
Tasks: Submitting reports, tracking community progress, and accessing relevant resources.
​
-
Needs: User-friendly data entry, access to training resources, straightforward progress tracking.​​​
DEFINING THE PROBLEM
PROBLEM STATEMENT & GOALS
Based on the insight gathered from the research, my primary focus is on creating a more seamless and intuitive experience for admin users. The "How Might We" statements serve as guiding prompts for the design process:
​
-
How might we streamline the process for admin personnel to input reports and monitor the progress of ODF status, facilitating efficient data management?
-
How might we enhance the efficiency of admin users in monitoring and ensuring the sustainability of the Open Defecation Free (ODF) status across various regions in Nigeria?
-
How might we customize the admin portal to accommodate diverse regional and community-specific needs, ensuring flexibility and adaptability in the ODF initiatives?
PRODUCT GOALS
-
Optimized User Experience: Create an intuitive user interface to facilitate seamless navigation for admins users.
​
-
Enhanced Data Visualization: Implement intuitive data visualization tools to present ODF metrics clearly and intuitively.
​
-
Customization Feature: That will enable admins to tailor the platform for diverse regional and community-specific sanitation needs.
IDEATION
CREATING STRUCTURE
I created a user flow based on the key features outlined in the product roadmap to provide more insight into how to build the core experience for the CNC's admin portal. This flow focuses on the user's entry and endpoints, allowing us to focus on creating a simplified and effective user experience.
%20(1).png)
VISUALIZING A SEAMLESS INTEGRATION
I created quick sketches on figjam to visualize how content could be arranged logically and effectively. This exploration aimed to address the specific needs of administrators and create a more intuitive layout for navigating between screens.
LOW-FIDELITY WIREFRAMES
After reviewing the initial sketches, I moved on to creating low-fidelity wireframes for the CNC Admin Portal. These served as a preliminary testing ground for gathering feedback from stakeholders and users, which helped streamline the design process before advancing to the high-fidelity prototype.
​
Several iterations were undertaken, focusing on key aspects:
​
-
Ensuring ease of access for admins to view Open Defecation Free (ODF) details when hovering over a particular state.
​
-
Providing the capability for admins to filter and retrieve specific details on the ODF process of a particular state.
​
-
Facilitating admin understanding of the progress indicator, enabling them to track their efforts effectively.
​
-
Incorporating features that allow admin personnel to add or remove users based on their roles and responsibilities.
HIGH-FIDELITY PROTOTYPES
After an extensive process of reviews and iterations, the finalized admin portal for the CNC project is designed to be visually appealing and user-friendly. It empowers administrators to monitor and track progress toward eliminating open defecation practices in Nigeria.
Interactive Map Data Visualization
The interactive map is designed to display further data on the state status when users hover over a specific state to improve user-friendliness.
Progress Indicator
For visual monitoring and tracking of ODF progress in each local government (LG), a checkmark progress bar was utilized to facilitate decision-making for administrators toward providing clean sanitation facilities.
Decision Controls
This functionality allows the admin to either approve or reject reports and also provide valuable feedback. The control feature ensures that admin users have the tools to actively manage and guide the progress of sanitation initiatives based on the information presented in the reports.
File Format Differentiation
In order to enable campaign personnel to effectively assess and utilize uploaded content according to their specific file type preferences or requirements, file formats were employed to differentiate the files. This approach enhances efficiency and ensures compatibility with personnel preferences.
Admin-Focused Navigation
The navigation layout is designed to aid admin personnel in effortlessly carrying out tasks such as report review and approval, and user management. This design ensures that the admin's responsibilities are easily accessible, fostering efficiency and effectiveness in managing the ODF campaign.
.png)
USABILITY TESTING
CONCEPT VALIDATION
To assess the effectiveness of the admin portal, I conducted usability testing with the stakeholders and four admin users, focusing on gathering feedback on functionality, structural layout, visual design, and interactivity.
The objectives were to:
​
-
User Interface Efficiency:​ Assess the efficiency of the user interface in terms of simplicity and ease of navigation.
​
-
Data Visualization Optimization: Evaluate the clarity and effectiveness of data visualization in presenting ODF metrics.
​
-
Assess Customization Intuitiveness: Assess the ease and effectiveness of customization features for administrators.
​
​
USER FEEDBACK
These feedback points serve to highlight both the positive aspects of the admin portal and areas where improvements or refinements could enhance the user experience for administrators.
​
-
User Interface Validation: All admin users expressed satisfaction with the user interface, stating it was simple to navigate and access essential features.
​
-
Clarity in Data Visualization: Admin users stated that the map hovering information effectively communicates ODF metrics, but some users suggested clearer labels for better understanding.
​
-
Customization Features: Participants found the customization options quite versatile, but a few administrators felt they needed more guidance on how to personalize their view.​​
DESIGN SYSTEM
DEVELOPER HAND-OFF
In order to maintain design consistency and facilitate a smooth project handoff to developers, I created reusable design components. Each component was designed with flexibility in mind, enabling rearrangement and combination while preserving design uniformity and recognizable UI patterns for the user experience.
​
In the collaborative phase, I worked closely with engineers to ensure that the design and its implementation were not only aligned but also technically feasible. This collaborative effort aimed to bridge the gap between design and development, promoting efficiency and consistency throughout the project lifecycle.
CONCLUSION
IMPACT & KEY TAKEAWAY
-
Improved Monitoring and Tracking: The CNC Admin Portal significantly enhances the ability of administrators to monitor and track progress toward eliminating open defecation practices in Nigeria​
​
-
Early Engineering Involvement: Involving engineering early in the process minimizes rework, leveraging technical insights to shape the design strategy effectively.
​
-
Design for Efficiency: Utilizing the design system streamlined the implementation and improved visual consistency across the platform.
​
-
​​Collaborating with a diverse team: during the exploration phase brought valuable insights and idea generation, resulting in a more in-depth and innovative approach.​​
NEXT STEPS
If I were to continue, I would explore the following:
​
-
Explore additional features based on user feedback and emerging requirements to enhance the admin portal's functionality.
​
-
Continue collaborative discussions with stakeholders to gather insights and align the admin portal with broader organizational goals.
​
-
Conduct further usability testing to gather additional user feedback and address any potential pain points.
​
-
Continue designing better experiences by adhering to established design principles and aligning with the product roadmap.​
.png)
%20(1).png)
