Inspiring visitor confidence in a non-profit organization.

Timeline
3 weeks
My role
UX/UI Designer

OVERVIEW

Literacy Action Center has difficulty communicating the real value of their work.

  • The website does not present the organization in a professional and actionable manner.
  • People would be more likely to donate or volunteer to the Literacy Action Center if they knew it was a trustworthy organization.

The website could do better at establishing trust with its visitors.

  • To improve Action Literacy Center’s website, I looked for engaging social proof of the organization's impact and made changes to make it appear more credible.

What does Literacy Action Center do?

  • Literacy Action Center fills a unique position in Utah as the only non-profit organization to focus on teaching English-speaking adults how to read, thereby improving their capabilities and quality of life.
  • Unfortunately the website is outdated, and does not adequately highlight the organization's achievements.

RESEARCH

A deeper look inside the website’s layout.

I examined the website's sections to learn its structure.
1
Contact
2
Two different logos
3
Problem statement
4
Navigation menu
5
Donation
6
Content

Before committing to new redesign, I wanted to find out how people felt about non-profit organizations.

I interviewed people about their experience with volunteering and donating to non-profit organizations. I aggregated findings to the total of:
  • 9 in-person interviews.

A summary of key results from in-person interviews.

Takeaway 1.
  • If people trusted a non-profit organization, they were more likely to engage with it.
  • The active volunteers whom I interviewed all worked in organizations where they personally knew the leadership.
Takeaway 2.
  • Some interviewees were confused by the application process and questioned whether or not the organization was legitimate.
  • The simplicity of signing up to donate or volunteer was highly valued by participants.

Analyzing the data to draw conclusions.

  • Data exploration showed that users value and seek evidence of an organization’s effectiveness and trustworthiness.

DEFINITION

Ideal visitor.

Mary Bookwright

  • 71 years old.
  • Lives in Salt Lake City, Utah.
  • Retired public school teacher.
  • Mary is a widow. Both she and her husband were teachers at the same public school.
  • Mary likes to browse bookstores and enjoying her retirement.

IDEATION

Organizing thoughts from internal brainstorming sessions.

  • Using the “I like”/“I wish, What if” method, I categorized ideas I thought might be a good to implement.

Visualizing potential impact and effort of proposed features.

I prioritized including the following features in the redesign:
  • Success stories/testimonials.
  • Easier donating process.
  • Easier volunteer signup process.

User journey.

I created a user journey map showing Mary Bookwright's interactions with Literacy Action Center.
1
Retirement has left Mary feeling bored and lonely.
2
Mary searches the web for a nonprofit present in her local area.
3
She finds a local nonprofit called the Literacy Action Center (LAC), and looks through its website.
4
She reads about how people’s lives have been changed by their involvement with the LAC.
5
Mary investigates LAC's transparency.
6
She has the appropriate skills for this job, and she would like to help LAC by volunteering.
7
Within a few minutes, Mary finds instructions on how to volunteer and signs up for a training session based on the dates that are available.
8
Mary receives an email from Literacy Action Center about the upcoming training session she has registered for.
9
Mary begins tutoring weekly. She looks forward to the friendships she forms and knowing that her efforts are helping members of her community.

New site map.

  • Before beginning new design work, I reorganized the content of the website into a site map.
  • I wanted to group the information by category to facilitate the user flow.
  • I also wanted to make the site more streamlined by eliminating unnecessary links and pages.

PROTOTYPING

Users' navigation through the website.

Low-fidelity prototype.

In my first iteration of the design, I created a general layout and then tried to determine how important pieces of content would fit in that space.

TESTING

Testing first iteration of the redesign.

Once I finished the initial prototype, I created a test plan that would allow me to evaluate how well it worked against these tasks:
  • Would a user be able to successfully enroll as a volunteer?
  • Would a user be able to easily navigate to Literacy Action Center’s mission statement and accomplishments?

Key takeaways from the user feedback.

Users found it easy to complete the requested tasks, but they wanted a few design improvements.
  • Pages need a better introduction message to make user aware what the page they’re on is about.
  • Information is confusing and hard to follow. The site’s structure lacks definition.
  • Get Involved calendar needs to be interactive and engaging.

Iterations based on feedback.

I gained a lot of useful feedback from users. Some changes I decided to include for the next iteration are:
  • Added introduction paragraphs.
  • Changed the volunteer form to be a modal, rather than being embedded into the page itself.
  • Information is reduced to smaller, more manageable parts.
  • Added space for icons in appropriate places.

FINAL DESIGN

New brand style guide.

I wanted the new UI to be playful and engaging, reminding users of a classroom setting where learning is fun.

High-fidelity design.

FINAL RESULT

High-fidelity prototype.

Desktop PrototypeMobile Prototype

CONCLUSION

Gaining trust from website visitors isn’t easy.

  • As part of my research, I found that people's biggest concern when deciding to spend time with a non-profit organization was trust.
  • By streamlining the process of signing up and making it easier to scan the website, I was able to demonstrate that these improvements made users more likely to engage with Action Literacy Center.
  • There are many more features that I would have liked to implement for Literacy Action Center.
  • Such as adding profiles, donation feature, and an interactive calendar to view training & class days for tutors and students alike.
  • I'd be very happy to revisit this project in the future.