OUT YOUTH

PROJECT OVERVIEW

Out Youth is an organization that serves to serves LGBTQIA+ youth and their allies with programs and services to promote the physical, mental, emotional, spiritual and social well being of sexual and gender minority youth so that they can openly and safely explore and affirm their identities. By improving their website and donation process to attract and engage users, and increasing  donation frequency.

Team: Julie Nguyen, Naasha Dotiwala, & Shau Huang

Role: UX Researcher & Designer

Time Period: 4 Weeks

Tools: Sketch, Craft, InVision, Adobe Illustrator, Paper & Pencil

 
 

RESEARCH

INITIAL INSIGHTS + INTERVIEWS + USABILITY TESTING

Upon looking at Out Youth current website we noted 3 major issues: 

  • Insufficient guidance to the mission statement: the Home page has bare information to help users relate to Out Youth’s mission

  • A buried and overlooked donation process: it takes several clicks for users to initiate a donation, which opens in a separate tab.

  • Lack of straight-forward & quick payment options: the website does not support nor provide a multitude of payment options (ex. Venmo, PayPal, Apple Pay), which creates missed, easy opportunities to donate.

Based on our findings we wanted:

  • To redesign the Home Page to connect users to Out Youth’s mission by utilizing essential organizational information.

  • Create a "sticky"/fixed donate button in which users could initiate the donation process anytime, no matter what page they were on.

  • Provide another quick method of payment: we chose PayPal for its universality. 

  • Set-up reoccurring donations and reasonable + custom donation options. This would work to increase donation frequency, reliability, and affordability. 

  • Cut down on the check-out process by limiting to necessary authentication fields only, including an emailed receipt.

  • Including an inclusive and personal confirmation message to share with you your donation will be allocated and used towards their mission.

Qualitative Interviews

We interviewed local Allies and LGBTQ+ Activists to understand their donation goals, needs, and pain points. Using affinity mapping, we analyzed our findings and found 4 key insights into their issue:

  • Personal Cause: Users donate and volunteer to organizations that hold a personal connection to them or someone they know- one that they can identify with.

  • Accessibility: A main pain point involving donations is that users don't believe they have the appropriate funds to do so. However, they try to help out in other non-monetary ways such as donating clothing or volunteering their time. Providing users options will help encourage them to see that every bit helps.

  • Transparency: The amount the user is willing donate is based on how much credibility and detail they receive from the organization. Users need to see where and how funds are being allocated, which contributes to its legitimacy.

  • Make It Simple: A huge proponent that would stop a user from donating would be if the form and/or application is length, confusing, has errors, or if it is difficult to access the actual donation portal. An easy donation process is a win for everyone.

Usability Testing

We asked local Allies and LGBTQIA+ members to take a look at the current website and attempt to make a donation- vocalizing their thought processes along the way. Some common themes heard were:

  • Reluctance in making a new account and password just to donate, since there were no other payment options (ex. PayPal). Frustrations were expressed the website is not keeping up with the times or trends in universal payment options. 

  • Confusion towards the organization's mission in terms of the unclear name itself, especially to someone who is not familiar with or in the LGBTQIA+ community.

  • Complaints of the lowest donation amounts ($50) being unaffordable.

  • Suspicions of a third party or possibility of being scammed involved once the website opened up a new tab.

These findings helped to further clarify what could be better improved. Being able to observe the users first-hand gave us much insight into how an everyday user would genuinely interact with a website that they had never ben on before:

  • Guidance needed: Home page lacks the content to pull inexperienced allies further into the website.

  • Differences in Engagement: Participants that identified or had a relationship with LGBTQIA+ identities were productive and proactive- freely exploring the website and asking pointed questions. Allies showed initial polite interest, but their time spent on the website was drastically shorter than their counterparts with little further inquisition into how the organization worked.

  • Videos should not serve as the main resource of information: Participants avoided playing the video that took up much of the home page. Even though it was one of the first things the user may see- it also represented a time commitment to them.The ones that did click, skimmed through the clip without playing it all the way through with no interruptions.

  • The donation process needs to be seamless: Participants had difficulty trying to navigate back to the home page after initiating the donation process and did not appreciate the fact that it was in a different window.

  • Default amounts can be discouraging: Having a pre-set amount seemed to immediately put-off participants from even considering donating. Because the number was higher than expected, the sentiment seemed to be that the amount they could donate would not "be enough" to make a negligible difference.

  • More payment options needed: frustrations surrounding the fact that users could not use common payment app options that they were already familiar with and had accounts set-up for.

 
User Flow - Current Website
Redesign
Redesign User Flow
Give a Donation
Select Donation Amount
PayPal Selection
Credit Card/Payment Information
Confirmation + Thank You
Interview Data Analysis (1)
Interview Data Analysis (1)
 

WHO IS OUR USER?

EMPATHY MAP + USER PERSONA + STORYBOARD

Empathy Map

We compiled the research data into empathy map on a whiteboard to further visualize and emphasize with our users:

User Persona

Anne Phu represents Straight Allies who have LGBTQ+ loved ones struggling with their sexuality. Anne's goal is to help her loved ones go through their self-discovery journey.

Mike Young represents the LGBTQ+ advocates who wants to help in his community through monetary donation, but face income limitation.

Storyboard

We created a storyboard to identify Anne's pain points, including the missed opportunities that occured throughout her journey as a potential member donor.

 
User Persona (1)
User Persona (2)
Journey Map Storyboard
 

DESIGN

DECISION FLOWS + WIREFRAMES + ITERATIONS + STYLEGUIDE + HIGH FIDELITY PROTOYPING

We prioritized on redesigning both the home and donation pages based on our research findings and wanting to address our users' main pain points:

  • Home Page Design Goal: To create more opportunities highlighting the value of Out Youth's services and community to further encourage donations and membership.

  • Donation Process Design Goal: Simplifying and streamlining donation process to increase users' likelihood of completing the donation process successfully.

Decision Flow

Wireframes

Testing + Iterations

  • Failure to Address Our Users

  • Our design focused too much on Straight Allies and overlooked Gay Activists’ goals & needs.

    • "Is there no difference between one-time and monthly donation process?”

    • “This is asking for a lot of my personal information...do you really need my address?”

    • “Nothing really catches my eye on the home page, it’s hard to focus on what I am reading.”

  • We revisited research on existing collected interviews, and reached out to some previous participants to understand their needs, goals, and pain points with their monthly donations.

Style Guide
Inspired by Out Youth's supportive environment and rainbow of colors typically associated with the LGBTQIA+ youths and their journey into self-discovery and expression.

High-Fiidelty Prototyping

 
Decision Diagram
Wireframe (1)
Wireframe (2)
Empathy Map
Wireframe (3)
Hi-Fi User Flow
Prototype
Style Guide
 

REFLECTIONS

FUTURE DEVELOPMENTS + ACKNOWLEDGEMENTS

What We've Learned

During user research, I was surprised by the engagement level difference between Straight Allies and LGBTQ+ Activists. It is astonishing to see that a business can potentially lose out revenue when they do not keep their users in mind.

What's Next?

Continuing to find balance between the the objectives of the LGBTQIA+ community and making information more accessible to allies.


Our Thanks

This project has been an amazing learning experience. The most enjoyable part for me was user research. It was inspiring to listen users’ stories on why they donate, and able to apply these insights into my design.