Putting Art Forward: Website Redesign


My team was tasked with finding a Non-Profit website to redesign. We were drawn to Art Pride NJ for two reasons: they are great advocates for art programs in New Jersey and their art website was clearly lacking art. We wanted to design a website that would show off NJ artists and act as a hub for the art community. Our redeisgned site places the focus back on the art and increases donattion by creating a vibrant energy and color to ao state art website to hold user attention longer.


User Research, Storyboarding, User Flows, Prototyping, and Testing


3 Weeks


Here are photos of the original homepage, which can be found at Artpridenj.org:

We began our research with heuristic evaluation of key pages of the website. On the homepage, we noted a lack of art, large chunks of text and whitespace, and a disorganized footer.

Our next step was a competitor’s analysis to better understand how other sites in the arts advocacy space were designed. We choose Minnesota State Arts Board and Americans for the Arts (AA) as direct competitor as our group was most familiar with their work. Both sites were text-heavy, but AA had an alluring color scheme. Our indirect competitor was Visit NJ because they were not an arts advocacy site but they had an in-depth list of all art-related events in New Jersey. This allows community members to connect to the art scene.

NJ Art Pride advocates in the government for more art funding and aims to increase attendance to art events by connecting the public to the arts scene. While their advocacy work is up front and center, they don’t focus as much on the art scene they are advocating for.

Meet Finn

Finn proto-persona grid
Proto-persona: Finn

My team and I now had a better idea of who might be interested in using this site. Meet Finn, our proto-persona.

On the Path to Creating a User Persona

With Finn in mind, we designed an interview and survey to gain more insight into our user. I conducted two interviews, and in total we had 6 interviews and 7 survey responses.

We discovered the 5 key categories that interested our users: Art & Community, Membership, Site Needs, Where Users connect online, and Issues.

Empathy map
Empathy Map

Meet Finneas Garber

User persona: Finneas Garber

Our next step was to walk in Finneas’ shoes and picked out key pages within the site he might interact with. We used a story board to achieve that.

1.Finneas talks with an artist in his employ who is struggling to find grants. Finneas offers to assist in their search.
2.While searching for grants he stumbles upon Art Pride NJ.
3. On Art Pride NJ, he is able to sort through available grants and see details about the grant approval process.
4. While browsing, he stumbles upon Art Pride NJ’s calendar of events. He decides to find events he can promote to the various artist’s under his employ
5. Finneas takes the information he has learned from Art Pride NJ and shares the grant link with his employee. He plans to attend an event in the near future, and he already put it on his calendar.
6. Finneas and his coworkers attend a local art event together.

So What Features Should We Build Out?

We have a scenario in which he would use the website, but what features are most important for him?

I like, I wish, What If brainstorm Feature Prioritization matrix

We used the “ I like, I wish, What if” and the Feature Prioritization Matrix to make this decision. Finneas is most likely to use the grant application page, events page, and the public value page. As an Arts Administrator, he frequently has to find grants for his organization and their clients. As a lover of the arts, he wants to know when and where the fun is! Finally, as a donator, he wants to know where is money is going.

Now for the User Flow

01-- Grant Opportunities:

  1. Click on What We Do
  2. Click on Public Value
  3. Click on Apply for Grants

02-- Calendar of Events:

  1. Click on News and Events
  2. Click on Webinars and Events

03-- Where do Donations go:

  1. Click on What We Do
  2. Click on Public Value
  3. Click on either Community, Education, Health & Wellness, or Economy
User Flow photo

And The Information Architechture

Card Sorting Unsorted Card Sorting Sorted Card Sorting Defined

Prototyping and Testing

With the User Flow and Information Architecture done, we moved to lo-fi prototypes.

We then had four people test our prototype to see if they could smoothly complete all three user flows. We completed three rounds of user testing. When users tested the above prototype they struggled with finding grants and there were too many options in the News & Events menu. They also didn’t understand what Public Value meant, so we changed it to Community Impact.

Our next step was to create a styleguide so we could design our hi-fi prototype.

Our final round of testing was with the hi-fi prototype. Users enjoyed the overall design of the site.

Final Prototype

See the Prototype on Figma.

What I Learned

This was the first time I ever redesigned a website. Unlike design from the ground up, there are certain details of the website that I could not change. For example, there were so many pages in the upper navigation that made it seem crowded. However, without any input from the stakeholder, I did not know which pages, if any, could be altered or removed.

In this project, I practiced using components to build out an interactive navigation menu. At first our mega menu did not have any images, but our teacher pointed out how empty it looked, so we adjusted.

If we had more time, we would reach out to our stakeholders again to see the most important pages on their site and other important data. We reached out to them in the beginning of our project with no response. Their input would have only made our project more realistic.

Want More?

Project Kindful

The process of building an app to spread kindness and Community

Go somewhere
Project Portfolio
My Portfolio

Find out how I built this website

Go somewhere