A WordPress website redesign that better connects farmers, eaters, and partners with the Alliance
Illinois Stewardship Alliance, which advocates for a just and regenerative food and farm system in Illinois, was long overdue for a website redesign. I led a design sprint where I extensively analyzed the Alliance’s goals and their existing site’s performance. From that research, I developed a prototype and conducted further testing to fine-tune and prove my design. The final deliverable was a design system (based on the Material Design guidelines) and an extensively annotated prototype for desktop, tablet, and mobile breakpoints.
Role: Project lead, UX/UI designer
Tools: Google Analytics, Typeform, Airtable, OptimalSort, Figma, After Effects, Zoom
Impact
A WordPress website redesign that better connects farmers, eaters, and partners with the Illinois Stewardship Alliance
An design system and annotated prototype that is easy for a website developer to implement
Online engagement benchmarks that set the pathway for future successes
Deep dive
Discover
Business analysis
An effective website needs to advance an organization’s business goals as well as meet user needs. To start designing the Alliance’s dream website, I reviewed the organization’s strategic plan, marketing and communications strategy documents, and prior work with designers. From that review, I identified the following organizational goals that I then confirmed with the client:
- Become the go to organization for creating a just and regenerative food and farm system in Illinois.
- Establish a robust network of member farmers, eaters, and partners.
- Build working relationships with Illinois policymakers
User personas
With a clear understanding of the Alliance’s goals, I developed user personas for three target users that focused on their goals, motivations, and target behaviors.
Regenerative farmers/producers
Target behaviors
- Sign up for the newsletter
- Take action on an issue
- Register for an event/training
- Become a member
- Make a donation
Eater advocates
Target behaviors
- Sign up for the newsletter
- Take action on an issue
- Become a member
- Make a donation
- Find local farmers/producers
Policymakers
Target behaviors
- Sign up for the newsletter
- Register for an event/training
- Contact the Alliance after reading about their agenda and track record
Heuristic evaluation
I conducted a heuristic evaluation of the existing WordPress website to identify areas for user research. The pain points centered around the site’s densely packed magazine-style two-column layout, which made it difficult to discern the hierarchy of the content. The navigation labels used jargon, making it difficult for first-time users to navigate. With so many of the issues centering around the site’s information architecture, I conducted a card-sorting exercise to develop a more intuitive site structure.
Usability research
I conducted usability research on the site that further confirmed my hypothesis that the site’s performance could be radically improved with a more well-considered approach to the site’s information architecture. I observed all users spending upwards of 30 seconds browsing the primary menu and scrolling the entire homepage when they were unsuccessful at using the menu to navigate. Unfamiliar terms like “action alert,” “directory,” “policy work,” and “conservation work” caused users to abandon tasks.
Website analytics
A look at the existing WordPress website’s performance on Google Analytics provided the quantitative insights to accompany the behaviors I had already observed with users. Users were spending more than half of their time scanning the homepage. And two-thirds of users were dropping off of the site before reaching any other page. By cross referencing the results of the heuristic evaluation, usability research, and web analytics, I developed strong evidence to support bringing as many of the key tasks to the homepage as possible and to optimize the labeling of the menu items.
Survey
With a clear understanding of the problems facing users on the existing site, I created a brief survey on Typeform to gain a better understanding of where users get news and updates about local food and farming. 89 users responded, providing me with a list of more than 20 competitor sites to examine for inspiration for the redesign.
Competitive analysis
I conducted a competitive analysis to examine ways that similar organizations encourage users to take action on food and farm policy issues, register for events, find local farmers and producers, and track their legislative agenda and achievements. These comparisons later allowed me to generate solutions for users’ key tasks in the first prototype.
Card Sort
I created a card sorting exercise testing 30 navigation labels using Optimal Workshop. 22 users completed the test, offering key insights that allowed me to pare down the top-level menu options from seven to four options (“eat locally,” “laws and policies,” “for farmers/producers,” and “trainings and events”). These new task-focused labels replaced department-focused labels, taking into account that farmers, eaters, and policymakers would need to easily access different information on the site.
Define
User flows I developed user flows for each of the key tasks users would need to perform on the site in order to create a frictionless path to their target behavior.
Sitemap
I created a sitemap to outline the key web pages that would need to be built for the prototype.
Mid-fidelity prototype
Synthesizing the research, I designed a mid-fidelity prototype with more direct paths for donating, becoming a member, signing up for the newsletter, taking action on a policy, and finding local farmers/producers. The prototype also featured a new layout for the header and footer navigation, as well a new interactive timeline for the Alliance’s agenda and achievements.
Design system
I started developing the design system (based on Material Design guidelines) concurrently with the mid-fidelity prototype to save time on approvals. This allowed me to quickly receive client feedback on functionality and visual design in one meeting while keeping the two discussions separate from each other.
Iterate
High-fidelity prototype
With client feedback on the mid-fidelity prototype and the design system, I created a high-fidelity prototype and conducted a second round of usability research. Users had trouble figuring out how to return to the homepage and used the back button rather than clicking on the logo. So I added a homepage link to aid in navigation. Users also had difficulty figuring out how to take action on a specific issue. So I created a new call to action button type for action alerts. I also added an action alert signup button to the agenda and achievements section to encourage direct signups from that section rather than writing an email to a staff member.
Next steps
I facilitated a smooth project handoff with the client and their web developer. They are planning to launch the new site in 2021.