Current Website of Grants.gov
Grants.gov is a government website that provides resources on federal grants for individuals and organizations in the U.S. This website covers a wide range of users, including students, researchers, universities, institutions, and local governments, as it manages both the grantors and grantees. It also administers the entire application process from search to confirmation by providing applicants with required forms and instruction. Despite its importance and usefulness, the website prevents users from accessing its full capability because it falls far short of intuitive design, ease of learning, and efficiency of use.
A lot of the issues are caused by the lack of hierarchy in information organization. It is particularly problematic in its landing page because it fails to direct users to the most important material. For example, the navigation bar that appears right below the hero image shows all the pages that are accessible from this website. While it sounds helpful in theory, this elongated list of icons quickly becomes a blur due to several reasons: (1) the most important materials such as “Search Grants” and “Get Started” are treated the same way as “Twitter Feed” and “Youtube Videos,” (2) the use of icons are unnecessary and ineffective in this context, and (3) the overwhelming number of choices stops users from using the site intuitively. These three problems found in the navigation bar are seen throughout the website.
My goal for the redesign was to increase usability by creating a hierarchy in information, simplifying visual elements, and decreasing the number of choices. I will also be incorporating the 3-column grid and whitespace to separate contents without using physical elements like boxes or lines.
Prior to the testing, both users were provided with a brief description of Grants.gov and what the site is capable of. Then they were asked to use the landing page on their own.
User #1: Sophia, 20, College student
Sophia was inclined to click on the “Grantee” button below the hero image. She stated that even though the placeholder text did not provide much information, she instinctively knew that it was asking whether she is a grantee or a grantor. “I can see myself using this website to apply for grants for college as a high schooler” was her reasoning behind choosing “Grantee” over “Grantor.” She clicked on “Learn” when the “Grantee” page was presented. She stated that she clicked on it because it was on the far left side, and felt like the first step in the process.
User #2: Eddie, 21, College Student
Eddie clicked on the “Grantee” button on the top navigation below the header. He stated that was the first thing his eyes were drawn to. He also stated that the reason he chose “Grantee” over “Grantor” is that “Grantee” felt like an option for individuals, whereas “Grantor” is for schools and institutions. When the tab menu unfolded from the “Grantee” button, it took him a while to decide on where to go next. He says that he wasn’t sure what “Check” or “Register” meant without a clear explanation. He decided to click on “Check” in the end.
The first iteration of the redesign was a success as it led the users to self-identify without much complication; both users quickly figured out what to click on when the landing page was presented. They also reacted positively to the position of the button (“Grantee” on the left, “Grantor” on the right)— they agreed that “Grantee” should be the first option presented, as most of the users of the website will fall under “Grantee” category.
However, the testing showed that more information is needed to describe the next process. I believe this can be done by changing “Check” to “Check Eligibility” and “Track” to “Track Progress.” Another issue is that neither of the users ended up on the “Blog” page. Although it is not as essential as the “Grantee” or “Grantor” page, users should still be inclined to take a look at it. I believe that this can be improved by showing the title below the image instead of relying on hover over effect, and adding a “Read More” button that directs to “Blog” next to the “Other Resources” in “Grantee” and “Grantor” pages.
Eliminating unnecessary visuals was the focus of my redesign. Although additional elements can add personality to the brand, I believe clarity and flexibility are more critical considering Grants.gov’s primary purpose. The gradient background was removed to improve accessibility (the contrast ratio for both the small and large text are now WCAG AAA), the increased use of header and footer eliminated the need for multiple icons, and the straightforward “Grants.gov” logotype replaced the previous logomark. The consistent typeface treatment and the use of white space also improved the overall readability.