RESPONSIVE WEB DESIGN: UNITED STATES DEPARTMENT OF AGRICULTURE
Redesigned the USDA website to enhance user experience, improve navigation and provide a clearer access to agricultural resources as the current website is cluttered with too many disorganized categories and excessive white space
Preface
What is USDA?
The USDA is a federal agency responsible for overseeing policies related to farming, agriculture, forestry and food. It aims to support farmers, ensure food safety, promote agricultural trade and protect natural resources.
Project Overview
As a UI Designer, I identified the user pain points that users experience when interacting with the website and redesigned the website with a modern layout with relevant information and enhanced navigation.
Timeline -
Overall - 3 weeks
Discovery & Research - 1 week
Design & testing: 2 weeks
My Design Process
Heuristic Evaluation
Conducted thorough heuristic evaluation of the USDA homepage and few sub-pages to understand the user pain points
Proto-Persona
To form a deeper understanding of the user pain points, I conducted initial interviews and gathered information. Then I created a proto persona in order based on the insights and survey responses
Card Sorting
I gather insights on how users like the information to be provided and what’s is easy to navigate for them. Using the card sorting method, I grouped the homepage content which informed restructuring of the navigation and drop-down menu
Card sorting exercise to create a new structure for homepage navigation
Site map Creation
The new structure is based on direct user feedback and extensive usability testing across desktop and mobile devices. It addresses the users pain points by dividing the content into clearer, more intuitive categories
The new site map outlined a more logical and hierarchical structure ensuring that all content was organized in a way that made sense to the users.
Redesign Implementation
Categorization: Grouped similar options into clear and concise categories
Conciseness: Reduced the number of visible options by consolidating them under relevant categories
Visual Cleanliness: Enhanced the visual design to create a clean and organized look, improving overall usability
Sketches of the New Design
Hand drawn sketches for the new navigation
Low-Fidelity Wireframes
I created the low-fidelity wireframes with hierarchical and categorical organization in mind. F and Z-Shape patterns guide the user’s eye through the contents of the navigational bars, simple and familiar buttons promote ease of use and accessibility.
Redesign Solution: UI Elements
The redesigned USDA website incorporates a cohesive set of UI elements aimed at enhancing user experience. These elements are carefully crafted to support user interaction and provide and informative experience
The USDA logo is presented in different versions to accommodate different backgrounds. A responsive logo design ensures consistent branding across all screen sizes
Iconography
The icons chosen for the redesigned website provide visual cues and clarity. The purpose of choosing these simple icons is to allow users navigate the site and understand its functions
Button States
The button states include default, hover, focus, disabled and active. Each state is visually distinct, providing a clear understanding about the button's status
Button Styles
The button styles are designed to create a modern and clean look. Consistent styling across all buttons ensures a cohesive feel throughout the website
Color Palette
The color palette is selected to reflect USDA's identity and to create a warm and welcoming atmosphere. The earthy tones and greens symbolize growth and sustainability aligning with USDA's mission
The primary interaction color is dark green, and the secondary interaction color is sky blue. This maintains a balanced visual hierarchy and ensure actions are intuitive and clear
Color Gradient
The color gradient adds depth to the overall layout. It is applied strategically to the backgrounds, creating a dynamic look/ The gradient blends complementary colors that align with USDA identity and standards
UI Style Direction
The style direction is earthy, simple, and inviting. Lots of earth tones, bright and warm colors with an agricultural and farm feel.
Typography
The font is simple clean and straightforward. It focuses on readability and ensures that users can easily absorb information
H1 - Roboto Slab (Bold) - 23 PT
Subtitle -Roboto - 18 PT
H2 - Alatsi - 32 PT
Subtitle - Abaya Libre (Semibold) - 28 PT
Usability Testing
To evaluate the effectiveness of the redesigned website, usability tests were conducted with a diverse group of participants. This involved four tasks that reflected the common user goals.
Test Scenario
Specific tasks were developed using the guerilla testing plan. The participants were asked to perform those tasks and navigate through the mid-fidelity wireframes
Testing Sessions
The usability testing sessions were conducted in person and through Zoom. The goal was to closely observe their interaction with the new navigation and get their feedback
Analyze the Results
The feedback of the participants was thoroughly reviewed to identify patterns, common issues and areas where navigation could be improved
UI Design
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the brand’s values and message
Conclusion
The redesign of USDA marks a significant step towards enhancing user experience, accessibility and engagement. Through comprehensive user research a more intuitive interface has been developed that meets the needs of diverse audience
01
By simplifying navigation and optimizing the design, we have made the website more accessible for various devices including mobile, desktop and tablet
Paragraph - Abhaya Libre - 28 PT
Quote Style - Roboto Italic - 18 PT
Illustrations
The images and illustrations are curated to depict the sustainable practices and agricultural landscapes
Next steps
To ensure the continued success and impact of the redesigned website, the following next steps are planned,
We will conduct an extensive usability testing to gather valuable feedback from users, ensuring that the new design addresses their needs and preferences
Based on user feedback, we will continue to iterate and enhance the design. Our goal is to create an optimal user experience that aligns with the USDA's objectives
Developing a comprehensive strategy will be key to maintaining relevance and engagement
02
Accessibility features such as new color contrast, clear iconography, distinct button styles and engaging illustrations have implemented
Key Learnings
Engaging with users early in the design process provided valuable insights into their needs and behaviors
Regular updates and iterations are essential to maintaining high accessibility standard
Ensuring that the website is intuitive and accessible to all users is a continuous process
THANK YOU FOR READING MY CASE STUDY