Una Mesa Redesign Case Study

Discovery

We interviewed 5 potential users, noted observations and participant quotes in Miro and created affinity map. Trends emerged around the amount of text on the screen, confusion about the org's mission, and lacking and confusing information hierarchy.

The effect of the existing UI, information architecture, hierarchy, and lack of visuals was a blow to the credibility of the Una Mesa brand among interview participants. One interviewee described the site as a "Link Farm." Without an easily findable Mission Statement, this sentiment was only exacerbated.

0/5 users interviewed were able to understand the mission of the organization

5/5 users interviewd observed that the content was confusing and disorganized.

3/5 users interviewed observed that there is no call to action

“This organization is not open to people who don't know about their purpose.”

—Chris, interview participant

Affinity map from user interviews revealed issues around organization, visual design, understandability, credibility.

An affinity map helped us get inside our user's head.

"I don't know where to look. Someone's going to look at this and be like, 'I'm not going to waste my time.'"

—Kathy, interview participant

Definition

Sharon Watts

45, F

Palo Alto, CA

Bio

Sharon, a high school English teacher who just moved to Palo Alto, is a community do-gooder and goes out of her way to keep her community on track. She keeps busy with work and despite not having a lot of time, it's important to her to actively care for her community.

Her experience as a donor and volunteer to various organizations have taught her that as trusting as she would like to be, there are some sketchy non profits, so she approaches new organizations with caution.

Motivations

Wants to teach her kids how to be good community members.
Wants to share her good fortune.

Goals

Learn about ongoing projects in her community
Donate to a credible non profit

Frustrations

Unclear terminology, use of jargon.
Doesn't feel welcome on this site

View Full Persona

User Story

Sharon moved to the Palo Alto region this spring. She wants to get involved in her community because she wants to teach her kids from a young age how to participate and help others.

Because she's new to the area, she spends some time Googling to find a credible local organization.

Sharon comes across Una Mesa. She's impressed that they seem to have a lot of local impact and partner with other non profits. She quickly decides to donate and send an email offering her time.

View Full Journey Map

Information Architecture

At first the Information Architecture appeared very simple to us. Like most non profits, Una Mesa seeks donations, shares projects they've worked on, and offers pages dedicated to their personnel and their mission statement. We thought that of all the work needed on the site, the Information Architecture was one of its stronger aspects.

However, we missed an innocuous little menu item: "Projects1," which is only visible on one page of the site. This link led to an entirely different iteration of a Projects page which included several more projects. It also explained some of the relationships around the community that Una Mesa culitivates. We needed a quick fix.

Ideation

We were lucky that we caught the miss early enough to piviot some of our designs. We had originally anitipated creating one main projects page that would link out to information about individual projects. As we pivoted to accomodate more information, I explored how we might iterate our way forward.

There was too much information to house on one projects page. In addition, the nature of the various project was too different to justify a single projects page. I ended up creating five separate pages for Una Mesa's different types of partnerships: Project Partners, Social Enterprise Partners, Funding Partners, Implementation Partners, and Individual Contributors.

Early freehand sketches generated ideas.

We thought a map would be a good way to feature the local nature of Una Mesa's work.

Trying to make things clearer for users by giving a quick list of partners.

A/B Testing

We conducted a handful of A/B tests to determine which iteration of a hero image and button to use. We found that the donate button we designed was getting attention, but not in a good way. Users found it abrasive, so we worked a little bit better with our color palette.

Before A/B Testing

After A/B Testing

High Fidelity Execution

I noticed during the research phase that most non profits focus on photos of people. This observation was also supported by our User Interviews which suggested that a lack of imagery was not only poor visual design, but also ineffective branding. Therefore, I prioritized getting as much imagery on the site as possible.

In addition to photos of people, I wanted to incorporate logos of partners where possible in order to support Una Mesa's credibility.

Rewriting copy was also an extremely high priority to help Una Mesa connect with its potential audience.

Next Steps and Prototype

Although we reached out to Una Mesa via email and LinkedIn, we didn't get the opportunity to work with them on this redesign. If we were to continue working on this project, We would test this prototype further to validate our designs with a wider audience, then meet with stakeholders from Una Mesa to present our findings.

Browse the Prototype

Una Mesa

Non Profit Redesign

Overview

What I learned

Team

Timeline

Tools

My Role