CNC INITIATIVE WEBSITE REDESIGN
A campaign initiative focused on eradicating open defecation in Nigeria by providing clean sanitary facilities.
.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: 4 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 CNC website faced several challenges that impeded user interactions. To improve the overall user experience, the following challenges were identified:
​
-
The existing visual design lacked appeal and appeared outdated.
​
-
The layout of the website was cluttered, leading to user overwhelm and difficulties in navigating through the content effectively.
​
-
Inconsistencies in how information was displayed across the website.
THE SOLUTION
After analyzing the previous website and incorporating valuable user feedback, the redesign process resulted in the implementation of the following impactful changes:
​
-
Enhanced the visual interface to make it more aesthetically pleasing and engaging for users.
​
-
Restructured the website layout to facilitate intuitive exploration, making it easier for users to navigate and engage with the platform.
​
-
Established a uniform and consistent presentation of information across the entire website.
RESEARCH
CURRENT STATE EVALUATION
To kick off the redesign process, I started by assessing the current state of the existing website and evaluating the website structure, layout, and navigation. This approach enabled me to identify key focus areas that could benefit from both immediate and long-term enhancements. The goal was to understand CNC's purpose and address its underlying problems or needs.
​
Below are some of the issues I identified through heuristic evaluation:
Outdated Design
The website's design appeared unattractive and outdated, especially the crowded homepage. Some images failed to load, and the map background, with its poorly contrasting colors, undermined its reliability.
Lack of Focal Point
Because of the crowded layout, there was no clear focus that captured the user's attention or guided them to important parts of the site. This lack of hierarchy made it hard for users to figure out what was important on the page.
Unclear Downloads:
Users faced uncertainty regarding the nature of the items they were downloading—whether they were PDFs, videos, or jingles. This lack of clarity sometimes leads to confusion among users seeking specific content.
Hard to Navigate:
The search option with filter is not intuitive, which makes it hard for users to find important information on zones or communities still practicing open defecation or zones that urgently need the provision of accessible facilities.
Inconsistent Design Elements:
The design elements, like how things line up, the colors used, the fonts, and the spaces between things, were inconsistent throughout the footer pages. This inconsistency hurts the overall 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 expressed challenges in finding a focal point or key information due to visual overwhelm, indicating a need for a clearer hierarchy and organization.
​
-
Download Categorization: 60% of participants expressed confusion regarding downloading resources on the website, emphasizing the need for clearer and more accessible download categorization.
​
-
Navigation Experience: 40% of interviewees expressed frustrations regarding navigation difficulties, emphasizing the importance of a more user-friendly and intuitive website structure. ​​
COMPETITIVE ANALYSIS
In order to enhance the CNC website, I conducted a competitive analysis by assessing similar non-profit organizations' websites, including Washims, Charity Water, WaterAid, and Swachh Bharat Mission. The primary goal was to gain insights and identify best practices that could be leveraged to enhance the CNC website, with a specific focus on improving user-friendliness and visual engagement.​​​
SYNTHESIS AND CONSIDERATIONS
-
Streamline navigation to ensure a seamless and efficient user experience.
​
-
Incorporate design elements that enhance visual appeal and align with CNC's mission.
​
-
Introduce interactive elements to actively engage and enhance users' experiences.
​
-
Consider multimedia integration to convey CNC's multifaceted impact effectively.
DEFINING THE PROBLEM
PROBLEM STATEMENT & GOALS
Based on the observed issues related to the existing website, my primary focus is on creating a more seamless and intuitive experience for users. The "How Might We" statements serve as guiding prompts for the design process:
​
​How might we enhance the overall user experience of the CNC website by focusing on usability, visual appeal, and functionality in the redesign process?
PRODUCT GOALS
-
Enhance Visual Appeal: By creating a visually appealing design that builds user trust and corresponds with evolving design norms.
​
-
Simplify Information Presentation of content: To reduce cognitive strain, enabling users to quickly locate relevant information.
​
-
Optimize a clear Layout hierarchy: By organizing the layout to guide users' attention, providing a seamless browsing experience.
​
-
Improve User-Friendliness: Enhance website navigation for intuitive and efficient user journeys, prioritizing ease of use.
IDEATION
USER FLOW
Based on the research, I brainstormed, compiled, and organized the necessary content and functionality that require changes to ensure a clear information hierarchy on the website. I decided to include the most vital information in the new version to make it clean and easy for users to navigate seamlessly.
.png)
SKETCHING POTENTIAL SOLUTIONS
I started the redesign by sketching to visualize the optimal arrangement of content in a structured and logical manner. Then I explored other sample sketches to assess which one could effectively address the user's concerns and provide a more intuitive layout.
LOW-FIDELITY WIREFRAMES
After reviewing the initial sketches, I progressed to low-fidelity wireframes for a preliminary test with stakeholders and users. This method allowed me to efficiently collect feedback and streamline the process before advancing to the high-fidelity prototype.
​
In the initial testing phase, I opted for a couple of iterations, focusing on:
​
-
Making some information more prominent, e.g., the reality of open defecation
​
-
Adjusting image placement to guide the user's attention effectively.
​
-
Establishing a clear visual hierarchy to highlight essential content.
​
-
Improving user experience by implementing an interactive data visualization on the map.
.png)
HIGH-FIDELITY PROTOTYPES
Based on the feedback gathered during the initial usability test, I proceeded to develop high-fidelity wireframes and a prototype. This step involved refining the design to enhance visual elements and user interactions, incorporating the insights obtained from the initial testing to enhance the user experience and overall usability of the website.
.png)
USABILITY TESTING
CONCEPT VALIDATION
To assess the effectiveness of the website redesign, I conducted usability testing involving four users, focusing on gathering feedback on functionality, structural layout, visual design, and interactivity.
The objectives were to:
​
-
Evaluate Navigation Ease:​ or difficulty users experience while navigating across different sections on the redesigned website.
​
-
Highlight Improvement Opportunities: Uncover any areas of friction or potential opportunities for enhancing usability.
​
-
Assess Intuitiveness: Understand whether users perceive the new website as intuitive, ensuring a user-friendly experience.​​
USER FEEDBACK
The feedback obtained from each user validated the design concept and provided valuable insights for future iterations.
​
-
Enhanced Visual Appeal: Participants positively commented on the improved visual hierarchy and organized layout, making it easier for them to focus on essential elements during their browsing experience.
​
-
Simplified Information Layout: Users expressed satisfaction with the streamlined content presentation, stating that it made finding information easier and reduced cognitive load.
​
-
Efficient Navigation Experience: Users specifically highlighted the efficiency in navigating different sections, emphasizing the positive impact of the redesign on overall user-friendliness. ​​
DESIGN SYSTEM
DEVELOPER HAND-OFF
To ensure design consistency and facilitate a seamless handover to developers, I established a modular design system. This system was built upon reusable components and their respective states, encompassing elements like map hover effects, cards, icons, and illustrations. Each component was designed with flexibility in mind, allowing for rearrangement and combination while preserving design uniformity and recognizable UI patterns for the user.
​
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 OF THE CHANGES
-
Increased User's Satisfaction: The streamlined layout and clear visual hierarchy have led to a more efficient navigation experience, reducing user frustration and increasing overall satisfaction.​
​
-
Enhanced User Engagement: Positive user impressions and feedback indicate a rise in user engagement, with participants finding the new design more appealing and user-friendly.​​​
TAKEAWAY
-
​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 not only streamlined the implementation but also 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 and add new features to further enhance the platform's user experience and advance the product's value proposition.
​
-
Continue refining and designing better experiences by adhering to design principles and the product roadmap.
​
-
Conduct usability testing to confirm the resolution of users' frustrations and assess the efficiency of the implemented changes.
OTHER PROJECT
.png)
