top of page
HH PROTOTYPES.png

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 -

  1. Understand what users look for in a nonprofit website​

  2. Discover the pain points users face when interacting with the site

  3. 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."

Creating a Persona

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

serena owens.png

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...

  1. Improve the credibility of the nonprofit?

  2. Gain Serena's trust to donate to the site?

  3. 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

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

Final Product

bottom of page