The Sustainable Farming Association
Responsive Web Redesign
Client:
The Sustainable Farming Association advances environmental stewardship, economic resilience and strong, diverse communities through farmer-to-farmer networking, education, demonstration and research. The SFA was formed as a response to the 1987 Land Stewardship Project. Farmers wanting to learn how to care for the land and the planet needed a way to share knowledge with one another. And from this, a farmer-to-farmer education network was born.
Mission:
As a team, our mission is to give FSA ideas on how to redesign their current website in order to draw users in and to make it more welcoming for anyone visiting.
Plan:
Interview stakeholders at SFA. Evaluate the current SFA website in order to highlight pain points. Conduct a comparative analysis of similar websites within the farming space to better understand what is important and what is not. Using zoom, perform several usability tests as well as contextual inquiries to further understand what users are looking for in the redesigned SFA website. Create personas and user journey maps that reflect what users are experiencing from discovery of FSA, to navigating through the site. Wireframe low, mid, and high-fidelity wireframes that represent user feedback and provide SFA with a redesign plan moving forward. Annotate the wireframes and put them into a presentation for the client. Then present in front of them and give them the tools necessary to make the change they desire.
My Role:
UX Researcher, UX Designer
Methods:
Stakeholder Interview
Kan Ban Board
Card Sorting
Low-Fidelity Wireframes
Team:
Brennan Kempston (Me), Mar E Townsend, James Sauer, Jared Burseth, Kevin Peterson
Tools:
Pen and Paper
Google Docs
Zoom
Excalidraw
Figma
Keynote
Creating an inclusive and responsive design for SFA and their stakeholders.
SFA goals:
Advance environmental stewardship
Protect and enhance food-producing resources
Advance regenerative agriculture principles
SFA Users:
Farmers looking for tools and resources that will help them
People looking for agricultural events
Initial Steps
Stakeholder Interview and Comparative Analysis
Stakeholder Interview:
My team had a stakeholder interview interview via zoom with two of the main people who work for SFA. The information they provided helped us put together a scope of work for the project and also helped us better understand what SFA wants to change or implement moving forward. Takeaways from the stakeholder interview.
The SFA site is twelve years old and has not had a remodel since it was made.
Stakeholders wish for the site to be useful and for it to provide a sense of community for visitors while also being a tool for sharing technical skills and resources. They also want the site to be easy or navigate.
Stakeholders want my team to “Do justice to all the good work” that is entangled within the crowded and often confusing hierarchy.
I created a Comparative Analysis spreadsheet that included several other farming websites. Main takeaways from the comparative analysis:
Several of the sites had too much information within the header.
Important pages are not as accessible as they should be.
Many sites had either too much or too little on the homepage.
Site Map
We came up with a site map that represented the current SFA website infrastructure. This gave the team an idea of just how cluttered and disorganized the SFA site actually was.
Usability Testing and Contextual Inquiries
Moving forward, the team got in touch with several farmers and people who use the SFA site. We set up scheduled calls with each of them and created a script to read from in order to stay on task and get as much data as possible. Once these interviews were complete we went back into a FigJam board to synthesize the data.
Main takeaways and quotes from the testing and inquiries:
“Not a lot of information on the homepage.”
One user stated that because the the site is too hard to navigate, that she resorts to googling specific pages she is looking for within the SFA website.
“It gets a little overwhelming.”
Card Sorting
My team was able to attend an in-person event (Returning Livestock to the Land). This event was about restoring ecological health to neglected, graze-obligate lands with livestock. There were goats in a field cleaning up the unwanted overgrowth by eating it! During the event we listened keenly to what farmers had to say. Once it was over, we were able to set up a table and perform a card sort with several participants who were eager to categorize the cards into sections and then name them for us.
Below is a screenshot from two of the card sorts we performed. From this card sort, we synthesized the data and came up with five main categories for the header of the redesign. The first bullet are those five categories. The second bullet are secondary options that would be found above main categories within the header.
Events, Resources, Media, About, and Contact.
Calendar, Search, Chapters, Donate, Join, Language, Login.
User Personas and Journey Maps
Personas
We came up with two personas, Kay, and Matteo. These personas represented the users groups that we wanted to focus on.
Kay is searching for information and possible resources for new farmers. She has goals such as: finding accessible resources, learning more about getting started, and finding a community. She also has frustrations while navigating the current SFA site: the site is immense, there is not a way to search for information, and there is no clear direction for new users to go.
Matteo is an avid learner and loves the community feel of going to different events. He also has goals: checking out upcoming events, gaining insight into the upcoming events, and adding events to his calendar. His frustrations are: the homepage does not offer upcoming information, he is unable to find events nearby, and there are no descriptions under the events.
User Journey Maps
Kay’s Journey Map
The journey maps represent both Kay and Matteo’s experience within the current SFA website. Click on the button below to view their experience from start to finish.
One major focus of our redesign was accessibility. SFA stakeholders wanted to build a site that was more accessible to all of its users. We researched the Web Content Accessibility Guidelines, used screen readers and other tools, and consulted with accessibility experts to build a guidebook for SFA, detailing the most important points to keep in mind. What we found in this realm supported our other findings. We decided to create both an accessibility guide and a web style guide for SFA. Their aspirations of designing an entirely new website that will help their users was something that we wanted to help with as much as possible. These guides are recommendations for SFA on how to make their site more accessible, readable, and welcoming to their users. Both guides are in the buttons below. Some of the major accessibility/web style issues encountered within the current site are:
A combination of difficult navigation and unclear page titles made the site inaccessible for users.
Every local chapter head has the ability to add pages and information to the site which leads to lack of consistency.
The old site colors were sometimes used for text, but didn’t pass accessibility standards.
Fonts are not updates in a clean, easy to read, or modern visual style.
Guides
High-Fidelity Annotated Wireframes
My colleague James and I worked on the visual design. We started by creating mid-fidelity wireframes in Excalidraw before moving to Figma for the high-fidelity designs. James handled the web part and created several card templates and I was in charge of creating the mobile designs. Together, we collaborated and came up with what we thought were the best designs possible for SFA and their users. I also designed a brand new footer on mobile and web because they did not have one in their current website. Transferring these designs into mobile form was a meticulous process and one that I embraced. A lot of changes were made during the process, below are the high-fidelity annotated wireframes.
Screenshots of the responsive design for mobile phones
Client Presentation
The presentation included everything mentioned in this case study. As a team, we created an in-depth presentation that highlights all of our research, data synthesis, guidelines, and designs for SFA. We then presented it to a number of stakeholders at SFA as well as our colleagues. Below are screenshots of this presentation followed by a clickable link that contains the entire presentation.
Slides from the presentation.
Conclusion
There is a lot of opportunity for SFA to better their website. Making it more accessible, inviting, and modern will help draw more users in. My team and I have provided them with the necessary tools moving forward and we are very excited to see what is in store for SFA in the future and wish them the best. In conclusion, new visitors to the site should be able to understand:
The SFA and its mission.
Be able to easily find the resources and events they are interested in.
And visitors should feel empowered to learn more, and excited to become a part of the community.