The United States Department of Agriculture works to provide leadership and management on subjects such as food, agriculture, natural resources, rural development, and nutrition
PROBLEM
The USDA website creates a struggle of overall usability due to text-heavy sections and overwhelming page layouts.
SOLUTION
Redesign the main UI navigation and website flow in order to create a more minimalistic and appealing layout with condensed text and categories.
The Design Process
Define + Empathize
Research + Analyze
Design + Testing
Iterations + Prototype
DEFINE + EMPATHIZE
The USDA continues its vision to provide innovative economic opportunities by helping rural America thrive. The agency's goal also includes natural resource preservation by ways of conservation, improvements of forests, private working lands, and more. At the commencing of this case study, the original agency website showcases a layout with a vast amount of white space as well as an overwhelming amount of text as shown below.
Due to the vast amount of information that the USDA website provides, I wanted to narrow the scope just a bit. When creating the proto-persona, my goal was to hone in on the "food and nutrition" sections in order to gain a better, more focused approach to the redesign.
​
Our user, Christina Parks, is a produce market owner and gardener. Her main goal is to regain her customer base after being burdened with all of the fast-food business in her local area.
After defining who the main user was and what they were looking to accomplish, I began my testing plan. The main navigation of the USDA website had issues that clearly stuck out to me, but what about others?
​
I tested 5 users on the desktop and mobile versions of the website and was able to organize my results best with the creation of an affinity diagram and prioritization matrix.
*click images to zoom
Five usability tests were conducted for the original website navigation. Both desktop and mobile versions were tested.
Here's what the results concluded:
Navigation Findings
90% of users stated that the main navigation was unnecessarily difficult to get through due to there being too many categories in one space to choose from.
Majority Rules
All users stated that navigating through the website in its entirety would be easier if the list items were better organized.
RESEARCH + ANALYZE
In order to begin the website redesign as effectively as possible, consistency and flow was of utmost importance. I wanted to make sure that the information portrayed was still accurate while the layout designed showcases a sense of minimalism and balance.
​
I began this area of research by adding annotations to the original website to get a better idea for a potential outcome. After annotating, I was able to visualize a potential site design by creating moodboards.
*click images to zoom
*click images to zoom
So, now I have a visual reference of what direction I'm seeing this website navigation going. In my mind, I am able to see a clearer (yet, still blurry) picture of a before and after.
​
Before designing starts, my next step was to organize my thoughts of potential navigation and layout. I used the card sorting method to help with the overall structure.
*click image to zoom
.png)
Mapping it Out
After analyzing the original site and all of the research gathered, I was able to finalize the organizational portion of research and analysis.
The following site map was created and was the stepping stone to designing the new and improved navigation and website layout.
*click image to zoom
DESIGN + TESTING
As a result of prior usability testing, research gathered that navigation of this website was the biggest concern. With that, going into the design phase, I wanted to focus on getting the main navigation rendered. I began with a simple sketch that, then, turned into a mid-fidelity wireframe.
Getting a start on mapping out the main page first allowed me to dive into designing the main header and footer navigation for both desktop and mobile views.
Desktop Navigation Design
Mobile Navigation Design
After getting the navigation layout designed, I continued with the design of the main home page of the website. The following portrays the first iteration of the main page.
ITERATIONS + PROTOTYPE
Moving into the iteration and interactive design phase of the design process, I began by finalizing the UI style guide. I was able to redesign the USDA logo and revamp the color scheme in order to allow for a better overall website flow.
I was able to move on to testing the high fidelity prototype and make the necessary iterations thereafter.
High-Fidelity
Usability Testing
Seven participants were recruited in order to conduct testing on the desktop and mobile navigations. Shown below are 4 participant examples and their feedback.
Iterated Desktop Redesign
Iterated Mobile Redesign
After more iteration and run-throughs of the clickable navigation, I was able to create a final high-fidelity redesign of the USDA website.
Both the mobile and desktop versions showcase different navigation but are able to successfully communicate in similar ways for the user to understand and visually appreciate. The final product shows less text-heave design that is simple, clean, and simple to navigate.
FINAL THOUGHTS
Responding to Responsive Web Design
Soaking in the defining principles of responsive web design while trying to successfully complete a case study centering around it was quite a feat. However, with the use of multiple resources and creating a good pace for myself, I was able to redesign the agency's website as effectively as possible.
Condensing, Communicating + Creating
It was a challenging task trying to condense the wording throughout this website. There were a lot of areas that were text-heavy and difficult to follow. Taking the time to comprhend what was being communicated helped to figure out a better solution in the aspect of design.
Expanding While Keeping It Simple
My main goal was to simplify while remaining creatively-driven. I wanted to bring the user something visually fulfilling and easy to understand.