Esri Federal Funding Pages

Content Strategy , UX Design

Summary

In 2021, the American Rescue Plan (ARP) and Infrastructure Investment and Jobs Act/Bipartisan Infrastructure Bill (IIJA) were passed by the American government to support America's economic recovery. This project aimed to showcase how Esri’s geographic information systems (GIS) technology has empowered and supported government organizations by providing a solution that aligns their economic recovery efforts with stimulus funding.

I developed the design and strategy for the Federal Funding microsite which contains an overview page and subpages. Additionally, I created a template for focused funded areas subpages to onboard new designers onto the project.

My Role

UX Designer

Timeline

September 2021 - Current

Team

Project Manager
Copywriter
Marketing Specialist
Page Author
Content Strategy Manager
UI Designer

What I did

- Delivered current experience audit for discovery research
- Crafted content summaries, MVP wireframe, sitemaps
- Designed high fidelity wireframe templates
- Led collaborative discussions and workflow across cross functional marketing team members.

The Challenge

In 2021, President Joe Biden passed ARP and IIJA to rebuild and invest in America’s infrastructure, health, businesses, clean energy and technology to transform the nation’s economy. Many government organizations have been keen to find geographic approaches for speeding up economic recovery.

The problem : How do we empower users with knowledge about the application of Esri's GIS software in federal funding efforts, clearly communicating our software's industrial applications and satisfying user values?

The Solution

Visit live website →

Let's start at the beginning with business objectives

These webpages aimed to help existing and potential customers see how GIS software can be a funded resource of their recovery efforts through user stories, resources, and value propositions. As the ARP and IIJA continue through 2024, these pages should expand to include any additional federally funded programs. Additionally, these pages will highlight existing industries that already participate in federally funded programs.

Taking inspiration from the Racial Equity, COVID-19, and Industries Pages

For page inspiration, I referenced existing Esri campaign pages for Racial Equity, COVID-19, and Industries with the stakeholders because they aligned to Esri prestige and brand messaging.

Observing component use and purpose, I discovered:

Racial Equity
COVID-19
Industries

Structuring the content for Federal Funding overview page

I worked closely with the content strategy manager and marketing specialist to establish clear information architecture upfront to align business goals and customer journey. I started with content summaries, structuring the content with hierarchy of importance. This step allowed me to then intentionally map out potential components to built the resulting wireframes.

Crafting a rapid MVP wireframe

This wireframe introduces a user flow inspired by common component patterns found in existing Esri campaign and industry pages. It incudes a top hero banner, background information, resources and case studies.

We initially only had 2 months from start to launch for the overview page in October 2021, therefore I needed to create a high level overview page that introduced the federally funded programs without going into too much detail about each industry. The project became a rush priority that needed a minimum viable product (MVP), so I skipped mapping out a flushed out sitemap laying out the microsite's entire information architecture.

Revisiting the information architecture

After the MVP went live, I learned from stakeholders that additional subpages would need to be designed that would highlight specific funded areas. A sitemap needed to be created to craft a structured information narrative and journey. Mapping out each page, I decided that the overview page would be the highest priority page where new and existing visitors first enter into this microsite. Following the overview page, secondary sub pages for highly specialized industry details with interconnected page linking throughout would provide visitors a coherent and seamless user flow.

Drawing up more wireframes

Following the sitemap, I added a secondary navigation to the overview page in a second iteration to accommodate the growing microsite. This includes subpage links and a simple navigational component further down the page to allow visitors an additional ability to find subpages.

While redesigning the overview page, the stakeholders came to me with the business goals and content ready for two funded industry subpages (Health and Human Services & Community and Economic Development). Quickly understanding that these pages would have the same content structure as each other, I created a subpage template to streamline the design process because of the high priority nature of this overall microsite. I understood the uniqueness of each funded industry, therefore I designed the subpage template to be flexible to allow for the insertion of customized components into the wireframes to fit each funded area’s unique content.

Overview page
Subpage

A growing microsite structure for future federal program pages

As of February 1, 2022, the second overview iterations and the subpages are live on the Federal Funding microsite. While a growing number of subpages will be added as more funded areas are identified, the stakeholders also wanted future federal program pages for the American Rescue Plan and Bipartisan Infrastructure Bill. To incorporate these new pages into the microsite, I redrew the sitemap to add the two pages. Adding these two pages to the  microsite was relatively simple as I had designed the page flow to easily accommodate for the addition of more webpages.

Future federal program page wireframes

After I mapped out where the future federal program pages would reside within the microsite, I learned that there was no clear way for visitors to find subpages pages on the overview page. So I added a new component on the overview page to link to these future federal program pages in a third iteration.

This new component would be placed below initial background content to encourage visitors to the click out of the overview page for a deep dive to more industry specific subpages.

Overview
Subpage

Live website

The wireframes are then utilized by the UI designer to create mockups filled with colors and images that portray each federal funding industry's highlights and successes. I collaborated with the UI designer during the initial project kick off to understand the visual branding of the page. This was especially important whenever I struggled choosing between components with the same content but different visual impact. We bounced off ideas each other throughout the entire process until the wireframe handover to make sure we were on the same page.

Current Page Performance

Initial analytics showed that the Overview page contains the highest total visitors, average time spent on pages per second and bounce rate. As predicted, we observed lower analytics for each subpage since visitors are entering the Overview page as a gateway to individual subpages. As the microsite grows, we expect to see similar trends across additional subpages with some variability depending on each focused industry and its impact on the American people and communities.

Overview Page
Health and Human Services
Community and Economic Development Subpage

Takeaways

Be flexible but intentional

As a natural planner, I generally prefer to know all the details as soon as possible from stakeholders so I can quickly map all the content out for a fully fleshed microsite. But with the high profile nature of the ARP and IIJA, I quickly learned that a single page MVP would initially suffice to get the information out in the public to display Esri’s involvement with projects relevant to important legislation. As content continued to grow with each iteration, I learned that making the page flow and wireframes flexible helped immensely with adapting each page’s unique business goals for an expanding microsite.

Follow up designs with research

These pages were initially designed and developed within a short period of time to show Esri’s ongoing work that aligns with current legislative bills. So we were not able to do a lot of discovery user research directly with users during the initial design phases. For next steps, I would like to do quick usability testing to understand how users are behaving on the current pages to aid the analytics to inform further wireframes iterations and improved designs.

Other projects