Timeline: 5 weeks
Role: User Researcher and Designer
Tools: Figma, Adobe XD
Collaboration Tool: Trello, Zoom

Project Overview

As a UX Researcher and designer, I identified the user pain points that users experience when interacting with the website and redesigned the website with a modern layout, visually appealing color theme, well-structured drop-down menu and organized information.

User Research & User Interface Analysis

Heuristic Evaluation

An in-depth evaluation of the website indicates a lack of proper structure. The categories are not clearly defined and there is excessive use of white space.

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

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

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

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