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. |
Overview
Assignment: Redesign and reorganize the navigation of USDA website 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
I dove deeper into questions I needed answered after my observations of 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.
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 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.
Definition
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.
Sitemap
I created a digital sitemap to apply my findings from the card sorting.
Empathy/Research
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.
"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.
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.
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 the 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 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.
Description: 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.
Execution: Use for design elements. Intimate, sunburst photos that feel genuine and not stocky. Use colloquial language in speaking to our audience.
Description: We want to provide knowledge to our users.
Execution: Make information digestible and to the point.
Execution: Make information digestible and to the point.
Description: Our users can rely on us to provide them a way to easy access the information they need.
Execution: Have a simple interface and straightforward navigation. Provide links for further research on more specific information.
Execution: Have a simple interface and straightforward navigation. Provide links for further research on more specific information.
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.
Execution: Use colloquial, straightforward language that anyone can understand.
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.
Execution: Organize information in a way that feels natural and intuitive. Categorize in a way that makes sense to everyone.
Logo
We revised the logo to be cleaner and friendlier by using a more 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.
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 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.
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.
