Non-Profit Website Redesign: Content testing and Site Mapping

Chicago Public Art Group

3 months

Scroll ↓

  • The Product

    • Chicago Public Art Group (CPAG)’s non-profit website.

    • The’re in charge murals, statues and mosaics in the Chicagoland area.

  • The Problem

    • Unclear user goal

    • Long list of links

    • Buttons that don’t look like buttons

  • The Result

    • Focused User goal

    • Clarified Content

    • Maintained brand identity

Team: 3 UX designers

Time: 3 months

The Product

Chicago Public Art Group’s Original website:

The Problem

Upon initial heuristic evaluation, CPAG’s website seemed great:

  • beautiful pictures

  • exciting colors

  • usability principles

However, we realized the

  • the user goal needed to be defined

  • site visitors needed to be guided to that defined goal

  • we could improve content/copy

How might we improve?

  • Need more Calls-to-Action

  • The header took up too much space, especially with the dropdown menus

  • “Donate” button does’t look like a button, how will users know to click; organization losing potential donations.

  • “Spotlight” section failed an accessibility test; colors could be hard to read for someone with a visual disability like color blindness.

“Good branding can initially mask poor content”
— Sophie Funck, Design Team Member

Content Testing

To ensure the user stay focused only on the website copy, we conducted Content Tests whereby we created greyscale wireframes of the existing site to use in our usability test.

The Test

A community member who saw public art murals wants to find out how the murals got there and maybe volunteer to get more murals painted in their neighborhood.
User task: Get involved with Chicago Public Art Group by

navigating to the “Get Involved” page and choosing to fill out a contact form.

Takeaway

from 3 user tests: Users struggled to find the calls to action they were looking for. In fact there were very few calls to action, and some were very hard to find. Aside from read the information and admire the beautiful pictures it’s not clear what the user is supposed to DO on the site.

The Result

To Do:

1. Rethink site organization and refocus on user goal.

2. More abundant and obvious calls to action - contact or donate.

3. Prioritize and review content for ease of user reading.

Here’s a few side-by-side comparisons of the improvements we made.

Site Map

First task: Reorganize the site. WHY?

  • some pages didn’t need to be separate pages

  • need to make sure as many pages as possible link to or direct user to “Get involved” aka Contact them, or Donate, as per our 

Old
New

Informed by a card sort, we combined a few standalone pages that had similar content such as “Who we are” “Mission and History” and “People”. I thought the “Funders” page might do better on the same page as the donation information. Perhaps the social pressure of seeing who and how much others gave would encourage would-be donors to donate more or donate at all. We made sure to add links between pages all ultimately directing the user to either donate to or contact the organization.

Home Page

This long list of links for the “Spotlight” section…

We made into a carousel. Much more engaging and much easier to understand. Users only have 3 things to look at at a time now so it won’t be so overwhelming.

Cards

Homepage cards we revamped. The color and orientation change are more for the order of cards on the homepage. Go take a look at the clickable prototype at the bottom for the full view. More importantly, we removed the story in the pink section, bolded necessary info and added a call to action button that looks like a standard button.

Header

  • Slimmer (big issue with original)

  • Reorganized as per site map

  • Improved button & search

“Get Involved” Page

We added:

  • Call to Action Buttons on every card

  • Cards for every category

  • Meaningful colors

  • More beautiful images of art

  • Bulleted list instead of paragraphs for easier reading

“Donate” & “Funders” Pages

These are two we combined into one. I thought it would encourage would-be donors to see others who’ve donated. We also and added a picture and made up theoretical tiers of donors.

We achieved our goals of:

  • improve organization

  • added calls to action: Contact & Donate

  • improve ease of scanning

See for yourself

Finished Product: Clickable Prototype

Compare and contrast: Original site.

Next

Small business website refresh - quick turnaround - before and afters.