A True Gateway to the West

Web Design
Project Overview
In 2019, the National Geospatial-Intelligence Agency (NGA) was preparing to break ground on their newest public project, Next NGA West (N2W).

This project required, as part of its web development tasking, a public facing website that citizens of St. Louis could visit to see the latest news, events, and alerts from the construction crew, the agency itself, and the contracting team in charge of presenting building designs.
My Contributions
I was a graphic designer, UX researcher, and web developer on this project and it was a unique opportunity for me to have a creative hand in every step of the web development process.

This site needed to be completely designed and developed from the ground up, so I started with what the team already knew about their user base. Through having meetings with our immediate product ownership team and having some opportunities for live feedback from the public, we completed a website that achieved many different goals in one.
Above all, I wanted our site to be user-centered and offer the most efficient way to sort through all the information presented.

This site was very information-heavy so I wanted to help users reach what they were looking for with as few clicks as possible.

Alongside these concerns, I also wanted to make sure disabled users would still be able to determine menus and site content.
Webflow
Desktop
Apr 2019 - Dec 2020
The sub menus were created with contrasting color that those with color or visually-related disabilites can still easily decipher. Along these lines, I also gave each sub menu item an icon. These icons would be caught first by screen readers and give the user a chance to move on without reading lines of text if necessary.
Since I had so much data to display, I didn't want the user to get overwhelmed with choice. I used a card-sorting method of qualitative research with users to decide how to categorize each menu.
The client requested an "archive" of sorts so that users could access older content on the site as well as the most up to date information. I grouped all related topics and news stories together under an accordion expansion so the user could select exactly which information they wanted to see for a slightly customizable experience.
I designed a robust footer that would be highly interactive to keep the user from having to remember contact information while searching for more updates about the project. We set up a "hotline" in the office for people to call in if they had questions and made sure the mobile versions of the site had this coded as a phone number so cell phones could dial it directly from the site.
I wanted to make sure the mobile site functioned especially well for this project because our analytics showed that that was how most users access this site.
Webflow
Mobile

I designed an interactive calendar that would show the user important details up front so they could decide if they needed more information. Users can also sort by public or industry events.

We had a sidebar on every main menu page to show more relevant news stories the user could read at their choosing. I didn't want to visually overwhelm the users, so I decided to only let this option take up the last column on the page.
‍
Since the mobile phone screen takes away the real estate of a desktop, I wanted to make a sticky locational banner to keep the user informed which section of the site they're on. In alignment with that, I didn't want the hamburger menu at the top to cover this informational banner. I designed the mobile menus and sub menus to have the same color contrasts as the desktop menus and kept the icons as well. These menus auto-collapse when the user taps on another main menu item so the screen doesn't get too cluttered.
Powered by Webflow
LinkedinupworkInstagram