Harrington

My Role: UX Designer, Web designer

Project Type: Website design

Business Type: Non-profit arts center

Team: Bradley (Head Designer)
Myself (UX design, and implementation)

TLDR: The Harrington Center for the Arts were struggling to get funding, because their website did not look professional. I created a much more on brand, fun and professional website for them. Completely redesigning based on research, and giving them the social validation they needed. Resulting in over $20 million in funding to renovate and build a new theatre and classrooms.

Before/After

After

Before

Problem Statement

As a nonprofit, there were not many resources to put towards a website. The current site was a squarespace template,  and was not well organized. The nonprofit had received feedback from some large potential donors that the website did not look professional and that was holding investors back from donating to their cause.

Spoilers

1

More Grants! Since the launch of the new website they have been awarded $150,000 in grants alone. (Take that covid!)

2

Community Backing- the city has approved plans to go ahead with the renovation

3

More corporate donors- Now on track for $20mm in donations to complete the renovation! A pipe dream is now quickly becoming reality

Spoilers

Complicated Nav

In a website audit, the first thing of note is just how complex the navigation is. Using card sorting,  we quickly found a better navigation structure. But this is just a small piece of the puzzle.

Large Donors not Committing

Through the interviews we discovered that the biggest issue they were facing was that they had received feedback from a potential large donor that their website didn’t look professional and that made them hesitant to donate. They also needed buy-in from all the local elected officials to make the renovation that was their big goal happen. So with all the things we learned our biggest goal became Create Social Validation

Event Info Lost in Clutter

A large theme as we conducted interviews is that they wanted the  website to help support their mission of supporting the arts through events. But the event info was getting lost. The new navigation structure helps significantly and keep it in mind as we design the new site, though it is still not the most significant thing we found in our research.

Conclusion:
We needed to create social validation

Secondary Research

Read first Edition Highlights here

Show the Mission

“The researchers asked users to tell them what they need to know before they feel comfortable making a donation to nonprofit online. 83% of participants wanted to know the mission, goals, objectives, and work or the organization, 67% wanted to understand the use of donations and contributions, 42% looked for signs of legitimacy and reputation, and 33% said local presence was important information.”
—Admin, sgEngage

Make it clear and show how to donate

“17% said their biggest turnoff was a lack of or unclear information about mission, goals, objectives, or work, another 17% were bothered by an inability to quickly find where to donate, 13% said a lack of or unclear explanation of how donations are used was annoying, and 13% were frustrated by busy or cluttered homepage or site.”
—Admin, sgEngage

Card Sorting

Thanks to the results from card sorting (results shown below) we were able to make significant changes and create a new site map

UI Visual Design

Home page

The home page immediately displays the mission, tagline, and makes how to donate clear.

Donation Pages

Donations are directed towards Artists, Renovation, and Events.
Each of those 3 pages goes into more detail on exactly how the donations will be used. The donation platform is giving fuel, which allows for us to track where the users donated to so the funds can be used properly.

Social Proof

As we continued to design the website we realized more and more through our conversations just how much the website would need to be utilized to have social proof to show investors, the city officials, and all the businesses nearby.  As a result of this, we focused each event to show in depth what these events have brought to the community already.

Branding

The organization was missing strong typography consistency, only had vague ideas for colors, and no ideas for picture treatments.  Here is what we chose.

Accessibility

Yellow-Green color vision deficiency using sim daltonism app

Red-Green Color vision deficiency using sim daltonism app

Made the pixel size larger for those with vision problems. As well as optimizing for screen readers.

Conclusion

There were many iterations to get it to the final project shown here, and several iterations since as needs change, events change, etc. But it has been doing exactly what we needed it to do. The social proof is there, and as a result The Harrington Center has been able to help out so many artists during the pandemic as a direct result of the website looking more custom made.

Back to Projects

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.