Gov. Agency Website Redesign
UX/UI Design Project Case Study
Jump To:
Overview
This was the first high fidelity project completed in my UX/UI Bootcamp at the University of Denver. The assignment was to redesign and update a Government Agency's website. We chose the United States Department of Agriculture's website as we found it in need of an aesthetic and functional update. UX Research was conducted by a group and any UX/UI design was done by myself.
Problem
The current USDA website lacks proper responsive web design standards and its design is somewhat outdated. The design presents itself as friendly to all but delving further into the website it is filled with industry specific jargon and confusing navigation creating a difficult and frustrating experience for the user.
Solution
A complete website redesign improving the overall design, functionality, and navigation of the website to better fulfill RWD design standards creating a more enjoyable and understandable experience for any user that may end up on the USDA's website.
Tools Used
Figma
Invision
Miro
Google Docs, Sheets, Slides, etc.
Role
UX Researcher
UX Designer
UI Designer
Timeline
This project was completed over the course of five weeks.
Phase 1: Research & Analysis
Heuristic Evaluation
To kick things off, my group took a look at the current USDA website. We needed to see what was working and what wasn't:
-
We found that the homepage didn't have a clear structure and layout.
-
The aesthetic of the site was pretty basic, just white and blue.
-
There was not enough information on the homepage for users to make decisions. Some typical user-decisions on websites weren't available on this one (ex: Blog section on homepage had no route to the blog page).
-
The site has a lot of information to present to its visitors and we ultimately felt that it is not doing so in a way that is inviting and understandable.
Proto Persona
After evaluating the website we developed a proto-persona help us understand who we were redesigning this website for. We felt that the user should an everyday user who would struggle to understand and navigate the website as it currently sits. The individual we came up with is Darcy Nelson, a public school nutritionist.
Usability Testing
We developed a testing plan to discover how users interacted with the present USDA website. We found individuals willing to participate and conducted five tests. After compiling our key findings into a Miro board we took the most frequently mentioned points and created a feature prioritization matrix. We wanted to know what improvements users needed and wanted to see in the website. We wanted to see how users interacted with the website by completing four tasks:
Navigating to and from the 'Contact Us' page. (80% success)
Finding some information on Child Nutrition Programs. (40% success)
Find a list of former Secretaries of Agriculture. (50% success)
Use the website to Estimate a Personal Insurance Rate. (0% Success)
Affinity Diagram & Feature Prioritization Matrix
Our findings were taken and compiled into an affinity diagram and then into a feature prioritization matrix. We needed to see what similarities and differences there were between our users and their responses. It was important for us to know what users liked and disliked about the existing USDA site. We also needed to see what the users most wanted to see changed or improved with the USDA site.
Phase 2: Information Architecture
Cardsorting & Sitemap
After figuring out what features we wanted to add and keep in this redesign we moved forward into a card sorting activity. Here I took the primary and secondary navigation structure down onto sticky notes, shuffled it around, and rebuilt it, keeping what worked and getting rid of what wasn't needed. Once that was done I moved on to create a site map of the new structure I had come up with.
Wireframes
With a new navigation structure built out it was time to start wire framing. I began to develop some loose ideas of what I wanted the new website to look like. I wanted to come at the redesign with a top-down approach, presenting information in a hierarchical structure. The existing USDA website had a similar structure and I wanted to maintain something along those lines while modernizing and improving upon the overall design of it. The screenshots show the progression of my early wireframes including individual wireframes for header and footer components for desktop & mobile.
Mid-Fidelity Prototypes
My desktop prototype can be viewed here.
My mobile prototype can be viewed here.
After developing a design I wanted to move forward with I began creating a mid-fidelity prototype for my desktop and mobile prototypes. This would allow me to run usability tests to discover things I should change in my design and navigation. After testing I made two more iterations for my desktop prototype and one more for my mobile prototype. Links to view each prototype can be found above.
USDA Style Guide
With this redesign I wanted the website's new color way to represent warm and welcoming leadership while representing their agricultural roots. The primary colors were pulled from the USDA logo. the green and marigold colors represent greenery and pastures of the middle America landscape where much of the country’s food is produced. The navy blue ties everything together and provides a nice since of professionalism. These colors flow nicely together and pop up from a more muted off-white (#F4f4f4) background. The addition of the marigold brings more energy and life to the website while maintaining an authoritative and welcoming energy to the site.
Phase 3: Responsive and Interactive Design
High Fidelity Prototype
After developing the new style, I implemented it to my redesign. Once it was stylized I did some more usability testing to discover any last changes and iterations I needed to make. After testing was wrapped up I made the necessary iterations and finalized my product. What you see below is the progression from the USDA's original site to my finalized redesign.
A look at the the full homepage for both the USDA and my redesign. My high-fidelity prototype can be viewed here.