2024
Case Study
Figma Prototype
Background
The U.S. Department of Agriculture (USDA) website is a critical resource serving a diverse audience, from individual farmers and families to large corporations like Whole Foods. Users rely on the site for staying informed, accessing crucial data, and completing submissions. While functional, the existing site had significant opportunities for improvement in accessibility and information architecture. Our goal was to redesign the expansive website to enhance its value and usability for the broader public, tackling existing design inconsistencies and an un-engaging aesthetic.
Core problem
User research and analysis revealed significant frustration with the existing website. The core issues were:
Difficult Navigation & Information Discovery: User interviews highlighted common complaints about excessive clicks, difficulty finding the right section, and a confusing form submission process.
High User Effort & Abandonment: Our analysis showed that 90% of users required 5-8 clicks to reach their goal, and 10% abandoned their search altogether due to frustration.
Outdated & Inconsistent Design: The site suffered from an outdated aesthetic and inconsistent design elements, which made organizing information across the vast platform a significant challenge.
Our Solution
We proposed and executed a comprehensive, user-centered redesign focused on modernizing the platform and simplifying the user journey.
Progress & Implementation:
User-Centered Research: We began with user interviews and card sorting exercises to understand pain points and restructure the site’s information architecture for a more intuitive and efficient navigation.
Iterative Design & Testing: We developed multiple design iterations, conducting user testing throughout the process. A/B testing was crucial in making key decisions, such as selecting a white background with dark text (preferred by a 60-40 margin) to optimize for accessibility and contrast.
Atomic Design System: To ensure long-term consistency, we implemented an atomic design system methodology. This included a new logo, a revitalized color palette, and a more open, modern layout that provides a clear guide for future adjustments.
Strategic Layout: The final design was heavily influenced by user feedback, which prioritized placing the department directory near the top of the page for quick access and positioning popular topics lower down.
Key Improvements:
Enhanced Navigation: The global navigation was restructured to minimize clicks and streamline the user journey.
Streamlined & Modern UI: A clean, uncluttered user experience was created by grouping related sections, providing clarity and structure.
Improved Search & Visibility: A refreshed, visually appealing design system enhances both usability and user engagement.
Streamlined Access: The final design includes a prominent hero section with clear calls-to-action and a user login option for future transactions.
New navigation for more efficient browsing, searching, and login options.
Proposed design system with Atomic Design approach: typography, colors, logo, animations, cards, responsive design, button, and sample images.
Finalized desktop prototype with hero slideshow options.
Responsive design featured for mobile devices.
Results and Impact
The redesigned website was met with positive results, demonstrating a marked improvement in user satisfaction and efficiency.
Reduced User Frustration: Post-launch evaluation showed that users were twice as likely to find their desired location more quickly.
Positive Qualitative Feedback: 90% of users commented positively on the updated page's improved aesthetics, describing it as "nice" and "open."
Enhanced User Experience: The successful restructuring and visual refresh led to a significant decrease in user frustration, validating our user-centered approach and delivering a more valuable public resource.