MIFFS' Website Audit: Faster Access to Critical Resources
What I did: C&C Analysis, Heuristic Evaluation, User Interviews, HiFi, built new site on WordPress
Project Duration: Four months
Tools I used: Figma, Google Suite, my brain
The Problem
MIFFS caters to a variety of stakeholders and partners that have difficulty navigating their site and accessing necessary resources. MIFFS staff do not believe their current site properly reflects their mission statement.
What is MIFFS, and what did we start with?
MIFFS stands for Michigan Food and Farming Systems. Their mission is to "connect beginning and historically underserved farmers to each other and resource opportunities; ensuring social justice, environmental stewardship, and profitability." They do this through an enormous digital resource collection, identity-based networks, and educational programs led by staff and University of Michigan partners.
Here was their website when I started the project:
“I just don’t feel like the home page reflects who we are as an organization” - MIFFS employee
What MIFFS wanted in our partnership
I found a posting from Michigan Food and Farming Systems (MIFFS) on Catchafire, a site that connects nonprofits with freelancers who devote time to assist them pro bono (I saved them $4,762!). The organization asked for a website audit to identify usability issues and priority areas for an upcoming site redesign.
The request aligned with a heuristic analysis, but I wanted to go above and beyond for the organization and undergo several facets of the design process for their final deliverable. MIFFS’ incredible employees and their mission made that decision a simple one.
How do other nonprofits structure their site?
Agricultural nonprofit work is a new space for me, so I started by analyzing competitor websites to determine the following:
-
What elements live on the homepage?
-
How are their resources organized?
-
How do they structure their navigation?
This analysis of 12 different agricultural nonprofit sites yielded the following takeaways:
of competitors nest additional information using buttons and dropdowns.
of competitors utilize filters or a search bar within their resources page.
of competitors have 6 or less categories in their main navigation.
competitors use their logo as a home button.
Qualitatively, I also noticed a few trends that made competitor’s site layouts more intuitive:
-
Site pages (excluding resource pages) contain less than 4 links to other pages.
-
Sites do not include individual programs or events in the navigation.
The MIFFS site presented a series of usability issues
My C&C stats validated some of the issues I saw on the MIFFS’ site during my heuristic evaluation. My highest priority findings, utilizing Nielson Norman’s methodologies, were as follows:
Screens were loaded with writing, some of which repeated itself or existed on other pages.
MIFFS’ education resource section contains 134 resources displayed in 1 column as a long vertical scroll.
They have 8 links in their main navigation and no way to return to the home page.
Lack of hover states for links and indicators on pages make it difficult to know what you can click on or where you are in the site.
In all, 5 of the 10 categories were labeled as major usability issues!
I used a card sort to inform new information architecture and navigation links
The heuristic evaluation and industry standards showed me that MIFFS had too many main navigation links and unintuitive dropdown categories.
For example: “What We Do” dropdown does not contain their programs or their farmer networks.
Thus, I created a card sort to see how users would group components of the MIFFS website. Due to budget and timing constraints, I enlisted a mix of MIFFS stakeholders and my personal network to assist me.
My 16 participants showed me that all resources should stay grouped together, but programs from the USDA and MIFFS (like Heroes to Hive) were seen as separate entities. Users also grouped all MIFFS-related content together, ranging from their newsletters and publications to how to become a member and their About Us page.
MIFFS partners have difficulty locating key resources
My card sort results had to be taken with a grain of salt, as participants did not have full contextual knowledge of what MIFFS does and offers.
Therefore, I took time to interview two partners and two staff members to gain further insight on how they use and feel about the site. Here were 3 key takeaways:
Showing off our ideas with design mockups
After compiling all this research, I began designing potential ideas for handoff. I started with the navigation, as it would dictate the structure and content of my site pages. I leaned on my Card Sort and Interview results to determine these groupings.
The proposed header, consolidated to just 3 links. About Us gives you a broader understanding of who MIFFS is and the things they put on for their community.
The Resources link now contains all of its categories within the dropdown for faster user flows. The Español link was nested here.
Finally, we have the Get Involved section, which now includes employment opportunities, sponsorships, and programs users can enlist in. I also nested a few items from the old nav into here.
Impact of proposed changes:
-
User goals are now properly categorized based on the action they wish to take (learn about MIFFS, view a resource, or get involved)
-
Users can return home by clicking the logo and search for specific resources
-
The language toggle is still prominent for Spanish-speaking users
-
The donate button and social media icons were moved to the footer, following industry standards and further decluttering the main navigation
Walkthrough of three screens (mockups)
Next, I moved on to entire pages. I focused on the landing page to ensure that the MIFFS mission would be properly displayed and the resources page to show how large amounts of information can be organized. Here is my walkthrough of 3 mockup pages:
Too long, didn't watch - synthesized updates
Home Screen
The new home screen now centers 3 of MIFFS’ most important aspects: who they are, their resources, and their programs. Users can switch between these to read a brief blurb before navigating to the respective page. Beneath it are their networks. Components, variants, and interactions were created for all buttons on Figma so hover states would be consistent across the site. These changes let users understand who MIFFS is and what they offer right from the start of their user flow.
Resources
Our other area of focus was the resources section. Here, I created a skeleton for the landing page. The top 3 resources would be showcased, and the rest could be seen after clicking “View All.” Descriptions for each resource are nested away to reduce clutter. I came up with a few categorization titles, but are leaving it to MIFFS staff as the content experts to create the final subgroups.
Once clicking “View All,” a page now featuring filters would appear to speed up the resource-finding process. Similarly to the landing page, descriptions are nested away.
Next steps, final recommendations, and reflection
With more time and monetary resources, the next step would have been to test our mockups with users and see how long it took them to find a resource on our redesigned screen versus the current site layout. These metrics could become compelling support for our design choices and formed the basis for the next iteration of the design.
I gave the team some parting recommendations while handing off these deliverables.
-
🎙️ The team should discuss my content decisions for the landing page and whether a category should be swapped based on site metrics or a reflection of the organization.
-
🏷️ As content experts, I recommended they make time to set up tags for each of their resources to allow content filtering, which could simultaneously create subgroups within larger resource areas like “educational materials.”
-
💬 Besides some translation tweaks and image placement, the last big recommendation was to decide what the most important text on each page is, and to either cut or nest the rest.
This was my first project that focused more on research instead of design as the final deliverable, and I really enjoyed it. MIFFS partners and staff were very supportive and willing to complete my card sort activity and participate in interviews. It showed me the value of recruiting participants that are passionate about the product to ensure both high participation and meaningful, genuine responses for my data.
I was reminded that user feedback is nuanced; it can validate your previous ideas, uncover new ones, or challenge preconceived notions. When card sorting challenged my personal groupings, it caused some initial navigation rearrangement which was then further challenged by data from user interviews.
It felt great to know that my donated time could be so impactful - employees kept expressing gratitude during the presentation, and Catchafire gave me a little shout out on their site!