Urban Harvest STL

Website Redesign Project

Urban Harvest STL

Website Redesign Project

My Role

UX Researcher

UI Designer

Team

Ashley Bailey (UX Designer)

Lisa Bertke (Developer)

Tools

Figma

Squarespace

Adobe Photoshop

Canva

Google Suite

My Role

UX Designer

Team

Ashley Bailey (UX Designer)

Lisa Bertke (Developer)

Tools

Figma



My Role

UX Researcher, UI Designer

Team

Ashley Bailey (UX Designer)

Lisa Bertke (Developer)

Tools

Figma, Squarespace, Adobe Photoshop, Canva, Google Suite

Client

Urban Harvest STL is a St. Louis-based non-profit that addresses food insecurity by operating a network of urban farms throughout the city. Their mission is to ensure equitable access to healthy fruits and vegetables while providing educational programming to the community.

In 2001, UHSTL launched their original website, which, after nearly two decades, required updates to better serve their evolving goals. As the Operations Assistant, I spearheaded a comprehensive UX audit of the site, conducting stakeholder interviews and leveraging user experience research methodologies to inform design decisions. My team included 2 board members who work in technical and design roles at Ameren and Slalom.

The Executive Director set clear priorities for the redesign: the site needed to focus on driving individual donations, maintain the existing Squarespace platform, and preserve UHSTL’s established branding.

Project Overview


Our team conducted a comprehensive audit of the non-profit’s website to identify pain points and opportunities for growth. We focused on three main flows: Mission, Volunteers, and Donate, and provided recommendations for improvements. Utilizing a robust UX approach, we interviewed stakeholders and clients to assess user needs and guide our design suggestions.

Problem Statement


Urban Harvest STL (UHSTL) is a growing non-profit that relied heavily on individual donors, corporate sponsorships, and grants to fund its programs. To secure these funds, UHSTL needs to effectively communicate its mission, services, and fundraising needs to a diverse audience—quickly and clearly.

However, the previous website presented several challenges. Donors were met with a "happy-go-lucky" vibe, with one interviewee noting, "nothing about this website makes me think you need money." Funders struggled to find clear impact data needed to support grant proposals, while new visitors found it difficult to quickly grasp the organization’s mission and values. The volunteer sign-up process was confusing, deterring potential volunteers, and users looking for educational content, especially growers, had trouble locating relevant information.

These issues hindered UHSTL's ability to engage its community, secure funding, and attract volunteers—ultimately affecting its capacity to fulfill its mission. The challenge was to create a seamless, intuitive user experience that met the needs of all stakeholders while clearly conveying the organization’s mission and impact.

Solution


Update the current website while maintaining the existing platform and branding:

Enhance Clarity of Mission and Values: Redesign the website's content and layout to clearly communicate UHSTL’s mission, values, and goals. Ensure visitors quickly understand the organization’s purpose and broader impact within seconds of landing on the site.

Improve Fundraising Communication: Develop dedicated sections that effectively convey funding needs, donor impact, and corporate sponsorship opportunities. Use clear data and storytelling to highlight the importance and value of supporting UHSTL.

Simplify the Volunteer Sign-up Process: Redesign the volunteer process to be straightforward and engaging, reducing confusion and increasing participation. Include clear calls to action and streamlined forms to improve the user experience.

Methodology

Through the project, we utilized a Design Thinking approach. Design Thinking divides the workflow into five stages—Empathize, Define, Ideate, Prototype, and Test—and promotes iterative refinement by allowing for revisits to any stage as needed.

Urban Harvest STL

Website Redesign Project

Urban Harvest STL

Website Redesign Project

My Role

UX Researcher

UI Designer

Team

Ashley Bailey (UX Designer)

Lisa Bertke (Developer)

Tools

Figma

Squarespace

Adobe Photoshop

Canva

Google Suite

My Role

UX Designer

Team

Ashley Bailey (UX Designer)

Lisa Bertke (Developer)

Tools

Figma



My Role

UX Researcher, UI Designer

Team

Ashley Bailey (UX Designer)

Lisa Bertke (Developer)

Tools

Figma, Squarespace, Adobe Photoshop, Canva, Google Suite

Client

Urban Harvest STL is a St. Louis-based non-profit that addresses food insecurity by operating a network of urban farms throughout the city. Their mission is to ensure equitable access to healthy fruits and vegetables while providing educational programming to the community.

In 2001, UHSTL launched their original website, which, after nearly two decades, required updates to better serve their evolving goals. As the Operations Assistant, I spearheaded a comprehensive UX audit of the site, conducting stakeholder interviews and leveraging user experience research methodologies to inform design decisions. My team included 2 board members who work in technical and design roles at Ameren and Slalom.

The Executive Director set clear priorities for the redesign: the site needed to focus on driving individual donations, maintain the existing Squarespace platform, and preserve UHSTL’s established branding.

Project Overview


Our team conducted a comprehensive audit of the non-profit’s website to identify pain points and opportunities for growth. We focused on three main flows: Mission, Volunteers, and Donate, and provided recommendations for improvements. Utilizing a robust UX approach, we interviewed stakeholders and clients to assess user needs and guide our design suggestions.

Problem Statement


Urban Harvest STL (UHSTL) is a growing non-profit that relied heavily on individual donors, corporate sponsorships, and grants to fund its programs. To secure these funds, UHSTL needs to effectively communicate its mission, services, and fundraising needs to a diverse audience—quickly and clearly.

However, the previous website presented several challenges. Donors were met with a "happy-go-lucky" vibe, with one interviewee noting, "nothing about this website makes me think you need money." Funders struggled to find clear impact data needed to support grant proposals, while new visitors found it difficult to quickly grasp the organization’s mission and values. The volunteer sign-up process was confusing, deterring potential volunteers, and users looking for educational content, especially growers, had trouble locating relevant information.

These issues hindered UHSTL's ability to engage its community, secure funding, and attract volunteers—ultimately affecting its capacity to fulfill its mission. The challenge was to create a seamless, intuitive user experience that met the needs of all stakeholders while clearly conveying the organization’s mission and impact.

Solution


Update the current website while maintaining the existing platform and branding:

Enhance Clarity of Mission and Values: Redesign the website's content and layout to clearly communicate UHSTL’s mission, values, and goals. Ensure visitors quickly understand the organization’s purpose and broader impact within seconds of landing on the site.

Improve Fundraising Communication: Develop dedicated sections that effectively convey funding needs, donor impact, and corporate sponsorship opportunities. Use clear data and storytelling to highlight the importance and value of supporting UHSTL.

Simplify the Volunteer Sign-up Process: Redesign the volunteer process to be straightforward and engaging, reducing confusion and increasing participation. Include clear calls to action and streamlined forms to improve the user experience.

Methodology

Through the project, we utilized a Design Thinking approach. Design Thinking divides the workflow into five stages—Empathize, Define, Ideate, Prototype, and Test—and promotes iterative refinement by allowing for revisits to any stage as needed.

1

EMPATHIZE

-Understand the User

-Understand the Market

2

DEFINE

-Define the user & their tasks

-Observe user's emotions

3

IDEATE

-Structure the product

-Brainstorm solutions

4

PROTOTYPE

-Draw wireframe prototypes

of key solutions

5

TEST

-Get feedback

-Make improvements

# Design Thinking

1

EMPATHIZE

-Understand the User

-Understand the Market

2

DEFINE

-Define the user & their tasks

-Observe user's emotions

3

IDEATE

-Structure the product

-Brainstorm solutions

4

PROTOTYPE

-Draw wireframe prototypes

of key solutions

5

TEST

-Get feedback

-Make improvements

# Design Thinking

1

EMPATHIZE

-Understand the User

-Understand the Market

2

DEFINE

-Define the user & their tasks

-Observe user's emotional journey

3

IDEATE

-Structure the product

-Brainstorm solutions

4

PROTOTYPE

-Draw wireframe prototypes

of key solutions

5

TEST

-Get feedback

-Make improvements

Evaluative Research

Empathizing with the user began with evaluative research method to access the effectiveness of the existing product. After holding initial interviews with the business stakeholders, we developed a list of research goals to drive our UX audit.

Research goals were carefully established to align with the organization's strategic objectives, ensuring a comprehensive understanding of user needs and pain points. To gather diverse perspectives, we conducted in-depth interviews with six key individuals, each representing different facets of the organization—ranging from leadership and staff to volunteers and donors. These interviews provided valuable insights into the various operational arms of Urban Harvest STL, offering a well-rounded view of both internal processes and external engagement challenges.

Research Goal:

Identify users’ general impression of UHSTL

1

Research Goal:

Discern types of tasks users are trying to accomplish

2

Research Goal:

Understand needs of website’s target audiences

3

Research Goal:

Assess relevance and effectiveness of current content.

4

Research Goal:

Explore ways to enhance community engagement

5

User Interviews Reveal Themes

User Interviews Reveal Themes

With research goals in mind, we set out to conduct user interviews. It was clear from the outset that the website is visited by 6 different kinds of users. Later we would synthesize these users into 3 specific personas. Our interviewees each represented a different part of the organization so we could view the site through the eyes of each kind of user.

With research goals in mind, we set out to conduct user interviews. It was clear from the outset that the website is visited by 6 different kinds of users. Later we would synthesize these users into 3 specific personas. Our interviewees each represented a different part of the organization so we could view the site through the eyes of each kind of user.

Sarah is a funding professional at Ameren. She answered my questions in email format.

Sarah is a funding professional at Ameren. She answered my questions in email format.

Ada is a program participant and is now serving on our Board. She has a unique interest in education and often volunteers at our Little Sprouts farms.

Hayley works for a large corporation and wants to host a corporate event in our spaces. She’s also interested in corporate volunteering.

Jim is someone who knows pretty little about our programs, but would like to sign up to volunteer. Jim lives in St. Louis County and isn’t particularly interested in farming.

Brent is a new Board member and in the finance committee- he’s interested in increasing donor engagement via the site. Brent works in the tech industry.

Kristen is an individual donor and development professional. She follows our newsletter and usually gives at events and specific funding drives.

Kristen is an individual donor and development professional. She follows our newsletter and usually gives at events and specific funding drives.

Jim is someone who knows pretty little about our programs, but would like to sign up to volunteer. Jim lives in St. Louis County and isn’t particularly interested in farming.

Kristen is an individual donor and development professional. She follows our newsletter and usually gives at events and specific funding drives.

Interviews lasted 15 minutes and were recorded using Otter.ai software. Responses were then sorted into categories.

Interviews lasted 15 minutes and were recorded using Otter.ai software. Responses were then sorted into categories.

Sarah is a funding professional at Ameren. She answered my questions in email format.

Ada is a program participant and is now serving on our Board. She has a unique interest in education and often volunteers at our Little Sprouts farms.

Kristen is an individual donor and development professional. She follows our newsletter and usually gives at events and specific funding drives.

Hayley works for a large corporation and wants to host a corporate event in our spaces. She’s also interested in corporate volunteering.

Jim is someone who knows pretty little about our programs, but would like to sign up to volunteer. Jim lives in St. Louis County and isn’t particularly interested in farming.

Brent is a new Board member and in the finance committee- he’s interested in increasing donor engagement via the site. Brent works in the tech industry.

Quotes

Behavior & Attitudes

Needs & Goals

Needs & Goals

Frustrations

The focus of the research centered on understanding the emotional journey and practical goals of users when interacting with UHSTL’s website. We sought to uncover how users felt during their visits—whether they were donors, volunteers, or members of the community—and what specific tasks they aimed to accomplish. By identifying their emotional responses and behavioral patterns, we could design a more intuitive and engaging user experience that aligned with their needs, from learning about the organization's mission to making donations or signing up to volunteer.

The focus of the research centered on understanding the emotional journey and practical goals of users when interacting with UHSTL’s website. We sought to uncover how users felt during their visits—whether they were donors, volunteers, or members of the community—and what specific tasks they aimed to accomplish. By identifying their emotional responses and behavioral patterns, we could design a more intuitive and engaging user experience that aligned with their needs, from learning about the organization's mission to making donations or signing up to volunteer.

We employed affinity mapping to organize the collected data into meaningful groups, allowing common themes to surface. These themes emerged as:

We employed affinity mapping to organize the collected data into meaningful groups, allowing common themes to surface. These themes emerged as:

Navigation

Users enjoyed the website’s simple navigation structure, but some content was deemed unnecessary.

Users enjoyed the website’s simple navigation structure, but some content was deemed unnecessary.

Aesthetics

Most interviewees found the site visually appealing and matched branding. The most technical interviewee felt the site was dated.

Volunteering

Clear that the overall user journey through volunteering sign-up needs improvement.

Educational Resources

Google Analytics shows users enjoy the educational resources we have posted in the past, but currently not in operation.

Large Funders

Use websites to decide to award funding. They are looking for specific data, should be easily accessible on the homepage.

Communicating Mission

Users described the same need to have a clear and concise communication of the mission on the splash page.

Content

Strike a balance b/w having enough information and also catering to the user who wants to quickly scan or click through to the CTA.

Individual Donors

Users enjoyed the website’s simple navigation structure, but some content was deemed unnecessary.

Empathize

Define

Empathize

Define

Defining the Problem


With solid insights derived from the various types of users visiting the site, we developed user personas to guide future design decisions. These personas represent key audience segments and will ensure the website caters to their distinct needs and motivations. The personas that emerged from the research were:

  1. The Community Program Participant

  2. The Concerned Donor/Funder

  3. The Active Volunteer

Developing personas was particularly critical in this project because, while the business objectives heavily emphasized building the site to attract donors, it was essential to recognize that users often wore multiple hats when interacting with the site. Our challenge was to design an experience that made all three primary personas—the Donor, the Volunteer, and the Community Learner—feel equally supported and comfortable navigating the site, all while subtly guiding traffic towards the ultimate goal of increasing donations. Balancing these needs required a thoughtful approach to ensure the site didn’t alienate one group while catering to another. We looked at how each user would accomplish their goal on the site, and how they would feel throughout the process. This allowed us to find opportunities for improvement. Here's an example of how our volunteer persona accomplished his task of signing up to volunteer:

There was clearly room for improvement in the flow particularly in the area of error prevention and helping users' recover from mistakes. The final product would need to have plenty of transparency about the volunteer sign-up process.

Auditing Content

To further refine the website’s user experience, we conducted a comprehensive content audit. Much of the content was outdated or irrelevant, which created unnecessary clutter and detracted from the site’s effectiveness. This audit allowed us to assess the value of each piece of content and determine what was essential, what needed revision, and what could be removed altogether. By performing this thorough analysis, we were able to streamline the decision-making process and effectively rethink the sitemap, ensuring the content aligned with both user needs and organizational goals.

Analyzing the Market

Next, we conducted a competitive analysis to evaluate four other non-profit websites that engage in similar work to UHSTL. This analysis allowed us to benchmark best practices and identify areas where UHSTL's site could improve in comparison to its peers. We examined factors such as user experience, donation flows, content presentation, and how effectively each site communicated its mission and impact. These insights provided a valuable framework to guide our design decisions, ensuring UHSTL’s website not only met user expectations but also stood out in a competitive landscape.

Photos shouldn’t compete w/ text.

Use icons to communicate impact data.

Video on home page to share mission

Clearly state mission on splash.

User fewer than 3 fonts.

When in doubt, do less content.

Make site accessible.

Competitive Analysis Takeaways

less is more in content paragraphs.

Use 2-3 colors max.

Add animations.

Make it evergreen.

Empathize

Ideate

Empathize

Ideate

Restructuring the Sitemap

During the ideate stage of the Design Thinking process, we focused on generating creative solutions based on the insights gathered from user research, personas, and competitive analysis. This stage encouraged us to think broadly and explore various approaches to address the pain points identified in the earlier phases. One key aspect was revising the sitemap to better reflect the users' needs and the organization’s goals.

We restructured the sitemap to streamline navigation, ensuring that key sections—such as the mission, volunteer opportunities, educational resources, and donation pathways—were easily accessible. By simplifying the layout and organizing content more intuitively, we aimed to create a user flow that not only improved the overall experience but also subtly guided visitors towards the donation page, while still catering to the needs of volunteers and community learners. This revision was instrumental in making the site more user-friendly and aligned with UHSTL’s objectives.

The original sitemap was cluttered and unnecessarily complex.

Each sitemap was tested for usability and influenced the final revision.

The revised sitemap is simpler and more focused on programs.

Empathize

Prototype

Empathize

Prototype

Wire-framing 3 Main Flows

After the ideate stage, we transitioned into wireframing, where we began translating our ideas into tangible visual layouts. The goal was to bring the creative solutions we had brainstormed into a structured format, focusing on the placement of key elements and the overall flow of the user experience. Wireframes served as the blueprint for the website, allowing us to map out essential components—such as navigation, calls to action, and content hierarchy—without getting bogged down by aesthetic details. This stage helped us validate our ideas, ensuring the revised sitemap and user flows would work seamlessly in practice before moving into higher-fidelity designs. We focused primarily on 3 main pages that would need the most comprehensive redesign- Home, Volunteer, and Donate.

Home


Home


Volunteer


Volunteer


Donate


Donate


Once the wireframes were finalized, we transitioned into the prototyping phase, where we transformed the basic layouts into interactive models that more closely resembled the final product. By building a working prototype, we could simulate the user experience in real time, enabling us to identify any potential issues or areas for improvement.

The Results

The new home page quickly gives users an overview of the problem and directs them to how they can help. Other updates include clearer CTAs and more accessible design scheme.

Original Home Page

Original Home Page

Updated Home Page

Updated Home Page

Original Donate Page

The new donate page acts more like a gift registry directing donors to different projects they can contribute to- demonstrating that the organization is in need of their support.

Updated Donate Page

The new donate page acts more like a gift registry directing donors to different projects they can contribute to- demonstrating that the organization is in need of their support.

Updated Donate Page

Original Donate Page

Original Volunteer Page

Original Volunteer Page

The new volunteer page makes it clearer that the CTA is to navigate to the portal and also includes a map to help volunteers differentiate between what farm to volunteer.

Updated Volunteer Page

The new volunteer page makes it clearer that the CTA is to navigate to the portal and also includes a map to help volunteers differentiate between what farm to volunteer.

Updated Volunteer Page

Continual Testing

Finally, we conducted usability testing to observe how users interacted with the site and made refinements based on those insights. One challenge we encountered was the lack of prior Google Analytics implementation for the site. As part of the project, we set up Google Analytics, but the absence of historical data limited our ability to assess the site's performance before the redesign.

No historical data from Google Analytics and low overall traffic to the site makes it difficult to assess success of the latest product.

The business will need to continually monitor the site's performance to be able to make calculated design decisions for future iterations. We were able to teach the stakeholders how to do this before leaving the project.

Reflection

Reflecting on this project, a key insight was the importance of balancing user needs with the organization's goals. While the initial focus was on driving donations, which is critical for any non-profit, user research revealed a more nuanced audience. It wasn’t just about soliciting donations; it became equally important to ensure that volunteers, community members, and educators felt acknowledged and supported through the site’s design. Another major learning point was the need for adaptability. Early design ideas had to be reworked once real user data came in, demonstrating that the best solutions often emerge from stepping back and embracing change. Competitive analysis also played a crucial role, offering insight into how other organizations communicate impact. This prompted a deeper consideration of how UHSTL’s site could stand out without overwhelming users. Additionally, tools like affinity mapping and personas were instrumental in driving the design process. These tools kept the project focused on what truly mattered for the end-user, ensuring that creative ideas aligned with their needs and expectations.

Back to Top