Grant Awards by State Map
Creating an interactive map to display grants awards data by state.
July 2023 - October 2023
Timeline: 3 Months
Role: Designer
Tools: Adobe Illustrator, Adobe Photoshop, Adobe XD, Figma, ReactJS
Project Summary
Goal: Design a SAMHSA Grant Awards State Map to display funding granted to various communities and groups throughout the United States.
​
Function: Display information regarding grants awards that allows for user filtering and links to more in depth info if needed. This is public information provided by the US government, so it is crucial that the map is highly accessible, easy to use, and easy to read.
​
Style: The current SAMHSA Grant Awards Map had grown to become outdated over time, and the client requested a modernized and updated version in regards to both appearance and functionality.
Empathize
It was important to consider all potential users of the map. As with all SAMHSA projects, Section 508 compliance was of utmost importance while ideating this design. Special attention was paid to color contrast, typography, and the ease of implementation of screen readers.
Original SAMHSA Map Design without tooltips, dropdowns, region specificity, or color.
Define
The client had requested that the map be accessed via a link from the Grants landing page, and would allow a clear path back to the Grants Dashboard. The map needed to be dynamic as well, so that both year and state could be selected by the user. There was a need to implement these features in a way that was much more visually appealing and intuitive than the previous design, but that would also satisfy the client’s desire to keep the styling relatively toned down. It was clear that the client did not want the map to appear overly striking in the context of the rest of the website.
Ideate
In order to maximize visual communication, the text color for the year on the title of the map was changed to a different tone than the rest of the title. As the user changed the year, the year displayed on the title would change to reflect the selection. This color variation is also seen on the year selection dropdown, in order to tie these two elements together in the user’s mind. This color change was further used to communicate that the year was variable, something that could be changed. There is a hover tooltip with instructions on how to use the map at the top of the page, preceding the year and state selection dropdown menus. Tooltips with grant information were also added to all states and territories.
Another major update that was made as a part of this design was the inclusion of the Pacific and Caribbean Territories. Previously, these territories were designated as ordinary links on the right side of the page, and were much easy to glide over and miss when viewing the page.
Prototype
In order to create a proof of concept for the map, I created a low-fi prototype of the map using React, containing hover state tooltips fed with JSON data on each hexagon. The overall layout of the states was included in this POC as well.
​
Hexagons were used due to their unique ability to nestle perfectly against one another. This was shown to the client and they liked the concept, so this layout was used for the prototype. There are several regions which states and territories are grouped into, so a decision was made to separate these regions by color. This would add visual interest to the map as well as provide a new type of information that was not previously visible in the old design. All colors chosen needed to be 508 compliant, so careful testing was done on each color used in order to ensure that colors maintained a contrast of at least 4.5:1 with the background, state acronym, and surrounding states.
ReactJS POC #1
ReactJS POC #2
High fidelity mockup of map integrated onto site
Map with highlighted region shown
Further Evolvement of the Grants Dashboard and Enhancing the Mobile Experience
Designing with mobile in mind and incorporating a tab structure:
In order to further enhance the functionality and usability of the SAMHSA Grants Dashboard across both desktop and mobile, a tab structure was implemented into the design.
​
This structure consists of a single container housing various data displays, depending on the user's preference.
​
The tab structure allows users of the Grants Dashboard to select whether they wanted to view Notice of Funding Opportunities (NOFOs), Awards, or view the Grant Awards Map.
Prototype of evolved Grants Dashboard featuring active filters and left menu:
Here, we are able to see the display for each tab, based on the user's preference:
The following views showcase the mobile layout:
The mobile layout stacks components in a linear and modular fashion, and displays data in a way that is more intuitive for interpretation on a mobile device.
​
Table items are displayed in the form of an accordion, which hides information unless the user demonstrates an interest in seeing more. The first accordion opens upon page load, suggesting the functionality of the page to the user.
​
This layout limits page height, and allows more items to be immediately visible to mobile users.
