top of page

U.S. Department of Agriculture

case study cover usda.png

Overview

Objective - To analyze the government agency website's content structure and navigation, and execute a responsive hi-fidelity redesign.

​

  • My Role - UI Designer, Information Architect

  • Team Size - 1 (solo project)

  • Length of Project - 4 weeks

  • End Product - Hi-fidelity prototype in AdobeXD

​

Problem -

The website's site map is not intuitive, which is increasing users' time to retrieve the information they sought to find.  How might we make it easy for people to achieve their tasks and as a result increase customer retention?

​

Solution -

Reconstruct the sitemap based on user tests and update the UI layout.

​

End Results -

  • 90% task success rate in finding resources using the top navigation bar

  • 5% of users said the website was easy to navigate

  • 88% of first-timers had a clear understanding of who USDA is from their homepage

​

​

UX Research

Research Plan - 1x1 interviews with 8 participants on mobile and desktop. The goal was to gain insight into people's experience when retrieving information about a grant on the current web design.

​

Objectives -

  1. Understand the user's behavior while navigating through the site

  2. Discover pain points users face when navigating through the site

  3. Find out how users feel about the current web design

  • 6/8 - used the top navigation bar 

  • 6/6 - could not find the "Grants & Loans" page 

  • 4/6  - did not notice the secondary navbar in the mobile view

  • 8/8 - are uncertain who USDA is from the home page

  • 6/8 - feels the deadline for the grant submission should be prominent

UX Insight -

People had difficulty finding grant information due to the complicated navigation structure.​

​

This problem makes it difficult for potential applicants to feel successful, which results in low customer engagement and retention.

​

I believe people will use USDA more often if the information is quick to retrieve. This could be done by redesigning the site map and interface. Doing this will increase the task success rate and increase customer retention.

Creating a Persona

My Approach - The focus was the user flow to the Farmers Market Program. I reviewed the Fiscal Year Description of the Funded Project from 2018 to 2021. I gathered the data to understand their background, the projects they are starting, and their motivations for applying for this grant.

 

Meet Davey Watson -​

USDA Proto Persona.png

Ideation

Game Plan- Brainstorm solutions that will improve the user's experience. I kept Davey's needs, wants, and pain points at the forefront of my UX strategy sessions.

​

Davey's Scenario

Davey Watson, a full-time employee and a family man, wants to increase produce-to-consumer markets for local farmers and needs financial help to execute his dream.​

​

He is visiting the USDA website to apply for a grant that will financially help him get started.

​

When navigating through the site, Dave is frustrated with the difficulty of finding the grant page and the specific grant he wants to apply for.

​

How might we...

  1. help Dave find the grant quickly?

  2. make the application information easy to digest?

Design Solutions - We worked together to ideate and prioritize solutions based on impact and effort. 

​

After running ideation sessions, I decided to focus on the following design solutions-

​

  • Redesign the site map

  • Utilize cards to break up wordy content

  • Make grant application deadline prominent

  • Add mission areas to the home page

Style Guide -

The style guide was updated to help craft a consistent design system before getting into the hi-fi prototype.

USDA_Style Guide_final.png

Prototype & Test

My Approach - First, I established the UI for the primary and secondary navigation. Once that was completed, the content layout was decided.

​

Objective -

  1. Come up with an innovative design concept that users can pick up quickly and is easy for developers to execute

  2. Create a responsive secondary menu design so that valuable information is not missed in the mobile view

Primary Navigation Key Takeaways - Participants like the idea of the op navigation showing on the mobile view, however the icons were not obvious to what the topic was prior to clicking it

Frame 2.png
Frame 1.png

Second Navigation Key Takeaways - The secondary menu on mobile was tough because I had to keep in mind how the design would respond to a bigger screen

  • Will it move to the sidebar?

  • Was it doable for developers?

Now on to content layout testings - I discovered what was aesthetically pleasing for people for people as well as designs would be responsive.

​

Insights

​

  • People don't need a home nav anymore. They understand that they can get to the home page by clicking the logo

  • Participants were not a big fan of the haning-off-the-card style

  • Z-patterns usually stack on top of each other when moved to a smaller screen for visibility

Final Product

Desktop Prototype - 

​

  • The redesign is informative and neat

  • The content is grouped in cards making it easy to digest

  • Communicated who USDA is

  • Increase task success rate when using the top navigation bar
     

Mobile Prototype - By utilizing cards to organize the content, I was able to create a simple responsive design that translates easily to a variety of screen sizes.

 

Usability Findings -

Participants like the new UI navigation, but it did take them a while to notice to swipe right to see more.

 

What can I do to communicate to people that they need to swipe right to see more of the navigation bar?
 

  • Iterate mobile navigation based on findings

  • Continue to do usability testing

  • Implement micro-interactions to enhance the user experience

bottom of page