Goal

My team worked to understand how people use the department of agriculture navigation and website content so that we could wireframe, design, prototype, and test a new website solution for desktop.

Usability Issues

• Selectively reading large paragraphs to navigate the pages using linked words within the text.
  
• Oftentimes links take users to secondary websites and they found it difficult to know when they had left the USDA website - inconsistent branding
  
• Unprioritized organization.
  

Site Annotations

User testing confirmed that there were many confusing aspects to the current design. On my own, I analyzed and annotated the current USDA site. I followed the journey to our user goal (applying for a grant or loan). This helped us to identify fixable design flaws.

Problem Definition

The current United State Department of Agriculture site makes it necessary for users to read through paragraphs of information and then click on linked text they want to navigate to. This results in users spending lots of time reading paragraphs of information in order to reach simple goals.

The solution was to reorganize the information to prioritize topics and services the government agency offered by incorporating clear navigation buttons.

Card Sorting

On my own, I gathered all of the information offered on the USDA site and used card sorting to discover how we could group and prioritize the vast content offered.

User Flow

This flow helped me visualize a broad view of what was required for a simpler user experience.

Sitemaps

In this step, I used my card sorting results to map out a new information architecture. This map illustrates what the connections are between the site’s pages. I wanted to organize my information to help me base my designs around the content I wanted to present.

Failed initial Web iteration

One of the main mistakes I made in my initial designs was not making a low fidelity mock-up or a style tile. I had sketched the basic layouts on a scrap paper and then immediately started designing with color and images (mid/high fidelity). Skipping the important low fidelity prototype made me get stuck in a design corner. I had a harder time being flexible and open minded as to what wasn't working. In the end, I completely scrapped the first iteration and started from the beginning.

The top navigation as well as the information panel's were too large to scale because I had skipped design process steps. I didn't like the heavy greens and oranges. I didn't feel that the font was on brand - and I realized I hadn't defined the brand. While I thought I was short cutting to the actual design, I was really limiting myself and making it extremely harder to make changes. I was getting excited about making elements interactive and got caught up with this aspect of design instead of actual information layout that met the case study goals and style tile.

Re-branding

To make sure that I had unity in my designs I created a style tile. I switched up the colors because I felt that the dark green paired with the dark orange was too heavy and created too much visual weight for how much information was being presented. I also used style adjectives to decide on text combo so that I was able to pick better fonts that were more in-line with the brand adjectives.

Re-visiting Low-fidelity

After realizing the vitality of this step - I created a low fidelity layout of my new home-page design. I was better able to scale the navigation as well as organize the panels in a more consisant layout.

High Fidelity Prototype

In my second design attempt. I did not skip the low fidelity part of the design process. This made it much easier to make iterations on scale as well as better organize information panels before jumping into making the high fidelity designs.

Redesigns

I redesigned the header and navigation bar to keep the the main services provided by the agency the focus of the designs and clear to the users. I removed hyperlinks within the informative text as users tend to miss out on important links while skimming paragraphs.

I cut USDA’s services into clear categories under the “how can we help” section on the homepage. I included current events and highly sought after resources at the top of the page such as covid vaccines, and disaster resources. I made it easier to contact the government agency by including it as one of the prioritized services - which was not included in the original design.

Mobile Design - following the user flow

After redesigning the home page, I wanted to prototype the site-map to showcase a more efficient way to achieve the goal we gave users in the initial user testing part of this project. I decided to create wireframes in a mobile design so that the designs were responsive to a wider range of devises and also was practicing responsive design.

The site map takes the user through the process of applying for a farm grant or loan. The mobile design for the different pages users navigate through were only designed in low to mid-fidelity.

Results

I gained a better understanding of making an adaptive design from mobile to webpage. I also was able to correct visual clutter. I learned the importance of starting broad before jumping into the design because without a plan, I ended up creating a design that lost focus of the information architecture and the goal of making usability more streamline. I ended up having to backtrack to broaden my scope of the project by not skipping on tools like sitemaps and low-fidelity designs.