Redesign
USDA
Case Study
My Team
Sara (me) & Anastasia
My Role
UX Researcher, Lead UX Designer, and Interviewer
Project Overview:
We conducted an extensive analysis of the outdated USDA website, identifying critical user experience and interface issues. Our project involved a complete redesign aimed at replacing the outdated interface with a modern, user-friendly design. We focused on improving navigation, enhancing visual appeal, and ensuring accessibility across all devices.
Research & Analysis
Thorough user research was conducted to identify issues with the existing USDA interface, focusing on pain points that users encountered.
Proto-Persona:
Developed a proto-persona, Ashley Johns, representing a typical user of the USDA website. Ashley is a farmer from Texas with goals of sustainable farming and challenges navigating the current site.
User Path:
a) On the home page select “Tackling food and nutrition insecurity”
b) On the sidebar, select “Meaningful support”
Lastly, you have arrived to the blog post
a) On the home page select “Tackling food and nutrition insecurity”
Analyzed user paths by testing the current site, identifying key areas where navigation was complex or outdated.
Usability Test Notes:
Conducted usability tests to gather insights into user challenges, such as difficulty navigating the site, particularly on mobile devices, and lack of engagement from urban users.
Users were confused where to locate the menu on the phone website.
Clicking some links can unexpectedly change the style of the navigation.
There's no breadcrumb trail at the top, so users often lose track of how they got to where they are.
Users were confused where to locate the menu on the phone website.
Affinity Diagram:
Organized user feedback into an affinity diagram, revealing consistent issues such as navigation complexity and the need for improved accessibility features.
These sticky notes are sorted by users and marked what device the users had their interview on!
After sorting through the diagram, we found that many users had difficulties navigating through the website and improvements that should be made
Users noticed that the sites a mess, needs a way to drive people from urban areas onto the website, and add a screen-reader for those with disabilities.
These sticky notes are sorted by users and marked what device the users had their interview on!
Prioritized features for the redesign, focusing on improving layout, enhancing UI clarity, and addressing key user concerns.
Feature Prioritization Matrix:
Using this matrix, we can efficiently organize our top priorities, like improving the website layout and clarifying UI elements.
By creating this matrix, we were able to identify both the high-priority user needs and the key requirements for the government agency.
Using this matrix, we can efficiently organize our top priorities, like improving the website layout and clarifying UI elements.
Information Architecture
In this section, we focus on optimizing the navigation experience across devices through thoughtful structure and user-centered design principles. Key elements include:
Mobile Navigation Annotations
Adapted the navigation structure for mobile devices, incorporating a hamburger menu and optimizing screen layout for better usability.
Desktop Navigation Annotations
Simplified navigation by adding clear indicators for dropdown menus, relocating and recoloring the subscribe button for visibility, and reorganizing content to reduce clutter.
Navigation Usability Test Results:
Captured user feedback on navigation, leading to improvements such as the addition of breadcrumbs, clarification of dropdown menus, and enhanced menu visibility on mobile devices.
.png)
Card Sorting & Sitemap:
Used card sorting to optimize content categorization and created a sitemap to illustrate a clear, logical navigation structure.
Utilizing card sorting, we optimized topic categorization, renaming, removing, and reorganizing content for improved usability.
This sitemap visualizes the navigational structure, illustrating clear pathways to each topic
This sitemap organizes topics in a clear hierarchical order, streamlining content by removing redundancies and ensuring a logical flow for improved navigation and user experience.
Utilizing card sorting, we optimized topic categorization, renaming, removing, and reorganizing content for improved usability.
Responsive Design
01
Wireframes & Homepage Design
Developed wireframes with a modern, organized structure aimed at enhancing usability and visual clarity. The homepage was redesigned to improve navigation, featuring a revised hierarchy for menu items and a categorized footer for easier access.
02
User Testing:
User testing revealed key issues with the wireframes, including confusion between categories and focus areas, the absence of a home button in the mobile menu, non-clickable secondary menu items on desktop, and a non-functional home button. Additionally, users preferred renaming "Digital Media" to "Blogs." These insights were used to refine the design, resulting in a more user-friendly and functional interface.
03
Style Tile:
The style tile ensures consistency across the design. A green color palette and nature-themed images were chosen to represent growth, reliability, and an environmental focus. The Open Sans font was selected for its approachable and friendly feel, reinforcing the overall design's trustworthiness and accessibility.
04
Mid-Fidelity Prototypes:
These mid-fidelity prototypes mark the beginning of a simple and organized website design that embodies the project's goals, with the agricultural theme reflected in the color scheme.
Interaction Analysis
Style Guide
Based on the style tile and high-fidelity prototypes, I was able to conduct a more thorough design outline, which led to the creation of a comprehensive style guide. This guide ensures consistency across all design elements while maintaining the USDA brand and enhancing overall usability.
A/B Testing
Conducted A/B testing on two homepage designs to determine user preferences, leading to a final design that better meets user needs and offers a more accessible experience. Test B emerged as the winning design.
Hi-Fi Prototype
I'm thrilled to announce the completion of the USDA website redesign! The new site features a modern, refreshed look and is strategically organized into categories to improve navigation and user experience. Driven by user feedback and testing, the redesign prioritizes clarity and accessibility, making it easier for visitors to find what they need. The updated design not only enhances usability but also boosts the visual appeal, delivering a better overall experience for all users.
Outcomes & Impacts
Project Results and Impact:
The redesign significantly improved the USDA website's user experience, making it more intuitive, accessible, and visually appealing across all devices.
User-Centered Design:
Prioritized user needs to create a more intuitive experience. Enhanced Navigation: Streamlined the navigation structure for better usability. Responsive Design: Ensured a consistent experience across desktop and mobile devices. Accessibility: Incorporated features to make the site more accessible to a wider audience.
Let's Get
Social
