Existing Site Redesign
From drop down menu nightmare.......
......To public user friendly interface!
by, Dana Kohl and Esther Yi
Tools used: Figma, Miro, Fig Jam, Notion, Google Workspace, Zoom, Adobe CC, and Microsoft Excel
The Challenge
The existing US Treasury website primarily serves the commercial banking sector and government needs, but it lacked usability for individual members of the public, especially those seeking financial assistance in the post-COVID era. Our team's objective was to enhance the website's usability for individual users while maintaining functionality for the banking sector, ensuring it effectively met individual users' financial requirements.
Heuristic Evaluations for Existing Site
To understand the obstacles that public users faced in accessing financial assistance information, our team started researched the existing site with heuristic evaluations. Click on the images below to see an in depth evaluation.
Usability Testing for Existing Site
Our research objective for this phase was to see how easily users were able to navigate through the Treasury website to access information about financial assistance for individuals.
Evaluation (EXISTING SITE)
During our multiple heuristic site evaluations, we noticed many usability challenges, navigation problems, and accessibility issues. See our initial site analysis below.
User Flow Example for Existing Site
This example shows the excessive amount of steps it takes to get to the "Assistance for American Families and Workers" page in task 1 above. Note the multiple navigation hurdles such as the excessive drop down windows, inconsistent UI, and buried links. Users complained about the "COVID-19 Relief" page being found under "Policy Issues" as they felt these were not related.
User Interview Quotes
"This site is hard for an average person to use. There are way too many options on the dropdown menus and it is hard to find the home tab."
-Self Employed Mother of Four
"There is too much information everywhere! I am overwhelmed when trying to find these things. Why is the covid 19 tab under policy issues??"
-Retired Artist
Hypothesis
Research indicated that the site layout and user interface were too difficult to pilot and helpful "calls to action" were buried within the navigation. As a result, accessing financial assistance on the existing site proved challenging for individual users.
We formed the hypotheses: A simplified design and easier site navigation would help more individual public users get the financial information they need on government assistance in a post-pandemic world.
Redesign
To direct users more quickly towards necessary information and to cut down on the site's overall intimidation factor, our team simplified the user's flow by redesigning the site map, adding helpful and inviting UI, and condensing the layout.
Sitemap
PRIMARY NAVIGATION
The new information architecture categorized the main pages according to different user groups, such as "the public," "business" users, "financial institutions" and "government" users. We prioritized "the public" user as the primary option,
Latch principal used:
Hierarchy
SECONDARY NAVIGATION
"The public" page was then organized into categories containing the most important relief and personal finance information according to our card sorting tests. We put them in alphabetical order. and each subsequent tab was organized in the same way.
Latch principal used: Alphabetical
TERTIARY NAVIGATION
For more complex tabs like "Government" we had to add tertiary navigation for certain categories so the information architecture was consistent throughout.
Latch principal
used:
Alphabetical
FOOTER
Latch principal used: HYERARCHY
From repetitive information......
......To concise and efficient
Style Guide
COLOR | TYPOGRAPHY | IMAGES
The Treasury's brand identity needed to be conservative in design, and evoke the feelings of being a professional, authoritative, and trustworthy source. We did this by using colors, images, and typography that evoke these feelings in fintech design. We maintained this UI design approach across the entire style guide to ensure consistency in drop down menus, iconography, and every aspect of the site.
Wireframes
THE HOME PAGE
The wireframes introduced a new navigation bar with prioritized page categories from card sorting tests. A hero image was selected to instill user confidence in the site and the logo for user trust. A search function was added to the navigation bar filling a previous gap. Cards expedited access to necessary information. The Twitter feed was highlighted in a concise but prominent layout as this type of social media was another good way for the Treasury to release information to the public and attracted new users in a format they were used to.
THE PUBLIC TAB
The streamlined layout of the drop-down menus addressed the significant problem of users feeling overwhelmed by the previous excessive menu options. This layout also tackled the issue of users having uncertainty about which elements were clickable in the previous drop-down design.
THE GOVERNMENT TAB
Following a competitive research analysis, we opted to use an accordion layout for menu drop-downs across both web and mobile interfaces. This decision aimed to effectively organize a significant volume of data into an intuitive information architecture.
THE MOBILE WIREFRAME
The drop-down's accordion-style layout was continued on the mobile interface with visual cards being aded and prominently displayed on the homepage to enable quick access to financial relief information.
Usability Testing of Low-Fi Prototypes
Following a Guerrilla Test involving 6 participants to assess the initial prototype's usability, we discovered that while users could locate information more easily, they encountered functionality issues. For instance, they faced difficulty clicking out of the navigation and encountered non-responsive buttons. We of course fixed these before moving onto higher fidelity prototypes.
Hi Fidelity Prototypes
WEB/DESKTOP
Our first iteration addressed the problem of individual users having difficulty finding relevant relief information by making the drop-downs more concise, adding images that were relevant to their categories, and making public resources both a nav bar option and the first category of cards on the homepage. In order to display all essential treasury information, these details were organized into a "Tools" section with buttons with icons.
Our next iteration addressed the issues found in further usability testing by adding descriptions below cards, incorporating drop-down icons in the navigation bar, and separating accessibility and privacy policies from the "about" category in the footer. Some users were confused by the hyperlinked treasury logo being the only "home" page link, so a "Home" tab was added to the navigation bar. In order to prioritize the Twitter feed for the Treasury. the "Tools" section and Twitter feed layouts were reversed.
Mobile Testing
The user's navigation issues were magnified because of the smaller display of the mobile interface, so we created multiple layouts and tested them for usability and preference.
MOBILE TEST I
7 out of 10 users preferred the twitter feed on the home page in version B over the twitter button option in version A.
8 out of 10 users preferred the color gradient buttons in version B when compared to the image buttons in version A.
One user commented on version 1's buttons stating, "although super cool it is a little busy and makes it hard to read."
MOBILE TEST II
9 out of 10 users preferred the navigation bar layout in version B over the navigation bar layout in version A.
6 out of 10 users preferred the color gradient buttons in Version A over the solid color buttons in version B.
8 out of 10 users preferred the button layout of version B over the button layout of version A.
.png)
