Redesigning a complex Nonprofit Website that provided simplicity for staff and clarity for donors
INDUSTRY
SOLUTIONS
OVERVIEW
GNWKCF is a nonprofit organization that partners with smaller foundations to support their efforts to make a positive impact in their communities. Their amazing team helps these foundations maximize their impact by providing assistance with administrative tasks and technical support, so they can focus on their mission and make the most of their resources.
GNWKCF had two main problems:
- The user experience was poor and no longer up to today’s standards. Which caused lots of calls from confused people and a lot of manual work for the team.
- The website was difficult for the staff to update and outdated content was still to be found on the website.
We were tasked with updating their current design to help their users find what they were looking for easier. However, their current site was huge and we had to first understand what we were dealing with.
The solution was to come up with an organized content management system that allowed pages and sections to be dynamically adapted to the content the team provided.
Simplifying Complexity
Components make it easy to build pages super quickly
We’ve constructed each page out of components.
Each component has variations in color and layout.
This makes it super simple to maintain pages and build them using components from the component library.
COMPONENTS
Each component with variations such as color and layout.
Drag & Drop editing
The drag and drop experience of building pages using components.
ON-PAGE EDITING
The on-page editing after dropping components.
Data Browsers
ITERATION WAS KEY
GNWKCF manages 270+ funds, 25+ grants and 30+ scholarships. It is essential for the users to find what they are looking for as quickly as possible.
We have gone through many iterations of the design in order to live up to exactly what we had in mind, and as a result, some were discarded.
FINAL DESIGNS
After many discussions and iterations we arrived at the perfect design.
We call this “data card”; a flexible and easily scannable approach to displaying complex data.
FILTERS
By implementing some filters, users are now able to easily browse and find exactly what they are looking for in the fully accessible data. This results in a seamless and efficient search experience.
Effortlessly responsive
We made sure that every page on the site looked great and was easy to navigate on any size device from desktop computers to tablets to mobile phones
Balancing the needs of multiple user groups
We began our design process by gaining a thorough understanding of the users who will interact with the site. Through research and analysis, we identified four key groups of users:
- Donors
- Scholarship applicants
- Grant applicants
- Grant reviewers
By considering the needs and perspectives of these users, we were able to create a user-centered design that meets their needs and expectations.
Next, we conducted a thorough analysis of the current website structure to identify areas for improvement and develop a more logical and manageable design.
Quickly accessing information and functionality
People are busy and attention spans are low. To address this challenge, we have carefully designed the site to be easy to navigate and understand. Our layout clearly presents the most commonly used pages, allowing users to quickly find the information they need and get back to their busy lives. By prioritizing simplicity and clarity, we aim to make our site user-friendly and accessible to all.
Helping visitors navigate a complex website
The site is a starting point for many people to access areas behind a login.
This presents a unique challenge for a user who might know what they want to do but doesn’t know where to go to do that.
We’ve created detailed story maps in order to figure out what use-cases these people would have.
The end result was a page that led people to where they need to go based on their role and what they want to do.
Making donation easy and convenient
Objectively, the most important aspect of a community foundation site is the ability to collect donations. This is the lifeblood of the foundation and therefore the community itself. So we knew this was an important task to tackle.
However, GNWKCF has 270+ funds it manages (and counting). These funds are often managed on behalf of their affiliate foundations. All of this adds layers of complexity for the user.
To improve the user experience of the donation process, we developed a two-step form that allows users to easily search for and donate to the specific fund they are interested in supporting. By breaking the process into two steps and providing a search function, we make it simple and convenient for users to find and support the causes they care about.
One Form, Endless Impact
GNWKCF provides the ability to accept donations to several community foundations that operate with the help of GNWKCF. At the time of writing, there are 20 foundations that rely on GNWKCF in one way or another and for each of these, there is a need to manage all of their donations.
Depending on the nature of the donation, the form needs to be adaptable. For instance, during match events, the donation form displays a project selector.
We created a donation form that adapts based on the GNWKCF team’s input. Since all donations are managed centrally in one form that adapts to the situation, the back office complexity was reduced from 25+ individual forms to just one.
Effortless Foundation Management
Not every foundation that works with GNWKCF has a website. Therefore, it is essential their dedicated pages on GNWKCF website dynamically updates based on match events (match events are when an organization will financially match the donations made by the donors).
We’ve set up a system where the GNWKCF team can schedule dynamic changes based on these events which allows them to automate multiple foundations’ requirements with ease.
Conclusion
The website we created for the non-profit organization was a success in terms of providing simplicity for staff and clarity for donors. The clean and user-friendly design made it easy for staff to update and manage the site, while the clear and concise information provided on the site made it easy for donors to understand the mission and impact of the organization. The integration of online donation capabilities also allowed for an efficient and secure way for donors to contribute to the organization's cause. Overall, the website has greatly aided in the organization's ability to effectively communicate with and engage its audience, and has helped to further its mission and goals.
