Website redesign for a non-profit community service center
Website Design
Harvest Haven Community Service Center
CLIENT BACKGROUND
Established in 2004, Harvest Haven Community Service Center is a 501(c)(3) charitable organization whose mission is to enrich lives and strengthen the community through services and engagement.
ROLE & DURATION
UX Researcher
UX Designer
April 2020 - July 2020
The Challenge
Over the past decade, Harvest Haven’s website design and structure has remained more or less the same, with little consideration for website functionality other than displaying information.
The need for a strong online presence is stronger than ever in order to remain relevant and connected with their community members, especially with doors shuttered due to the COVID-19 pandemic.
The Solution
Using an updated WP platform to redesign the website, the key end deliverables include:
Redefined website purpose and goals
Restructured site content and architecture
New responsive interface and design
Donation and newsletter integration
THE PROCESS
DISCOVER
Stakeholder Meeting
I met with Harvest Haven’s founder and board members to discuss the scope of the website redesign project. This time was used to identify the organization goals and needs, and discuss any (financial) constraints or limitations to keep in mind. The main goals established were to:
Increase volunteer interest
Implement online donations, and ultimately increase donations altogether
Establish a more modern and strengthened online presence
Stay connected and relevant with the community, especially during the COVID-19 pandemic
DISCOVER
Competitive Analysis
To better understand the landscape of what I was working with, I conducted a competitor analysis of various non-profits in a similar community service center landscape. This helped me get a better idea of where Harvest Haven’s current website stood in the market and helped me identify any gaps in their website as compared to competitors.
DISCOVER
Current Website Audit
The next step in the discovery phase was to do an in-depth walkthrough of Harvest Haven’s current website, looking at not only its site map structure but also its website interface as seen by visitors. I was quickly able to identify the following key issues:
No easy way for users to connect, reach out, or get involved. (No contact form, no call to actions, no newsletter sign ups)
Inconsistent text, navigation, and page styles
Visually unappealing and uninviting
Information is overwhelming, often too much being addressed on a single page without any visual hierarchy
DEFINE
User Surveys
Conducting a user survey was crucial in order to better understand the users I would be designing for and to understand website habits, use, impressions, and pain points. I also wanted to identify what, if any, gaps existed in the current website’s presence.. The first step was to identify the different groups of users, which I categorized into three groups:
Those who are currently affiliated with Harvest Haven, and use the site
Those who are currently affiliated with Harvest Haven, but don’t use the site
Those who are not affiliated with Harvest Haven (future/potential users)
Because a large portion of Harvest Haven members are Chinese-speaking, it was important to provide the survey in both English and Chinese for full inclusivity.
Findings & Insights
The survey responses confirmed several findings from the initial website walkthrough, but also shed some light on new insights as well:
For currently affiliated users, the website serves little purpose or incentive to share it with others. As a result, over 50% haven’t visited the website within the past year or have never visited at all.
Content is unorganized within the webpages, with some sections appearing in unexpected areas and some pages having too much unrelated information.
Inconsistency within the information provided. Visitors are overwhelmed with the amount of information on certain pages, yet left confused with the lack of details in other pages.
Lack of clear Contact Page or contact information in a fixed header/footer makes it difficult for visitors to easily access important organization information.
Overall website appearance is unappealing and flat. The current color palette of blue, brown, tan, and white is not cohesive or inviting. Visitors want to see more photos in order to establish a better trust and connection with the organization.
DEFINE
How Might We statements
In order to move to the next phase of the process and turn the challenge into a solution, I established the following How Might We statements to better allow opportunities for design.
How might we…build a more appealing and engaging online presence?
How might we…increase donor & volunteer interest?
How might we…re-organize website content for easier navigation and readability?
IDEATE
Site Mapping
Breaking down the site content and pages through site mapping helped me strategize around how to structure the information on the site so that it was easy to find and read. It took several site map versions before getting approval by the Board Members.
IDEATE
Sketching
Rough sketches helped me visualize the flow of screens as well as individual features and components of the website redesign.
DESIGN
Design Validation
Before the final website designs were put into production, I set up a brief user testing scenario via video chat screen share for a few volunteers to take. The purpose of this was to ensure the proposed new features and information would be easy to identify and navigate through.
The usability test consisted of users completing the following tasks, along with each respective success rate (ability to complete task without assistance or difficulty):
Make a donation - 100% success
Send an inquiry email to Harvest Haven - 75% success
Sign up for newsletter - 100% success
Find details about senior programs 100% success
Design changes were then made and applied to final design based on the feedback received from this session.
DESIGN
Final Website Design
Final design changes and added features include:
Donate button located in the primary navigation
Online donation integration
Photo carousel gallery on homepage
English/Chinese language switcher
Newsletter sign-up
Newsletter integration
Contact form
Location map
Website footer
With the website redesign, current Harvest Haven members have a more organized space where they can view program updates, upcoming events, read newsletters, check class schedules, and more. For non-Harvest Haven members and first-time visitors, they are welcomed with a clear overview statement and engaging photos of what Harvest Haven’s mission is.
Feel free to visit and explore the full website yourself!
Project Reflection
Working on this redesign project has been my biggest and most complete end-to-end project to date. I’m glad I had the opportunity to work with such a great organization, and in doing so learned a lot about myself as a designer, the non-profit landscape, and the redesign process.
Some of my key learnings were:
Communication: I learned how important clear and constant communication throughout the process is. Working with the client and stakeholders was great reminder to step outside of my own assumptions and remember to design for the user.
Collaboration: Working as a one-(wo)man team, I would have enjoyed working on this in a collaborative team environment with other researchers and designers to bounce ideas off of, receive feedback from, and implement different methods. This project was a strong reminder of how important collaboration is, especially for more complex and long-term projects.