USDA Redesign
Restructuring and giving new voice and look to the USDA website.

Timeline: 5 weeks.
Role: Initial heuristic analysis and information architecture research done with a team and then broken up individually for: Problem Analysis, User Research, Prototype, Testing, and Style Guide.
Deliverables: Research, Testing, Mid-to-Hi-fidelity Prototype and Style Guide.

Assignment: Redesign and reorganize the navigation of USDA website using best UI/UX practices.
The website while not the worst looking government agency, had alot of problems when it came to navigation and conflicting brand voices.
Initial Questions
I dove deeper into questions I needed answered after my observations of the USDA site.
Who does USDA serve?
What kinds of tasks can you complete on their website? Is it easy or hard to accomplish?
Do most people wish that government agencies were a little less stoic and a little more people-centric?
Can their branding say something about the personality of the agency?
Can we establish trust and authenticity through the branding?
Navigation Nightmare
There were several pieces of content nested in navigation. The long drop down menu labelled "Topics" was probably the most confusing. I wasn't sure if people would understand by the labels what they needed to click into.
Very long dropdown with vague navigation items
Very long dropdown with vague navigation items
Hidden featured content.
Hidden featured content.
A lot of links with vague language in the footer.
A lot of links with vague language in the footer.
I couldn't really establish the branding voice of the agency. Was it trying to be more "informative and professional?" It appeared that way with the vague and industry specific verbiage. If the average American user couldn't relate to it, was it even helpful? The brand voice and the navigation were keeping that from happening. This was an issue I needed to resolve.
With the problem defined, I set to find solutions to solve the navigation and branding issues.
Card Sorting
To resolve the vagueness of the navigation items, I conducted card sorts to help organize the navigation. As a result I recategorize and relabelled some navigation items to be more specific about the content within them.
I created a digital sitemap to apply my findings from the card sorting.
For the purposes of this project, we were asked to think about a user after evaluating the navigation, in trying to think how a user could use this new improved navigation.
User Persona
I started out by putting some context to the kind of task a user may want to achieve by creating a potential user persona: Heather.
Ezra Cortado
"I want to ensure my customers of my food's integrity by being informed of the logistics of where and how the food I serve is grown."
Heather Evers
36 year old / Vegan Restaurant Owner / Lives in Silverlake in Los Angeles, CA

Heather is looking to find a new supplier for the almond milk she uses at her restaurant that is certified organic. She goes looking online for information on the brand she's considering but they are a small local vendor and they there isn't much information on them. She decides to go look on the USDA website, being they are the suppliers of the certification.
Needs: To feel that the information she finds is legitimate.

Wants: To feel trustworthy in upholding the standards that her customers expect.

Goals: To verify that a supplier is certified organic, to use for her restaurant.

User Flow
Now that I had a task scenario for Heather, we need to look at the current way the website achieved it. The flow went from homepage, to a long dropdown, to a USDA organic page with an inside navigation, to a searchable database. It seemed like too many clicks, and too hard to navigate. My goal was to simplify this task so that Heather can easily verify the certification of her supplier.
Navigation in all RWD prototypes would be key to succeeding in accomplishing the user task.
I sketched out multiple concepts for how to organization the navigation visually, considering how each would translate from desktop to tablet to mobile
My primary testing was with the navigation options. I initially tested mid-fidelity mobile menus and used those findings to craft my wireframes for the other screen sizes. The feedback I received informed the hi-fidelity experience.
The drop down menus were crucial to test being I had recategorized and added iconography for further clarification. Many of my testers agreed it was a welcome touch to be able to easily scan for the information they needed.
Style Guide
In order to rebrand the look and voice of the USDA to be more engaging and personable, we created a style guide.
Brand Voice
I identified 5 adjectives that would give the USDA a more defined brand identity.
We revised the logo to be cleaner and friendlier by using a more rounded typeface and brighter colors.
Original Logo
Revised Logo
Color palette is inspired by the colors of agriculture. Colors of the grass, the sun, clouds,
and stone. Washes of Green and Yellow for section BG. Gradients are used in multiple sections as a background.
I used Comfortaa Bold for its roundness and thick lines that matched the stroke of the iconography. I selected Source Sans Pro for its simplicity and legibility for body copy.
Icons should be lined and "rounder" in style to evoke friendliness.
Images are warm, intimate shots. Close ups of food, wheat, vegetables. Landscape shots of fields
with sunbursts. Main colors, should be yellows and greens. Hazy/sunny feeling to them.
Through the revised navigation and the better defined brand voice, the USDA can appeal to anyone who lands on their website.
Made on