Nonprofit Responsive Website Re-design
Re-designed to make it easier for low-income seniors, caregivers, and people with chronic illnesses receive food assistance.
Roles: Project Manager, UX Researcher, UI Designer, Usability Tester
3-week Group Project
User Interviews, Data Synthesis, Sketching, Information Architecture, Workflows, Wireframing, Interface Design
Google Forms, Miro, Descript, Figma, and teamwork.
Open Hand Atlanta (OHA) is a nonprofit organization that seeks to eliminate disability and untimely death due to nutrition-sensitive chronic disease.
Powered by donors, volunteers, and partners, OHA offers meal programs for:
Low-income, hardworking caregivers strive to provide nutritious meals made with fresh ingredients for their family, but struggle to make time or have the means for grocery shopping because they work long hours with very little pay.
This makes them feel bad about themselves, and the lack of nutritious food exacerbates the family's existing health issues.
While there are meal programs they qualify for, information about how to qualify and the process for qualifications are often hard to find, which discourages them from seeking help.
On the OHA website, how might we make the information gathering process more efficient for potential beneficiaries?
By re-designing the website to highlight their programs and make potential beneficiary information easier to find, the organization can better serve the community and extend their reach within Atlanta.
UX: Streamlined the user flow within the website for a smooth and productive user experience.
UI: Prioritized accessibility in the graphic elements of the website re-design to better serve the users.
Mobile Prototype Results
User-Centered Design Process
Usability Testing + Iteration
Website End Users
After skimming the website, we assumed that these are the main user types of openhandatlanta.org.
However, due to the time and scope constraints, the later stages of the project focused primarily on the prospective beneficiaries.
Users who visit the website to find out more about how they can support OHA initiatives
Users who visit the website to find out more about OHA programs and qualifications
Unfortunately, we did not get to speak with a stakeholder even after a few follow-ups.
The following are some questions we hoped to get answers for.
Due to the timeline of the class project, we proceeded with doing our own heuristic evaluation to assess usability issues for the beneficiary.
Please describe your average:
What issues have you heard about the website from:
• What are OHA's business goals for the next two quarters?
• What issues are you hoping a new website design will address?
• What is the most critical goal of this deliverable?
Based on Gerhardt-Powals' Cognitive Engineering Principles
• Unwanted Workload: Company mission and purpose are up to interpretation on the home page
• Cognitive Overload: Content on page is not easily scannable
• Poor Visibility: Call-to-action signifiers are not immediately visible or distinguishable
• Lack of Accommodation: The interface lacks accessibility compliance with low contrast design choices. Search box is nonexistent.
• Understand how users navigate the current site to gather information on qualifications
• Understand OHA company impressions on users
• Identify extraneous content within the website in order to make the process more efficient
• 5-second test
• Find the page that describes OHA's mission statement
• Find the page that lets you see if you qualify to receive assistance from OHA.
User Research Conducted
Six total participants via Zoom interviews
• Overwhelm from amount of content to read
• Guesswork on what to click
• Taxing to look for specific information
• Too much unnecessary content on pages
• Calls-to-action lack visual emphasis
• Poor use of color and graphics causing the user to spend a lot of time assimilating raw data
Standout Interview Quotes
There's too many words on here. This could be a barrier to them getting help because the actions are difficult to find.
There's just so much information to sift through that it gets overwhelming, and it all looks the same. I wouldn't remember what page I was on because they look identical with color and font and everything.
The options I was looking for aren't visible enough. I think the links can be more visible, like what if the person is color blind?
Affinity Diagram Insights
• Dolores needs to access the website and find information quickly because she has limited and inconsistent internet access
• Dolores needs to get an understanding of the qualification process to gain access to nutritious food
• Dolores seeks a support system to help her family live healthier lives
Empathy Map: Meet Dolores Boquerón
• Searches for local organizations providing low-income food assistance
• Finds Open Hand Atlanta
• Gather information on the food assistance programs
• Find forms/documents to complete for qualifications
• Speak to an organization representative for more information
Risks + Emotions
• Limited time for research
• Skeptical from experience of government assistance holdups
• Stressed by impending health issues caused by lack of nutritious food for family
There was no site map on openhandatlanta.org, so we created the site map based on:
• The typical user path from our tests
• Pages that were visible across the site
UI Style Guide
It is important to the user that the site design is clean, simple, and high contrast. We intended for the design to be attractive and useful for people across life stages, but easy enough to use for seniors.
• Is it easy for the user to understand what Open Hand Atlanta is?
• Can the user find information on how to qualify?
• Five-second test
• Find information on their programs
• From where you are, find the page that lets you see if you qualify to receive assistance from Open Hand
• From where you are, find the option that lets you take the first step towards qualifying
User Research Conducted
Five individual interviews were conducted over Zoom using a script with targeted questions to meet the research objectives.
The one page aspect [jump-to-section] is nice. The choice of colors and consistent use of font makes for a clean interface – simple and easy to understand.
I like the infographics/statistics, it's a quick read. Client stories are also cool to see.
It's pretty easy to scan!
Collaboration in the team and stakeholders
If I could develop this website further, I would:
A mobile app that lets wheelchair users and caregivers discover authentically accessible places near them.
A travel planning app that offers overwhelmed travelers a streamlined way to create and collaborate on itineraries with friends.