Nonprofit Web Design | Happy Hippies Foundation

Happy Hippies Foundation

Overview

Objective - To execute a nonprofit's website redesign through a clickable prototype.

My Role - UX Researcher, UI Designer
Team Size - 3
Length of Project - 2 weeks
End Product - Hi-fidelity prototype in Figma

Problem -

The website lacks sufficient information and credibility that potential donors want, which is causing people to distrust the site and decide not to donate. How might we gain people's trust and as a result increase donation revenue?

Solution -

Update the visual design and add more information so that people are more inclined to donate and get involved with the Happy Hippies Foundation's efforts.

End Results -

66% increase of visitors trusted the nonprofit to make a donation

UX Research

Research Plan - 1x1 interviews with 6 participants. The goal was to discover the strengths and weaknesses of the current web design.

Objective -

Understand what users look for in a nonprofit website
Discover the pain points users face when interacting with the site
Find out how users feel about the current web design

6.5s - is the time it took for participants to find who will benefit from their donations
6/6 - mentioned there was not enough info and images of the nonprofit
4/6 - does not trust the site enough to make a donation
5/6 - expected to find volunteer opportunities on the Get Involved Page

What participants said -

"I didn't trust the site immediately from the [homepage] banner."
"I wouldn't donate because it doesn't seem legit." (Referring to outdated visual design)
"I like the colors & and background, but I need it to look more professional somehow."

Pain Points

Potential donors don't trust the nonprofit enough to enter their credit card info to donate
This is due to the website's lack of credibility and professionalism
There is doubt in the organization - pushing people to go elsewhere, which results in low donation revenue.

Observations

Images & and detailed information about the organization are driving factors for credibility
It takes a millisecond for visitors to form an opinion on a website, therefore the first impression is crucial to establishing the value & and confidence of the organization

Key Takeaway

We believe that visitors would be more inclined to donate if they trusted the organization. We might do this by adding detailed info and images to create a visual impact. Doing this will communicate the legitimacy of the organization and the importance of its mission, resulting in increased donation volume and broader community impact.

Creating a Persona

Objective - Analyze data from the nonprofit's Instagram and Twitter platforms (follower comments, videos, personal essays) and create a persona.

Meet Serena Owens

Age - 26
Education - Masters in Social Work
Status - Single
Sexuality - Bisexual
Occupation - Social Worker, Full-time
Location - Denver, CO
Tech Habits - Owns iPhone, Macbook Pro; Primarily uses iPhone

Serena battled with self-identity and worth in the past. She felt pressure to conform to her family's belief systems and didn't feel safe to embrace her sexuality. She was able to overcome these challenges and gain the confidence to embrace who she is with the support of her college friends. It pains her to see many kids are not fortunate to have that support in their own lives and question their value as well as become homeless.

Motivation - Her personal experience motivates her to support the organizations that provide for LGBTQ+ youth. She understands the value of community and wants to donate so they can continue their work.

Values - Community is powerful. Mental health is a priority.

Beliefs - Everybody deserves to feel loved and cared for. Love is Love. Be true to yourself.

Ideation

Game Plan- Brainstorm solutions that will enhance the user's experience. We kept Serena's needs, wants, and pain points at the forefront of our UX strategy sessions.

Serena's Scenario

Serena Owens, a full-time employee and a member of the LGBTQ+ community, wants to support organizations that provide resources and support for LGBTQ+ youth.

She discovers the Happy Hippies Foundation and is drawn to the idea of donating to multiple non-profits that share the same cause on one website due to the time she wants to spend researching after work.

When exploring the site, Serena was frustrated with the lack of information about the foundation resulting in her becoming skeptical of the legitimacy of the nonprofit.

How might we...

Improve the credibility of the nonprofit?
Gain Serena's trust to donate to the site?
Make information easy to find?

Brainstorm Sessions - We worked together to ideate and prioritize solutions based on impact and effort.

After running our sessions, we decided to focus on the following design solutions-

Add more imagery
Create a section that features the nonprofit's events
List specific initiatives on the donation form
Build interactive elements into the donation form
Animated hero image
Reconstruct the sitemap
Add more detailed information on each page

"I like, I wish, What if" Technique

We generated ideas that will improve the user experience.

Feature Prioritization Diagram

We sorted our ideas based on value and effort to determine what we will build first.

Site Map

We redesigned the sitemap that would allow us to share more information and still be easy to navigate.

"I like, I wish, What if" Technique

We generated ideas that will improve the user experience.

Prototype & Test

Our Approach - We designed it with a mobile-first approach because visitors are most likely to interact with the website through their mobile devices.

Each team member was assigned 2 pages due to the short time frame of the project. As we worked on our pages, we continued to collaborate, provide feedback, and iterate.

I was in charge of designing the "Donate" and "Get Involved" pages.

Sketches to Mid-fi

Usability testing and iterations were done rapidly before going into the hi-fi prototype.

Key takeaways

It's preferable to click an amount button than type an amount
Participants want to be informed an input is incorrect after typing it
Participants like to be informed an input is entered correctly
Using background colors as a visual divider helps make the content digestible
Good comments on the tab feature on Get Involved page

Mid-Fi to Hi-Fi

Donate Form -

Straightforward and interactive interfaces help communicate what is happening while filling the form out
Donors had the freedom to choose a cause they wanted to donate too

After Submission -

The sense of security and community is intact by sharing photos of people wearing the Happy Hippies logo
Furthering interaction with the organization by creating a "Get Involved" button

Get Involved -

Added the volunteer opportunities