USDA
Government Agency Redesign and
UI Redesign Case Study
Authors:
Amelia Allen, Kyle Gare and Elaine Martinez,
Christiaan Montgomery
1
Overview and Methodology
2
Project Overview: Our objective was to redesign a government agency website’s IA and UI Navigation for both mobile and desktop.
We chose the US Department of Agriculture (www.usda.gov) as our project site, and over 4 weeks we completed a responsive hi-fidelity redesign of the homepage and associated pages concerned with a chosen user path, as well as a completed style guide for the redesigned site.
Roles: UX Designers (All), UX Researchers (All), Style Guide (Amelia Allen), Prototyping (Christiaan Montgomery, Kyle Gare, Elaine Martinez)
Tools Used: Figma, Adobe CC, Maze.io, Google Suite
Table of Contents
Part I: UI Design Analysis
Part II: IA and UI Navigation, Prototyping
Part III: Homepage UI Design and Testing
Part IV: High Fidelity Prototyping, Iteration and Style Guide
Next Steps
3
Part I
USDA Website
UI Design Analysis
4
Proto-Persona
01
5
We began the research process by creating a user persona for someone who would use the USDA website. Our persona centered around organic farming as a topic, as this is a category within the USDA jurisdiction.
Proto-Persona
6
User Paths
02
7
We created typical user paths to show our user’s path as she navigated from the homepage to learn about different aspects of organic farming; how to become organic certified and learning about crop insurance.
User Path 1: Become Organic Certified
8
User Path 2: Locate Organic Crop Insurance
9
Usability Tests
03
10
We conducted 5 user interviews in order to discover how users navigate through the USDA website to locate information about organic farming.
Usability Tests
11
Task 1: Navigate to Organic Certified Landing Page
Task 1 Results: 70% Success Rate
Task 2: Navigate to Organic Crop Insurance Landing Page
Task 2 Results: 80% Success Rate
“There are too many options. Now I have to read each of these links very carefully.”
-Chris, Interview #2
“I’m seeing at the top there’s a few options but they’re kind of too generic,
I don’t know where to start”
- Elisa, Interview #4
Usability Testing - Priority Matrix
12
We placed insights from our usability testing results into a Priority Matrix to understand the priority and feasibility of the user vs. the USDA. This quadrant features the highest priority for the user and highest feasibility for the USDA will be where we focus our redesign.
User Test Recordings
13
Heuristic Analysis
04
We used our user testing results to annotate the web pages that were featured in our user testing tasks. These annotations will guide us as we begin to re-design the site and improve the usability.
14
Heuristic Analysis - Web Page Annotations
15
USDA Website - Organic Landing Page
Moodboard and Assets
05
16
UI Inspiration, UI Patterns, Government Agency inspiration
Moodboard: UI Samples
17
Moodboard: UI Patterns
18
Moodboard: Government Agency
19
Part II
IA and UI Navigation, Prototyping
20
Navigation Analysis + Tests
01
21
We incorporated our user testing results to annotate the web pages that were featured in our user testing tasks. These annotations will guide us as we begin to re-design the site and improve the usability. The user tests allowed us to again prioritize the features that we will implement in our re-design.
Heuristic Evaluation: Site Navigation - Desktop
22
1. Homepage
2. Homepage w/ dropdown
3. USDA Organic Page
4. Getting Certified Organic
5. Crop Insurance
Heuristic Evaluation: Site Navigation - Mobile
23
1. Homepage
2. Homepage w/ dropdown
3. USDA Organic Page
4. Getting Certified Organic
5. Crop Insurance
Usability Tests - Desktop
24
Task 1: Navigate to Organic Certified Landing Page
Task 1 Results: 70% Success Rate
Task 2: Navigate to Organic Crop Insurance Landing Page
Task 2 Results: 80% Success Rate
“There are too many options. Now I have to read each of these links very carefully.”
-Chris, Interview #2
“I’m seeing at the top there’s a few options but they’re kind of too generic,
I don’t know where to start”
- Elisa, Interview #4
Usability Tests - Desktop
25
Task 1: Navigate to Organic Certified Landing Page
Task 1 Results: 70% Success Rate
Task 2: Navigate to Organic Crop Insurance Landing Page
Task 2 Results: 80% Success Rate
“There are too many options. Now I have to read each of these links very carefully.”
-Chris, Interview #2
“I’m seeing at the top there’s a few options but they’re kind of too generic,
I don’t know where to start”
- Elisa, Interview #4
Usability Tests - Mobile
26
Task 1: Navigate to Organic Certified Landing Page
Task 1 Results: 75% Success Rate
Task 2: Navigate to Organic Crop Insurance Landing Page
Task 2 Results: 75% Success Rate
“Well, I’m trying to find the search bar...”
-Beth, Interview #2
“That’s a button? That is terrible design.”
- Matt, Interview #6
Usability Testing - Priority Matrix Overview
27
Usability Testing - Top Priorities for Desktop
28
Usability Testing - Top Priorities for Mobile
29
Card Sorting
02
30
The first steps to reorganizing and reimagining the sitemap redesign.
Card Sorting
31
Sitemap Redesign
03
32
Primary and Secondary Navigation, Utilities and Footer
Sitemap Redesign (Header)
33
Sitemap Redesign (Footer)
34
Prototypes
04
For this part of the project, each member of the team incorporated the updated site map into a mid-fidelity prototype featuring a redesign of the USDA site homepage navigation, focusing on primary and secondary navigation only.
35
Prototype (Elaine)
36
Prototype (Christiaan)
37
Prototype (Amelia)
38
Prototype (Kyle)
39
Part III
Homepage UI Design and Testing
40
Header and Footer Navigation Wireframe Rebuild
01
41
There were some great changes we needed to make in order to make the navigation stand and be more accessibility for visiting users.
Header Navigation Wireframe - Desktop
42
Homepage Footer -Desktop
Header Navigation Wireframe - Mobile
43
Homepage Header -Mobile
(Primary Navigation)
Homepage Menu - Mobile
Homepage Header -Mobile
(Secondary Navigation)
Footer Navigation Wireframe - Desktop & Mobile
44
Homepage Footer - Desktop
Homepage Footer - Mobile
Redesigned Wireframes for the User Paths
02
45
Wireframes (Homepage)
46
Desktop
Mobile
Wireframes (Organic Page)
47
Desktop
Mobile
Wireframes (Getting Organic Certified Page)
48
Desktop
Mobile
Wireframes (Crop Insurance Page)
49
Mobile
Desktop
Clickable Prototypes (Mobile and Desktop)
03
50
Primary and Secondary Navigation, Utilities and Footer
Clickable Prototype - Desktop
51
1. Homepage
Clickable Prototype - Desktop
52
2. Navigation to Organic & Crop Insurance
Clickable Prototype - Mobile
53
1. Homepage Navigation
Navigation to Organic
Navigation to Crop Insurance
Testing and
Iteration
04
Testing Method: 5-Second test
Test Stimulus: Mid-Fi Homepage
Number of tests: 4 total inclusive of Desktop and Mobile
54
5-Second Test - Desktop, User 1
55
Questions:
Responses:
5-Second Test - Desktop, User 2
56
Questions:
Responses:
5-Second Test - Mobile, User 1
57
Questions:
Responses:
5-Second Test - Mobile, User 2
58
Questions:
Responses:
Iterations - Mobile
59
Original
Revision
Original
Revision
Feedback:
-Make image in card larger
-Center logo
Footer Feedback:
-User was confused about what kind of updates they would receive
Iterations - Desktop
60
Feedback:
-Overall, users felt positive about design; No actionable feedback received
-Users felt confused looking at grayscale and placeholders in mid-fi content
Iteration:
-Team plans to retest using hi-fi mockup as stimulus
“A gray envelope”
-User, when asked “What is the main element you can recall?”
Style Tiles for USDA
05
We developed Light Mode and Dark Mode UI systems for our USDA site redesign
61
USDA Style Tile - Light Mode
62
USDA Style Tile - Dark Mode
63
Homepage
Mockups
06
Desktop and mobile mockups in Light and Dark Modes
64
Homepage Mockups - Light Mode
65
Desktop
Mobile
Homepage Mockups - Dark Mode
66
Desktop
Mobile
Part IV
High Fidelity Prototyping, Iteration and Style Guide
67
High Fidelity Prototypes (Mobile and Desktop)
01
68
Text goes here
Hi-Fidelity Wireframes (Homepage)
69
Desktop
Mobile
Hi-Fidelity Wireframes (Organic Page)
70
Desktop
Mobile
Hi-Fidelity Wireframes (Getting Organic Certified Page)
71
Desktop
Mobile
Hi-Fidelity Wireframes (Crop Insurance Page)
72
Mobile
Desktop
Hi-Fidelity Wireframes (Under Construction Page)
73
Mobile
Desktop
Hi-Fidelity Clickable Prototypes
74
Mobile
Desktop
Testing and Iterations
02
75
There were some great changes we needed to make in order to make the navigation stand and be more accessible for visiting users.
Usability Tests
76
MOBILE
Task 1: Navigate to Organic Certified Landing Page
Task 1 Results: 63% Success Rate*
Task 2: Navigate to Organic Crop Insurance Landing Page
Task 2 Results: 100% Success Rate
*User’s preference was to use the search bar which was not functional for this stage of testing.
DESKTOP
Task 1: Navigate to Organic Certified Landing Page
Task 1 Results: 80% Success Rate
Task 2: Navigate to Organic Crop Insurance Landing Page
Task 2 Results: 50% Success Rate*
*User’s preference was to use the search bar which was not functional for this stage of testing.
Iteration Notes (Mobile)
77
Mobile Homepage Topic Breadcrumbs
Our users felt that the mobile homepage still featured too much content and copy, especially in the area above the fold.
We removed the breadcrumb links to simplify the user experience and make it easier to decide where to look for information.
Iteration Notes (Desktop)
78
Desktop Homepage Primary Navigation
Our user felt that the topic of Crop Insurance was important enough to be available within the primary navigation system.
We updated the Topics menu to include Crop Insurance.
Style Guide
03
79
The style guide was created using iOS and Apple’s HGI standards. The color palette was developed to meet web accessibility standards.
Style Guide and UI Rebranding
80
After evaluating the existing USDA website, we identified a significant opportunity to develop a new brand identity and visual style that would connect to key values offered by the USDA’s various programs. The visual style should be: Nourishing, abundant, welcoming, supportive, approachable, and inclusive.
The color palette selection was created to reinforce our key style adjectives and to celebrate the beauty of the land across the U.S.
81
82
83
84
85
86
87
88
Next Steps
89
Future Development:
We would like to continue to build out the UI for the entirety of the USDA site. The site itself is extensive and contains many navigational links, so the full rebuild will have to take place in stages based on order of primary navigation categories, and whether the linked pages remain within the USDA site.
The first step would be to redesign each page within the Topics primary navigation header.
A number of our users first instinct was to was to utilize the search bar to complete the tasks given. In future development we would like to make the search bar functional so that users can easily navigate the site based on content entered.
Continued Rebranding:
Per our style guide information, “After evaluating the existing USDA website, we identified a significant opportunity to develop a new brand identity and visual style that would connect to key values offered by the USDA’s various programs.”
We would like to continue efforts on rebranding by testing and iterating in order to appeal to future generations of users with a shift to mobile-first experience.