New York Foundation for the Arts (NYFA)

NYFA has over 1 million users. To address various usability issues and promote neglected sections of the site, I revamped the design system, and redesigned over 45 pages including a responsive website and a funds management portal.

Background

NYFA is a nonprofit that serves the arts community through its grants, fiscal sponsorship, and professional development programs. It boasts the largest job board in the arts in the US, with an annual traffic of 11 million.

Since rapidly moving their operations and services online in 2020, NYFA has faced challenges, particularly being inundated with inquiries from users attempting to apply for programs or access services.

Project Overview

Problems

Through a UX audit, stakeholder meetings and user interviews, I observed the following main areas for improvement.

  • The website was hard to navigate, with many inconsistent page connections.
  • The information and UI were overwhelming and confusing.
  • Users had trouble performing key tasks such as logging in to the right page, managing funds and applying to grants.
Goals

My goal was to prioritize designs that would create the most impact within the time constraints. Specifically, these were:

  • Reduce user reliance on direct staff support by making the website easy to use.
  • Promote services and products that had long been neglected.
  • Modernize the aesthetics with a befitting visual identity and create an overall consistent tone of voice (one of the organization’s main goals.)

Navigation redesign

Problems

The navigation defined the high-level information architecture and was a major source of confusion, so I tackled it first.

The confusion primarily stemmed from an overwhelming number of options organized around internal structures and inconsistent interactive features, which led to many pages being overlooked by users.

Solutions

I created an initial redesign draft based on my observations and then conducted combined card-sorting and tree-testing sessions with 15 participants. The results from each card-sorting round refined the design for the following round of tree testing.

The final design organizes the navigation based on what users found most intuitive. It also resolves the issue of donors mistakenly donating to the organization instead of specific projects.

BEFORE
AFTER
Confusing and overwhelming menu options
Information regrouped based on card sorting and tree testing results (page 1 of 4)
My design promotes the new learning platform (page 2 of 4)

Program Pages Redesign

Problems

One issue with program pages is that they are text-dense, containing both marketing content and complex application instructions. Users often seek assistance from staff when attempting to apply for a program.

Users were also unsure about which programs require applications and which do not. (In the redesigned navigation, I separated application-based programs from the rest.)

Solutions

I designed a layout for all application-based programs so users could easily distinguish between different types of programs. This layout significantly reduces text and guides users' eyes to key messages.

It is consistent yet flexible enough to meet the diverse needs of over 20 programs, each with distinct elements, across three departments.

BEFORE
AFTER
See design annotations in the following section
- New marketing section at the top with scannable information that focuses on the benefits and who it is for.

- New side link section on the left to guide users to content at the bottom and to related links such as events to increase sign-ups.

- Rewritten UX copy that's much shorter and focuses on user benefits.

- New visual timeline to help users digest important dates.

- Use of accordions to collapse text to prevent long scrolls and to help users find relevant info quickly.
A new marketing section with scannable information that focuses on the benefits and who it is for.
A side link section to guide users to content at the bottom and to related links such as events to increase sign-ups.
A new visual timeline to help users digest important dates.

“When will I know the results?” is one of the most common questions staff get asked.
Rewritten UX copy that's much shorter and focuses on user benefits
Use of accordions to collapse text to prevent long scrolls and to help users find relevant info quickly.

Funds Management Portal Redesign

Problems

Users struggled to complete tasks such as payment and deposit requests, citing a confusing interface, unfamiliar terminology and complex process.

Solutions

I designed a new dashboard where essential info and frequently performed tasks are immediately accessible upon login. For a more focused experience, I removed unnecessary elements, consolidated the menu, and added interactive features to improve usability.

BEFORE
AFTER
See design annotations in the following section
- Improved architecture, hierarchy, and interactions in the nav.

- New Quick Action menu upon login for easy access to most commonly performed tasks.

- An FAQs section placed above the fold to help navigate the platform.
Improved architecture, hierarchy, and interactions in the nav.
An FAQs section placed above the fold to help navigate the platform
A Quick Action menu for easy access to most commonly performed tasks

Help Center Redesign

Problems

The Resource Center had long been overlooked by users, despite being the third option in the navigation. It contains forms and how-to guides that were helpful for completing tasks within the app.

Solutions

In addition to redesigning the page, I also renamed the page from "Resource Center" to "Help Center", based on my hypothesis that users struggling with a task would be more likely to seek help, rather than looking for resources.

New help center and interactive menu

Payment Request Page Redesign

Problems

Most new users had trouble completing the steps on this page to fund their projects. The information and tips didn’t seem to help.

Solutions

My redesign strategically places guidance and resources—such as tooltips and downloadable forms—exactly where users need them. I also used appropriate form elements for each question type.

BEFORE
AFTER
See design annotations in the following sections
Users caught in a confusing design, attempting to make a payment repeatedly without success.
Users caught in a confusing design, attempting to make a payment repeatedly without success.
BEFORE
AFTER
The new design clearly presents the two available options. Relevant prompts are shown only to users to whom the message applies.
Clearly present the two available options. Relevant prompts shown only to users to whom the message applies.
Help tips on hover are strategically placed right where users need them.
Despite the dense how-to information on the page (the right side), users who are confused about what to do mostly ignore it.
BEFORE
AFTER
Help tips on hover are strategically placed right where users need them.
Despite the dense how-to information on the page, users who are confused about what to do mostly ignore it.
Users often submitted receipts without all the necessary info, requiring staff to manually contact them for resubmission. This checklist did not help prevent this issue.
Enhanced the prominence of key info for better scannability. Introduced a checkbox to draw users' attention to this section.
BEFORE
AFTER
Reduced the prominence of this line and rewrote it for better scannability. By starting the sentence with the key differentiating information, 'International payment,' users can quickly decide whether to read on or disregard it.
Enhanced the prominence of key info for better scannability. Introduced a checkbox to draw users' attention to this section.
Another dense section with a bolded header containing info that only applies to certain users, not everyone.
Another dense section with a bolded header containing info only applies to certain users, not everyone.
BEFORE
AFTER
Clearly present the two available options. Relevant prompts shown only to users to whom the message applies.
Reduced the prominence of the same line and rewrote it for better scannability.

By starting the sentence with the key differentiating info, "International payment," users can quickly decide whether to read on or disregard it.

Reflections

There was a lot more to this project. I also designed a listings portal, three classifieds boards, an advertising info page, a sponsored project donation page, to name a few.

New Design System
To revamp the design system, the directors and I decided on a style that doesn't deviate too much from what users have come to know NYFA to be, mostly through the brand colors. I improved the aesthetics with new typefaces and modern layouts, as well as enhanced color contrast for better accessibility.

Challenges & Learnings
Initially, this project felt like five different projects. NYFA's five departments are functionally distinct and comprise different user groups. Due to the time constraints, it was paramount for me to identify the priority items. I needed to be flexible with my user research and testing methods. Combining user interviews, card sorting, and tree testing proved to be effective.

Looking back, I wish I had requested more time to gain a more thorough understanding of the products before creating the research plan. Some questions only emerged as I began the design process.

New York Foundation for the Arts is an arts service organization with many moving parts. I was impressed by how quickly and thoroughly Loren got up to speed on all of NYFA's offerings, and how she streamlined information into a more cohesive and professional looking site to meet both the needs and expectations of NYFA users. She was great to work with, well organized, and made every effort to be part of the NYFA team.

Amy Aoronoff
Senior Communications Officer, NYFA