Fanwar faith
A website redesign for a nonprofit organization to help develop a rapport built on comprehension and dependability.
Fanwar Faith Inc. is a non-profit organization that aims to help underprivileged children in Meghalaya, India. Founded in 2003 by the father of one of our designers, the organization has provided education to over 35 children and has also sponsored and hosted health clinics, evangelistic outreach, and educational series. They are committed to building homes, churches, and schools, providing training programs for low-income single mothers and widows, and disaster relief.
The Objective
Determine how to make Fanwar Faith projects clear and to optimize user experience for first-time and returning visitors.
The Problem
Users visiting Fanwar Faith struggle to struggle to identify important information about Fanwar Faith Inc. because information is not optimally presented. How might we make content easier for users to digest and make payment options more convenient to improve conversion optimization?
Business Needs and Goals
Rebuild pages based on user tests to optimize the user experience and clarify Fanwar Faith projects.
Primary business needs include:
-
Accurately depicting what the organization represents
-
Analyze the site's efficiency in regard to functionality and flow
-
Documenting what users experience when visiting the website and if the updates help reassure their decisions to donate
Solution
A streamlined user experience is needed by making information more accessible by implementing changes to Homepage, About Us, and Get Involved sections.
My Role
UX/UI Designer in a team of 2 other designers
Tools
Figma
InVision
Project Duration
2 weeks
Original Fanwar Faith website users tested
Research
User Research
To better understand any issues with the website's functionality, we conducted user research to gain insight into users' characteristics and behaviors in achieving those goals. We conducted user interviews and tested users to navigate the original website to effective address the problem. This will enable us to assess the impact of design and flow on the user experience.
Discovering the problem areas
Our team utilized an affinity diagram to categorize our findings based on shared themes and to pinpoint areas where users may experience frustration. This method enabled us to streamline our data analysis and identify critical insights to inform our future decisions. Some of the key insights from our users were:
-
About page: People believed the presentation of the information could be better. The text could come before the photos, and the images could have captions.
-
Home page: Underwhelming; the font is too small, which creates a lack of visibility. Information is not displayed well.
-
Donations: Secure donations: It would be helpful if there were information on where the donation is explicitly going to
More payment methods: Add an option to donate with a credit card
Prioritize Key Features
Our team diligently organized user needs according to complexity and value, aligning them with our organization's values and objectives. This process ensures we address the most critical needs first, delivering the best possible outcomes for our users. The following requirements were carefully selected as crucial elements to include in our website redesign.
-
Captions and descriptions of images
-
Easy to find donate button on each page as a precise donating method
-
Create more ways to contribute by adding an option to pay with a credit card
.png)
Research Synthesis
Storyboard
We have developed a storyboard to illustrate the user experience on our website, taking into account the insights gathered from user testing and interviews.
Competitor Analysis
We researched successful features on websites such as iimpact Australia, Bainum Family Foundation, Jump Start Students First, and Unicef to better meet user needs.
After conducting a thorough analysis of our website and comparing it to our competitors, we noticed a crucial aspect that we were missing: a prominent "Donate" button. We understand how important it is for users to have a clear path towards contributing to our organization. To make donating as effortless as possible, we made sure to incorporate the "Donate" button into the primary navigation of our website. By doing so, we ensure that it is easily visible and accessible for our users.
Define & Ideate
Now that we have identified our users and their wants, needs, and pain points, we believe it's important to reassure them of their decision to donate to Fanwar Faith Inc. Information about the organization's creed and updates for returning donors should be easily accessible and digestible.
User Flow
We created a user flow to ensure a smooth and efficient experience for our users. This step allows us to visualize the various interactions required for users to accomplish specific tasks. By doing so, we can identify and address any pain points or potential issues that may arise. Additionally, this process helps us to determine what aspects of our design are working well and what areas need improvement.
Wireframing
We created low-fidelity wireframes to help visualize where to place the features. We decided to add bold "Donate" buttons as a call to action, ensuring users see it on every page.
Home
Ways to Get Involved
About
Donation Pop-up
A/B/n Testing
To optimize user experience, we conducted an A/B/n test to compare and contrast the effectiveness of different website designs. Through this process, we determined the most effective design for our users.
A
B
C
D
E
The results of the A/B/n testing shows that Variation E is highly effective, with 90% of users reporting positive results. The donate button is easily accessible from both the navigation bar and the side, providing a seamless user experience. By increasing the size of the landing page photo and organizing the navigation bar, we have significantly improved user satisfaction and have applied these findings to enhance other pages.
Design
Revamping the website with purpose
Our website's design incorporates Khasi Tribal colors to represent culture and mission effectively. We designed the donate button with a bold red color to ensure a clear call to action and to portray a sense of urgency. The navigation bar's yellow contrast helps users easily identify the current page they are browsing. We chose yellow to highlight our key messages for maximum impact. Our design choices reflect our values and mission, ensuring that users can engage with us and support our cause with ease.
Enhancing the conversion rate of donations
We implemented a popup to the website to enhance the donation process. We added a user-friendly pop-up that makes it easier for donors to contribute to the organization's cause. Various payment options were added allowing donors the flexibility to choose the method that suits them best. In addition, we created preset donation increments to streamline the process, making it quicker and more efficient.
Instilling trust and confidence
In order to increase confidence and trust in the organization, we have taken measures to ensure that data security is a top priority. As such, we have implemented an SSL certificate on our donate popup, making it easier and more secure for users to contribute. Additionally, we made efforts to improve transparency by including the mission statement on the homepage and providing regular social media updates that offer insights into the organization's progress and character. These steps are all part of the organization's ongoing commitment to maintain the trust and confidence of the users.
Increasing opportunities for involvement
At the moment, the organization can only be supported through monetary contributions, which is greatly appreciated. However, we wanted to expand the ways in which users can get involved and show their support. Along with financial donations, we have included options for sponsorship, AmazonSmile, and volunteering, providing users with various ways to make a meaningful difference and contribute to the cause.
Prototype
Test
I conducted a series of tests to verify if the new design works better for the user. We wanted to know if we made the tasks discussed earlier in the process more simple and easier to navigate. We used the same key tasks we did when we conducted our user research. The tasks were to browse each tab of the navigation bar, define the purpose of each tab, and then make a donation. Users shared their thoughts as they were accomplishing each task.
Overview
Participants: 5
Average Time to complete tasks: 3.5 minutes
Success Rate: 100%
Next steps
-
Conduct more usability testings
-
Continue to make iterations for a more streamlined experience
-
Provide more content on how contributions have made an impact by including testimonials, videos, etc.
Reflection
This project has given me a broader understanding of creating a productive website for a nonprofit organization. My experiences have allowed me to gain invaluable insights into the various elements of website design, both practical and ineffective. Furthermore, I have honed my skills in adapting to the techniques employed by other designers to create an optimal end product. Overall, this project has been a highly educational and rewarding experience.