U.S. Dept of the Treasury Website
Project Overview
Synopsis
I chose the U.S. Department of the Treasury’s website as a case study for my bootcamp course, because I noticed a number of improvements that could be made to the user interface and navigation. I focused on updating the homepage to give the site a more modern look. Then, I worked to restructure its vast information architecture to be more easily navigable. Finally, I conducted usability testing of one of the site’s primary functions: determining small business financial aid eligibility due to COVID-19. I identified numerous key improvements that could be made to this process.
Problem
The U.S. Department of Treasury’s Current Website uses dated looking UI elements and graphics and is difficult for users to navigate. Throughout the pandemic, one of the main functions of the website has been to help small business owners determine their eligibility for financial aid due to COVID-19; however, many users are unsure how to do this, as they have run into usability problems on the Treasury’s website.
My Role
UX/UI Designer
Information Architect
Timeline
3 weeks
Completed in March, 2021
Team
Self Directed, with feedback from instructors and peers
Tools
Figma, Photoshop, Google Workspace, Miro
Desktop Mockups
Homepage (Hero Banner)
Homepage (Latest News)
Homepage (Tools)
Homepage (Weekly Public Schedule)
Navigation
Mobile Mockups
Homepage (Hero Banner)
Navigation (Search Function)
Homepage (Quick Links)
Primary Navigation
Homepage (Latest News)
Secondary Navigation
Homepage (Twitter Feed)
Tertiary Navigation
Table of Contents
Heuristic Evaluation
Proto-Persona
Usability Testing
Feature Prioritization
Usability Testing
Heuristic Evaluation
Card Sorting
Sitemap
Wireframing
Moodboard
UI Style Tile
UI System
Atomic Design
Mid-Fidelity Wireframes
Usability Testing
Mobile Prototype
Desktop Prototype
1. User Interface Analysis
Interface Analysis
Heuristic Evaluation with Annotations - Homepage
In order to determine the scope of my project, I took time to assess the U.S. Department of the Treasury’s current website and identify some of its primary functions. To aid in this process, I performed a Heuristic Evaluation and annotation of the homepage.
It was evident from the prominent hero banner that the website’s main function, at that point in time, was to provide information to users about COVID-19 financial relief.
Figure 1. Homepage Heuristic Evaluation
Figure 2. Homepage Annotations
Proto-Persona
At this point, I decided to create a proto-persona representative of a specific group of users, in turn gaining a better understanding of the information they would need to find regarding financial aid.
I chose the persona of a small business owner, as there are over 30.7 million small businesses in the United States (Source: SBA.gov), indicating that small business owners make up a significant portion of constituents searching for financial aid options.
Heuristic Evaluation with Annotations - User Paths
I was then able to identify the user paths Cafe Owner Cathy would need to take in order to find all the information on COVID-19 financial relief that could pertain to her small businesses.
I performed a Heuristic Evaluation of each of the 4 webpages included in these user paths and annotated them accordingly.
Figure 1. COVID-19 Relief Page Heuristic Evaluation
Figure 2. COVID-19 Relief Page Annotations
Usability Test Plan
Objective
To ascertain how difficult it is for users to find all the government financial aid programs their small business is eligible for due to COVID-19. Once they have done so, I aimed to determine if they were able to gather the key information they needed in order to apply for a loan through the Paycheck Protection Program (PPP). To conduct this testing, I devised a detailed Usability Test Plan.
Assumptions
Participants were provided with the following prompt:
“You own a small retail business with 8 employees. You have been forced to suspend operations of your business multiple times as a result of COVID-19 government orders. You have not applied for any government aid for your business prior. This is the 2019 financial information for your business:
- Net profit amount: $50,000
- Gross Wages and Tips: $315,000
- Employer Contributions to Health Insurance: $50,000”
Tasks:
Find all the types of government financial aid your business is eligible for due to COVID-19.
Find out the maximum loan amount your business qualifies for through the Paycheck Protection Program (PPP).
Find out what documentation you'll need to provide in order to apply for a Paycheck Protection Program loan, as well as to whom you will need to send it.
Method
To collect qualitative data, I conducted 4 tests via Zoom for approximately 30 minutes each. I took a convenience sample of users who approximately met the demographic criteria of Cafe Owner Cathy. 3 of the participants were small business owners.
Usability Test Results
User Insights
After conducting the 4 tests, I plotted all the data I collected on a Miro Board.
User Quotes
Usability Issue Annotations
I then referred back to my Heuristic Evaluations, and marked up each screen with the usability issues identified in my testing.
Feature Prioritization Matrix
I then brainstormed various solutions to these usability issues before plotting them on a Feature Prioritization Matrix.
Adjusting Scope
At this point in my user research, due to time constraints, I decided to narrow the scope of my project even further, focusing my redesign specifically on the website’s homepage and navigation.
Note: I am in the process of revisiting this project, creating wireframes for a PPP (Paycheck Protection Program) wizard for small business owners.
Back to Top2. Information Architecture
Usability Testing Plan - Navigation
Objective
To determine the level of effort and length of time for users to find specific information using the site’s current navigation.
Method
I conducted 4 usability tests on the site’s navigation via Zoom. 2 were on web, and 2 were on mobile.
Usability Testing Results - Navigation
Results
As a result of my testing, I identified these major pain points:
Users are unable to find Small Business Programs, because they expect them to be under the “Services” category.
The navigation appears disorganized and difficult to scan, due to the amount of information presented under each category.
Mobile users are prone to miss information because they must scroll down past numerous subcategories to find what they are looking for.
Information Architecture Restructuring
Research
In order to better assess the website’s current information architecture, I researched each of the topics (nearly 150) listed in the site’s tertiary navigation. This helped me gain an accurate understanding of how they could best be categorized.
Heuristic Evaluation with Annotations - Navigation
I then conducted a Heuristic Evaluation of the site’s primary, secondary, and tertiary navigation, as well as its footer, to identify inaccuracies and redundancies.
Card Sorting
Next, I posted all of navigation categories as sticky notes on a Miro Board, scrambling the tertiary categories.
Then, leveraging the knowledge I gained from my usability testing, research, and the heuristic evaluation above, I performed a hybrid Card Sorting exercise.
Sitemap
With the navigation categories more accurately organized, I created a Sitemap to illustrate the site’s redesigned information architecture.
Wireframing
Finally, I created Wireframes for a redesigned navigation interface on both desktop and mobile.
Figure 1. Wireframe of Redesigned Navigation - Desktop
Figure 2. Wireframe of Redesigned Navigation - Mobile
3. UI Design
Moodboard
Once the navigation and information architecture were redesigned, I turned my attention to the homepage. As previously stated, the current homepage featured dated looking UI elements and graphics; therefore, I created a Moodboard to draw inspiration for a more modern user interface.
UI Style Tile
Once I began to develop an idea of the direction I wanted to take the UI design, I created a UI Style Tile to help solidify my vision.
UI System
Once I finished the style tile, I developed a UI System within Figma, setting color and text styles.
Atomic Design
With those basic building blocks established, I was able to begin using the Atomic Design methodology to create atoms, molecules, and organisms as Figma components. These components were designed to optimize usability, based on my prior UI analysis and user research.
Figure 1. Atomic Components - Mobile
Figure 2. Atomic Components - Desktop
4. Testing & Prototyping
1st Iteration of Prototypes
Mobile Prototype
Finally, I built a mid fidelity Mobile Prototype, using my UI System and atomic components to create a mid-fidelity homepage and navigation.
Figure 1. Mobile Homepage
Figure 2. Primary Mobile Navigation
Figure 3. Secondary Mobile Navigation
Figure 4. Tertiary Mobile Navigation
Desktop Prototype
Additionally, I created a mid fidelity Desktop Prototype.
Figure 1. Desktop Homepage
Figure 2. Desktop Navigation
Usability Test Plan
Objective
To determine any usability issues with my redesigned homepage and navigation prototypes—on both desktop and mobile.
Method
I conducted 5 usability tests via Zoom. Users were asked to complete the 4 tasks outlined in my Usability Testing Plan—first on mobile, then on desktop.
Usability Test Results
User Feedback
After reviewing the data I collected from my usability test, I identified the following key usability issues:
Users did not notice that the “Treasury Hunt” button on the homepage would allow them to search for matured bonds—the icon is not clear enough.
On mobile, users felt that the “Daily Yield Curve Rate” section was too large and discouraged them from scrolling further down the page.
On desktop, users felt that the tertiary navigation sometimes appeared overwhelming and unorganized.
Some users did not like how the navigation slides out from the left.
Users did not understand what the “Latest News” and “Weekly Public Schedule” headings pertained to, nor that they were togglable.
Features Implemented:
Made data center collapsible and expandable on mobile
Removed multilevel side navigation and reverted back to simple, cleaner top navigation
Changed “Treasury Hunt” tool to “Find Matured Bonds” with a more relevant icon
Made “Weekly Schedule” and “Latest News” more evidently togglable on mobile and desktop
More white space separating the content under “Latest News” and “Twitter”
Increased contrast to make “Twitter Feed” more legible
For my final product, I implemented the features above and updated my screens to create the following prototypes for both mobile and desktop.
