Website Redesign
As a major resource hub for new and underrepresented farmers, Michigan Food & Farming Systems needed to revamp their existing website to allow for better resource sharing and an updated UI. In this 6 month redesign, I worked with a fellow designer to take this project from research through design and build, utilizing tools like Figma, Jira and Wordpress to bring it to launch
Role
UX Designer
Client
Michigan Food & Farming Systems
Team
Jack Rasmussen
Jair Oballe
Timeline
6 Months
.png)
Business Need
The business knew their website wasn't operating at full potential, but they didn't know where to start or how to fix them. They also had previously created a design system, but were not sure how to implement it as they moved their site from Wix to Wordpress
What Did I Do?
I started by leading UX research & an audit on their website. After presenting my findings, I pitched them on keeping me on for the full redesign. They accepted and I started on the design phase on Figma before implementing these designs on Wordpress
Impact
I redesigned and built over 20+ individual pages and used simplified layouts to reduce page length by up to 80% and unify the global navigation from 8 categories to 4, all based on research and working within their pre-set design system
Overview
To optimize the website layout so that new and existing users can easily access information and continue trusting MIFFS as a reliable hub for resources, support, and events in the agricultural space
Business Need
Many users are historically underrepresented farmers who need access to the free information provided on this site. They need to easily find the most relevant information without assistance on desktop and mobile platforms
User Need
Research
Conducted feature analysis of 12 agricultural nonprofits & MIFFS Partners specifically looking at how they organized global navigation & educational resources
Competitive Analysis
.png)
Findings
Takeaways
73% of competitors utilize filters / search bars to make it easier to find their educational resources
92% of competitors use 6 or less categories in global navigation so users know where to go
Conducted heuristic analysis of existing website. Areas of strength were in error prevention while areas for improvement were in user control and freedom, consistency & standards, and minimalist design
Heuristic Analysis
.png)
Findings
Takeaways
Navigation does not indicate where a user is & does not allow them to return to home
Large bodies of text made information difficult to consume (particularly on mobile)
Conducted open card sort with 16 participants. Pulled 21 important links from MIFFS site & asked users to sort them into most logical groups to help inform recommendations for global navigation
Open Card Sort
Findings
Takeaways
Users created 64 total categories with a mean of 5 categories each
Due to lack of context in card sort, some users grouped things like "MIFFS Publications" with "About". We moved it to "Resources" to better align with the other content
.png)
User Interviews
Interviewed 4 key stakeholders from MIFFS to identify stakeholder needs & common uses for website
Question Samples
Takeaways
100% of users cited Resources as the most important area of the site
50% of users claimed the home page lacked purpose
25% of users expressed concern about farmers accessing information via mobile due to text heavy screens
Design
MIFFS originally only asked for a website audit. However, I offered to create mockups for the home and resources page to demonstrate how they could put my ideas into action. After seeing the mockups, MIFFS asked me to move forward with a full redesign & build
For the redesign, I focused on 3 main areas:
1. Improving the process for finding educational resources
2. Simplifying global navigation
3. Modernizing overall UI
Now What?
User Flow
.png)
.png)
Task: Find a resource
Key
Design Process
Home Page: My main goal with the home page was to give it a sense of purpose and highlight the more simple navigation that I created based on user research and card sorting exercises
Old Website
High Fidelity Wireframe
Final Website
.png)
.png)
.png)
Resources Page: My main goal with the resources page was to make it easier for users to find relevant resources by organizing resources by category and changing the layout to reduce the length of the page by 80%
Old Website
High Fidelity Wireframe
Final Website
.png)
.png)
.png)
Final Design
Impact
Resources page transformed from list of 134 item column into grid layout, decreasing page length by 80%
Navigation is improved by cutting categories down from 8 to 4 and implementing a home button in the logo