Koinonia Foundation Responsive Website
The Koinonia Foundation's website (www.koinoniacares.org) is outdated, non-responsive, and lacks a clear visual hierarchy, making it difficult for users to find essential information about donating, volunteering, and seeking assistance.
Problem
a new responsive website for the Koinonia Foundation with an intuitive layout and clear visual hierarchy, ensuring users can easily navigate and achieve their goals.
Solution
UX/UI Designer
UX Researcher
My Role
Figma
Lyssna
FigJam
Optimal Sort
Tools
65 hours
Timeline
Original Website:
Research
Competitive Analysis
Since I planned to design a fully responsive website, I performed a competitive analysis of other local non-profits with responsive websites, taking note of their programs and features, including features I might want to add to the Koinonia Foundation’s website.
Interviews
I wanted to interview people who have worked for, volunteered for, sought help from, or donated either money or other goods to non-profit organizations. I wanted to find out what they look for when the go to a non-profits website, and what tasks they use it to accomplish.
For people who donate to non-profits, I wanted to find out how they donate money (whether online or a different way), and what difficulties they’ve encountered while making a donation online. For people who volunteer for non-profit organizations, I wanted to find out how they found out about the opportunity, and whether they used the organization’s website for any task related to volunteering. For people who have worked for non-profit organizations, I wanted to find out the primary audience for their website, and what feedback they have gotten about their website. One interviewee was involved in the re-design of her organization’s website, so I wanted to find out about what changes were made during the redesign process.
Interview Findings
Overview
I interviewed 5 people who all had experience with non-profits and non-profit websites in various capacities. Two interviewees currently work for a non-profits, and one of them also uses non-profit websites for genealogical research. Two interviewees used to work for non-profits, and one of them helped re-design her organization’s website. One interviewee frequently donates to Goodwill and food drives.
Observations
Two of the five interviewees mentioned an organization’s mission statement as being one of the most important aspects they look for on a non-profit’s website.
When asked what information they look for on a non-profit’s website, interviewees mentioned information on donating (3 people), volunteering (2 people), and programs (4 people)
Two interviewees mentioned that knowing where exactly their donations will go is also important
Pain points
Some organizations’ websites don’t have much information about how to volunteer
Some volunteer opportunities one interviewee finds through third party websites actually turn out to be outdated, and aren’t on the organization’s website
Some interviewees got spammed with lots of emails from an organization after donating, or didn’t receive a timely confirmation email after donating
Some websites don’t have a Donate button in a prominent place, or the button doesn’t move as she scrolls, so it’s harder to find
Card Sorting
I decided to conduct a card sort to determine the site map for the new site. I used all the menu items on the original site for the card sort, in addition to the various headings on all the web pages. I did an open card sort on OptimalSort, with a total of 41 cards and 9 participants.
Card Sort Findings
The following cards were grouped together the most:
About Us / Our History / Our Mission / Organization Profile
Contact Us / Reach Out to Us / Join Our Mailing List / Chat / Operating Hours / How to Find Us / Location / Parking
Volunteer Support / Volunteer Application
Food and Clothing / Food Pantry / Food Pantry Needs / Clothing Closet / Arrange Item Pickup
Holiday Baskets / Christmas Wishes
Corporate Partners / Community Partners
Many of the groupings were similar to the current site, with a few differences. “Board of Directors” and “Staff” were usually listed under “About Us” or a similar heading, instead of under “Contact Us” like they are on the current site.
“Recent projects” and “What we’re doing” were usually grouped under “Programs” or a similar heading, instead of under “About Us” like they are on the current site.
Information on how to get help, such as the “Get Help” and “Emergency Assistance” cards, were frequently placed under “Contact Us.” On the current site, they’re either under “Programs” or on the “Clients Speak” page that can be accessed from the home page, but isn’t a menu item.
Many of the pages on the original site have a very small amount of information and can be combined onto one page.
Analysis
Affinity Mapping
I created an affinity map to sort insights gathered from interviews, aiming to pinpoint key features of non-profit websites, and to develop user personas.
Click here to view affinity map.
While looking through all my data points and observations from my interviews, I found that all observations fit into one of nine categories, with some categories that could be broken down further:
Donating
Features of donating
How people donate
What works well when donating online
Communication after donating
Volunteering
How people find out about volunteer opportunities
Applying to volunteer through websites
What people are looking for on nonprofit websites
Mission statement
Programs
Personal stories
Contact info
News and events
Volunteering info
Pain points on nonprofit websites
Issues with information on site
Issues with design
Current non-profit practices
Nonprofit website Target audiences
Using a website to donate physical items
Nonprofit website features
What people expect from a nonprofit website
Personas
Based on the data I gathered from my interviews and affinity mapping, I developed two personas, one who uses non-profit websites to find out about volunteer opportunities and apply to volunteer, and another who uses non-profit websites to make donations.
Problem Statements
Considering my personas, I crafted problem statements that captured users' major pain points. These statements were then rephrased into "How Might We?" questions.
Problem: The website for the local non-profit The Koinonia Foundation is disorganized, not responsive, and lacks a clear visual hierarchy. Potential donors, volunteers, and clients might have difficulty navigating the site.
How might we re-organize the site so that there are fewer menu items and it’s easier to navigate?
Problem: There are multiple menu items under the “Volunteer” heading that could be condensed into one page. Clicking on the “Volunteer” heading takes you to a page that doesn’t contain any information about how to volunteer, so the user has to click on subsequent menu items for that information.
How might we streamline the process of applying to volunteer?
Problem: Information for potential clients about how to get help is not easy to access. There’s a “get help” button on the home page, but it’s not featured prominently at the top. When you click on the button, it goes to a page that tells you to call the office for assistance, but the phone number is not displayed prominently. Buttons with labels like “Preventing Eviction” go to stories of people who were helped in the past, not information on how to get help.
How might we make the process of figuring out how to get help more straightforward?
Features
After identifying the "How Might We?" questions from my problem statements, I created a list of must-have and nice-to-have features that would most effectively address these questions.
-
Prominent “Donate,” “Volunteer,” and “Get Help” buttons
“Donate,” “Volunteer,” and “Get Help” buttons are all at the top of the page, and are fixed as the user scrolls
Supporting Research: Interviewees said that finding out how to donate, volunteer, and get help are some of the most important functions of a nonprofit website. Many other nonprofit websites have buttons for these functions that are fixed as the user scrolls
Mission statement on home page
The mission statement is on the home page instead of under “About Us” where it is currently
Supporting Research: Multiple interviewees said that a nonprofit’s mission statement is one of the first things they look for when going to a nonprofit’s website
Get Help page with prominent phone number under “Contact Us”
“Get Help” under “Contact Us,” in addition to fixed “Get Help” button, and a prominent phone number at the top of the Get Help page
Supporting Research: Most card sort participants put “Get Help” under “Contact Us,” so many people will probably look there to get help. Many interviewees also said that contact info is important, and the contact info on the Get Help page is currently not very prominent.
-
Arrange item pickup
Users can set up a pickup of their donations online
Supporting Research: Multiple interviewees have scheduled pickups of donations online for various organizations and like how easy it is. Koinonia currently doesn’t offer this.
Chat
Users can chat with a live person about how to get help or to get other info
Supporting Research: One interviewee mentioned that a chat feature would be helpful on a nonprofit website. Koinonia currently doesn’t offer this.
Info on where donations go
Easy to understand breakdown of what percentage of donations actually go to programs on the “Financial Transparency” page.
Supporting Research: Multiple interviewees said they want to make sure most of their donation is actually going to help clients. Koinonia currently has a link to a pdf of a tax form on their “Financial Transparency” page, but it’s probably hard for most people to understand
Sitemap
Based on the results of the card sorting, as well as the list of features I thought my personas would find useful, I developed a new site map for the website.
User Flows
Based on the site map, I developed user flows showing the various ways a user can use the website to apply to volunteer, make a donation, or get help from the organization.
Legend
User flow 1: Applying to volunteer
User flow 2: Donating on the website
User Flow 3: Getting help
Task Flows
Based on the user flows, I developed task flows showing the multiple ways a user can apply to volunteer, donate, or get help from the food pantry. I planned on conducting a free-flow test to see if users could figure out the multiple ways to accomplish each task.
Legend
Applying to volunteer task flows
Donating task flows
Getting help from the food pantry task flows
Design and Testing
Low-fidelity wireframes
I sketched low fidelity wireframes for both mobile and desktop for applying to volunteer, donating, and getting help from the food pantry.
Applying to volunteer - mobile and desktop
Making a donation - mobile and desktop
Getting help from the food pantry - mobile and desktop
Mid-fidelity wireframes
I developed mid-fidelity wireframes for the tasks of applying to volunteer, donating, and getting help from the food pantry. I developed wireframes for phone, tablet, and desktop.
Click here to view all mobile mid-fidelity wireframes.
Click here to view all tablet mid-fidelity wireframes.
Click here to view all desktop mid-fidelity wireframes.
User Testing: Mid-fidelity wireframes
Summary
I wanted to test if visitors to the website could figure out how to accomplish each of the following tasks.
Applying to volunteer
Making a donation
Getting help from the food pantry as a client
All three flows had more than one possible way the task could be accomplished.
Methodology
I tested 5 users on the mid-fi user flows. I tested the desktop wireframes since most interviewees said they used a desktop computer to accomplish the tasks I wanted to test. I set up the flows as free-flow so that users could accomplish the tasks in multiple ways.
I set up the flows in Lyssna so that all the clicks would be recorded. I also had the users share their screen with me while they went through the test so I could see where they were.
After the users figured out one way to accomplish each task, I asked them to go back to the home page and see if they could figure out another way to do it.
Results
When figuring out how to make a donation, all users easily found the Donate button, but had a hard time finding another way to make a donation. Most users didn’t expect “Donate” to be under “Contact Us.” Users expected it to be under different menu items instead, with the most common expectation being that it would be under “About Us.”
Many users also didn’t expect “Get Help” to be under “Contact Us.” Most users said that if they were looking to get help from the food pantry, they would first look under “Programs.” Although in the site map there is a link to the food pantry under “Programs,” it wasn’t clickable for the test because I thought people who were looking for help would go to “Contact Us” instead. I was thinking the link to the food pantry under “Programs” would be where people might go if they want to volunteer for the food pantry or make a donation to the food pantry. But it turned out people seeking help first looked under “programs.”
Iterations
Visual Changes
Update layout for a more modern look
Break up wordy text
Add a longer footer with operating hours and contact info
Functionality Changes
Put the Donate menu item under About Us instead of Contact Us
Make the food pantry menu item under the Programs menu clickable
Sample Iterations
Before
After
High-fidelity wireframes
After making iterations from my mid-fi tests, which didn’t include any branding so that users would focus on the functionality, I developed high-fidelity wireframes, updating the site to a more modern look while making sure it’s still consistent with the original branding.
Click here to view all mobile high-fidelity wireframes.
Click here to view all tablet high-fidelity wireframes.
Click here to view all desktop high-fidelity wireframes.
Final UI Kit
I developed a UI kit for the elements I added to the new version of the website, as well as an expanded color palette.
User Testing – High-fidelity wireframes
After making the iterations from my mid-fidelity tests and developing high-fidelity wireframes, I tested the same flows with the desktop high-fi wireframes with 5 users.
Measuring success
I decided I would consider the test a success if the users reach the end screens of each flow with minimal confusion and minimal clicks. Specifically, I’ll consider it a success if users are able to do the following:
Quickly find the Donate menu item under About Us
Quickly find the food pantry under Programs
Easily find more than one way to complete each task
Questions for users during testing
How easy was it for you to figure out where to click?
Was anything confusing?
What do you think of the layout and color scheme of the wireframes?
If you tested the mid-fi wireframes for this project, how does the ease of completing these tasks compare to the mid-fis?
Test Results – High-fidelity wireframes
For the high-fi tests, I moved the “Donate” menu item under “About Us,” whereas it had previously been under “Contact Us.” Results were mixed about where the most intuitive location should be for “Donate.” Two testers said it was more intuitive under “About Us,” one said she expected it to be under “Contact Us,” (the tester who had not tested the mid-fis), and one said she could see it being under either. All testers found the Donate button in the upper right-hand corner right away.
For this test, I made the Food Pantry item under Programs clickable, since users had said during the mid-fi tests that they expected it to be under Programs. Most users quickly looked under Programs when asked to find the food pantry. There was also a sub-menu item under the Food Pantry for Food Pantry Needs, and several users were confused about the sub menu item being there when looking for the food pantry.
One tester suggested changing “confirm payment” to “confirm donation,” and changing “payment info” to “credit card info” in the donation flow, to make it more obvious that the user is making a donation instead of making another kind of payment. She also suggested adding an additional button for the Volunteer Application on the Volunteer Info page at the bottom of the page, in case someone scrolls through the volunteer info and wants to apply, but doesn’t remember where the volunteer application button is.
Iterations
Changes to Information Architecture
Change the Volunteer menu item to “Donate or Volunteer” and put “Donate” under that menu
Take out the “food pantry needs” menu item under Food Pantry and just add it on the food pantry main page
Text Changes
In the Making a Donation flow, change “confirm payment” to “confirm donation,” and “payment info” to “credit card info”
Visual Changes
Add a shadow to the map on the Get Help page to make it look more consistent with other images
Change some of the photos to something more relevant, and/or photos with people
Add another button at the bottom of the volunteer info page that goes to the volunteer application
Clarifications
Make the info on the food pantry page clearer, since right now it sounds like there might be 2 separate food pantries
Put Credit Card Info form on a separate screen from the rest of the Donation form, to better conform to user expectations
Sample Iterations
Before
After
Final Product
Final website, before and after
Before
After
Reflection and Next Steps
This project helped me to grow as a UX designer because I really had to think about how the same website would look on a desktop computer, phone, and tablet. I had to design one site that would respond well to the various sizes, and would still be attractive and readable.
Since I was re-designing a website for a real organization, I had to work within the constraints of an established brand, including their logo, color palette, and general feel. I wanted the new site to look much more modern, but not so different from the original site that it would be completely unrecognizable. The original site didn’t have much of a color palette or consistent styles, but it did have a certain look and feel that I didn’t want to completely change.
I started with the current site colors, and developed an expanded color palette that went well with the original colors, since I needed more colors for buttons and menu items. I also developed a consistent style for buttons, cards, and other elements that I added to give the site a more modern look.
One challenge with this project is that most of the photos on the original site were very low resolution, so I had to find free stock photos that I felt fit the look and feel of the site and the mission of the organization. Sometimes it’s hard to find stock photos that don’t look too cliché.
One unique aspect of this project is that there was more than one way to accomplish most of the tasks. I tested users to see if they could find all of the ways to accomplish each task.
Next Steps
Add Chat feature so a potential donor or client can chat in real time with someone from the organization
Add a feature to arrange an item pickup, since multiple people I interviewed said they liked the convenience of arranging donation pickup online
