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

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