Stroud Community Agriculture Website Redesign

My design process

01 Discover

I analysed the existing website and gained feedback from the farm team and the community, which revealed the following findings.

Key weaknesses:

• Outdated content, such as the latest news story posted several years ago.
• Outdated design that did not reflect the energy behind the organisation.
• Old photos showing staff who had already left the organisation.
• Despite being a WordPress website, it was built using a clunky and difficult-to-use page builder, making site updates time-consuming.
• Some pages did not display properly on mobile devices.

Key strengths:

• An enthusiastic team willing to take on updating the content.
• A good selection of recent photographs taken by the farm team.
• A quarterly newsletter with content that could be used to update the news stories section of the website.

As an active member of the community and communication admin,
I had insights into the needs and wants of members and farm friends.

I used existing data from the members survey and a SWOT analysis conducted a couple of years back and talked to several members of the community, as well as with core group and farm team members.

Key findings:

• Some members and farm friends expressed interest in volunteering at the farm but did not know how to get involved.
• Members who visited the website noted the lack of up-to-date information.
• Members showed a keen interest in farm activities and events and enjoyed viewing current photographs of the farm, particularly of cute baby animals.
• While members appreciated their vegetable shares, some found it difficult to use the less common ones, which was one of the main reasons for ending their veg subscription.
• Members and friends expressed their support for the farm because it was local, and they knew the people who grew their vegetables.

Together with a couple of farm team and core group members, we also examined several competitor websites to gain insights into the strategies of successful community-supported farms.

Our goal was to identify the features used by these farms and determine what works and what doesn’t work in terms of user experience.

We later on used these findings to shape the site architecture and make design decisions that would improve the user experience of the SCA website.

02 Define

At this point, I wanted to ensure that everyone involved in the website redesign project was on board with the plan.

Therefore, I organised a meeting with the core group and farm team members to discuss the research findings and brainstorm potential solutions.

One of the most significant challenges was the outdated content, and we decided to tackle this issue by dividing the task of updating it between the core group and farm team members. We selected a lead QA editor to ensure the content was well-written and consistent.

Additionally, we discussed several ideas to enhance the website, including:

• A donation form to collect funds for various projects linked to a project page where potential donors could see how their money would be utilised.
• A „Meet the Team” section to put faces behind the veg box.
• A recipe corner with ideas on how to use the vegetables (with content submitted by members).
• A page with information about volunteering opportunities.

I coordinated the project to ensure smooth operation and alignment among team members. To facilitate collaboration and track progress, I created a project tracker using Google spreadsheets. Tasks were marked as completed once finished.

03 Develop

After all the content was finalised, I began designing the required pages and features.

I started with notes and sketches on paper, which gradually evolved into low-fidelity wireframes.

Once I was satisfied with the wireframes, I moved to the digital space and selected appropriate photographs and decided on the general visual feel of the website. Next, I created a simple design system that included the colour scheme, fonts, and elements such as buttons. I also created an illustration for the home page banner.

With these elements in place, I proceeded to work on WordPress on a local server. Using a starter theme, specifically Automattic’s Underscore_s, I created a custom theme that gave me full control over the design. I developed the basic page templates and then used the Gutenberg editor to design the content of each page.

04 Deliver

Once all the pages had been designed, I migrated the website to a hosting server as a staging site in preparation for user testing.

With help of the community we tested multiple user journeys, including donation payment, volunteer opportunities, and vegan recipe searches.

Some visual errors like improper column stacking on mobile and non-functional hover effects were identified. We also discovered opportunities to enhance user experience, such as simplifying the donation form and renaming some menu items for better relevance.

After resolving all identified issues during testing, the website went live. A developer assisted in pushing the staging site live and archiving the old one.

We shared the new website via social media and presented it at the Annual General Meeting, receiving a positive response from the community.