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

Timeline: 5 weeks.
Role: Problem analysis, User Research, Prototype, and Testing, Style Guide.
Deliverables: Research, Testing, Mid-to-Hi-fidelity Prototype and Style guide.

Overview
Assignment: Redesign and reorganize the navigation of USDA website through using best UI/UX practices.
Observations
The website while not the worst looking government agency, had alot of problems when it came to navigation and conflicting brand voices.
Initial Questions
As I dove deeper into questions I needed answered after my observations on the USDA site.
1
Who does USDA serve?
2
What kinds of tasks can you complete on their website? Is it easy or hard to accomplish?
3
Do most people wish that government agencies were a little less stoic and a little more people-centric?
4
Can their branding say something about the personality of the agency?
5
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.
Findings
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 it using vague or 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.
Definition
With our problem defined, I set to find solutions to solving the navigation and branding issues.
Card Sorting
To resolve the vagueness of the navigation items, I conducted help organize the navigation. I recategorize and relabelled some navigation items to be more specific about the content within them.
Sitemap
I created a digital sitemap to apply my findings from the card sorting.
Empathy/Research
Now with more refined way to navigate the site, I considered what kind a potential user and task could explore
User Persona
To put into context the kind of task I wanted to achieve, I created a 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.
Prototype/Testing
Navigation in all RWD prototypes would be key to succeeding in accomplishing the user task.
Sketches
I sketched out multiple concepts for how to organization the navigation visually. Considering how each would translate from desktop to tablet to mobile.
Testing
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 by hi-fidelity experience.
Insights
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 LAHSA to be more engaging and motivating, we created a style guide.
Brand Voice
I identified 5 adjectives that would give the USDA a more defined brand identity.
Warm/Engaging
Description: This is the goals for the imagery, colors scheme, iconography and verbiage.

Execution: Use for design elements. Intimate, sunburst photos that feel genuine and not stocky. Use colloquial language in speaking to our audience.
Informative
Description: We want to provide knowledge to our users

Execution: Make information digestible and to the point.
Helpful
Description: Our users can rely on us to provide them a way to easy access the information they need.

Execution: Have a simple interface, straightforward navigation. Links for further research on more specific information.
Inclusive
Description: We want everyone to feel like they belong, like their voices, values are being heard.

Execution: Use colloquial, straightforward language that anyone can understand.
Pensiveness
Description: How we want the user to feel about us. We want them to feel that we have a sense of thoughtfulness in the things that concern them.

Execution: Organize information in a way that feels natural and intuitive. Categorize in a way that makes sense to everyone.
Logo
Cleaner and friendlier logo with rounded typeface and brighter colors.
Original Logo
Revised Logo
Colors
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.
Typography
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.
Iconography
Icons should be lined and "rounder" in style to evoke a friendliness.
Photography
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.
Conclusion
Through the revised navigation and the better defined brand voice, the USDA can appeal to anyone who lands on their website.
Email me at sayhellocelina@gmail.com
Located in Los Angeles, CA
Made on
Tilda