US Department of Agriculture
Website Redesign
Overview
I worked with a team of four to evaluate the usability of an assigned government agency website. My team conducted usability testing and heuristic evaluations in order to determine a solvable usability problem. I then was able to take the insights of my team and in order to redesign the user interface on my own.
Background
Goal
My team worked to understand how people use the department of agriculture navigation and website content so that we could then on our own design and prototype and test a new website solution for desktop.
Role
UX Designer and researcher
Information Architecture Analysis
User Testing
We gave users the specific task to apply for a grant or loan through the website. After giving 8 users this task, only 2 were able to reach the grant applications without having to backtrack to their starting point.
Usability Issues
Selectively reading large paragraphs to navigate the pages using linked words within the test.
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.
Ideation
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.
Design
Failed Initial Web Iterations
One of the main mistakes I made in my initial designs was that I didn’t make high quality low fidelity mock-ups or a style tile. I had sketched the basic layouts on a scrap paper and the 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 designs weren’t working. In the end, I completely scrapped the first iterations and started from the beginning.
The top navigation as well as the information panels were too large to scale. The orange and greens are too heavy. 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 the process - I was limiting myself and making it extremely harder to make changes.
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 initial green and orange were 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 target,
Revisiting Low Fidelity
Re-Branding
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 consistent layout.
High Fidelity Prototypes
After not skipping the low fidelity part of the design process, it was much easier to make iterations that fit to scale. I was also able to organize information panels before jumping into high fidelity design more efficiently. Going of the style tile made these wireframes more cohesive and on brand.
Redesign
I redesigned the header and navigation bar in order too keep the main services clear to users. I removed hyperlinks within the informative text as users tend to miss out on important links while skimming paragraphs.
I reorganized USDA’s services into clear categories under the “how we can 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 USDA 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.
The site map takes the user through the process of applying for a farm grant or loan. The mobile design were design at mid-fidelity.
Results
Take Aways
I gained a better understanding of making adaptive designs from mobile to webpage. I also was able to correct visual and informative clutter through user insights. I learned the important of organization through effective information architecture. Low fidelity designs are vital to keep design focus. Ending up having to backtrack back to the low-fidelity wireframes broadened my scope of my ability to iterate on my designs and incorporate user feedback through each step.