USDA Redesign
Project Overview
Redesign and create a responsive website for a Government Agency
Role and Responsibilities: UX Researcher / UX Designer
Duration: 3 weeks
Team: Sahand Hasani (Individual Project)
Deliverables: Design Process (Research > Design > Iterations > Testing) & High Fidelity Prototype for mobile, tablet, and desktop
Tools: Figma, Google Suites, Photoshop CS5
Preface
The U.S Department of Agriculture (USDA) is the federal agency that proposes programs and implements policies and regulations related to American farming, forestry, ranching, food quality, and nutrition.
Research Phase
In this phase of the redesign project - we began by creating a proto persona to represent our target user, to help understand the user needs and motivations. This was followed by a website analysis to identify strengths, weaknesses, and areas for improvement in the current user experience.
To validate our findings and gather real-world insights, we conducted guerrilla usability tests. The combination of these methods ensured that our redesign efforts were grounded in a understanding of user needs and behaviors, setting a solid foundation for the next phases of the project.
Proto Persona
By creating a proto persona of a typical user of the USDA website, it provides us with a realistic representation of the target users, ensuring that design decisions are aligned with user's needs, goals and behaviors.
Website Analysis
Conducting a website analysis of the current website is crucial for informing the redesign process and identifying possible opportunities for improvement. In the image below, you can see some of the comments I provided for both the Desktop and Mobile version of the website.
Website Analysis (Mobile)
Most of my analysis concluded that the overall theme of the website could be improved with a more cohesive color palette and revised navigation while removing unnecessary content that doesn't support the USDA's mission.
Guerrilla Usability Tests
Next I began to conduct 5 usability tests aimed as assessing the websites user-friendliness, particularly focusing on its accessibility to first time users. The objective was to pinpoint any potential usability challenges encountered by participants as they attempted to navigate the site and accomplish specific tasks.
Design Phase
During the design phase, I focused on establishing a cohesive visual direction and consistent design language. I began by creating a mood board, which helped in aligning the vision and ensuring a unified approach to the visual elements.
Next, I developed a comprehensive style guide. This guide outlined the color palette, typography, iconography, and other visual elements to ensure consistency across the entire user interface - which would lay the groundwork for a visually appealing and user friendly design.
Our next step was to begin gathering inspiration, including UI Samples and inspiration. This establishes the visual direction, while also setting the atmosphere of the design. I noticed that I was drawn towards green and earthy elements as it fit in with the nature of the USDA website.
Above are some examples taken from the Style Guide that were used during the design process of the website. Ensuring consistency and clear direction to help maintain a cohesive look and feel throughout the user interface. I aimed to create in a style direction that could be described as clean, fresh, organic, and inspiring.
Information Architecture
For this phase of the project, I focused on organizing the content in a way that would enhance usability and improve the overall user experience. I began by conducting a card sorting session, which involved grouping content into categories. This process provided valuable insights into how users naturally categorize information, helping to inform a more intuitive structure for the site.
Based on the results of the card sorting, I created a detailed site map. This visual representation of the website’s structure outlined the main sections and subsections, ensuring a logical and user friendly navigation flow. The site map served as the blueprint for the website’s navigation, laying the foundation for an efficient user journey.
Before - Prior to starting the card sorting process, I first began by placing every topic on sticky notes so that I could visualize the entirety of the navigation bar. Although not shown in this image, the ‘Topics’ section contained a significantly larger number of sub categories compared to the others.
During - Initially, I categorized topics with related themes. I also considered user behavior that I observed during user testing. I recalled their responses when I asked, “What did you expect to see when you clicked onto that page?” after they had clicked on the wrong page while attempting to complete tasks. To which they would tell me that’s where they anticipated finding the relevant information.
After - With the card sorting process finalized, I applied one of the LATCH principles by arranging the navigation bar headers alphabetically. During user testing, I observed that the ‘Topics’ section, positioned on the left hand side, frequently went unnoticed. I decided to relocate it to the right side to encourage more users to explore that area of the website. I also opted to keep search related items near the search bar.
Sitemap
After categorizing the content, I began to start to visualize the information architecture and its usability. I then crafted wireframes and prototypes, mapping out the user journey to optimize functionality.
Wireframes
Here I focused on translating the previously established information architecture and design principles into functional, low-fidelity wireframes. These served as a visual guide to the framework of the website. By focusing on functionality and user experience, the wireframes set a solid foundation for the later stages of this redesign project.
Wireframes for mobile
Wireframes for desktop
Footer Navigation
I then went ahead and started to create mockups for what the footer navigation might look like on desktop (pictured above) keeping information easy on the eyes as well as organized.
High Fidelity Prototypes and Iterations
With wireframes and navigation headers and footers complete, I wanted to start on the process of working on high fidelity. Initially, I noticed myself gravitating towards replicating the original government agency's design for a sense of familiarity. (left) However, I later opted to introduce contrasting elements and adopt a sleeker aesthetic to infuse visual interest into the design (right)
Mobile Navigation Prototypes and Iterations
I also wanted to include the different stages and iterations for the mobile navigation as well, pictured below
High Fidelity Comps - Desktop and Mobile
I also wanted to include the different stages and iterations for the mobile navigation as well, pictured below
Usability Testing and Feeback
After finalizing my high-fidelity prototypes, I enlisted 7 users to conduct prototype testing. They were tasked with two objectives: locating information on organic farm certification and finding the careers page. All users successfully completed these tasks. Feedback from the testing session indicated that this version of the interface was more intuitive compared to earlier guerrilla testing using the original homepage and navigation.
One user noted difficulty with the language used, suggesting it might be more intuitive for farmers. Another user habitually sought navigation links at the bottom of the page, reflecting on the absence of this option during testing. Despite being instructed to use only upper navigation, this user instinctively scrolled to the bottom to find the careers page, citing past experience.
Users praised the cleanliness and functionality of the mobile menu, and they found the organization of the information on the page commendable. They acknowledged the density of information, acknowledging the limited control over such content. While aesthetic feedback was absent, I opted to refine both the desktop and mobile navigation by unifying them to a single color. Additionally, I removed the search bar from the mobile view since it was already accessible in the mobile pull-out menu.
Final Thoughts
Always be iterating and improving. While I take pride in completing my first full desktop and mobile prototype - especially given time restrictions. I feel that there is more that I can improve and iterate upon. Font sizing and spacing will be my focus for upcoming projects as they have emerged as areas where I tend to encounter challenges.
This project has really highlighted the importance of meticulous attention to detail and the nature of design work. It has reinforced my understanding that successful design goes beyond just aesthetics, it must also prioritize usability and functionality to effectively meet user needs and business objectives.
*The photo on the right, taken by me, was captured before the final changes were applied.
