PFLAG MOBILE APP

App Design

Mockup 8.png

OVERVIEW


PFLAG is a national nonprofit that connects LGBTQ+ people, families, and allies to support, information, and resources. The PFLAG app is based on the existent site and connects more users to support, local chapters, and ways of donation based giving and advocacy.

Bridging a gap in the market by creating the first major LGBTQ+ national organization app by providing another access point to vital support.

Scope

⏳Timeframe

2 Weeks

👩🏻‍💻Role

UX Design:
Student Project

🛠Tools

Figma, InVision

📊Practices

User Interviews, Market Research

Drawing (7).jpeg

The Challenge

National LGBTQ+ non-profits such as PFLAG, GLSEN, GLAAD, Trevor Project, and Human Rights Campaign have responsive websites but not any resource or support apps. Many LGBTQ+ apps are chat sites and dating apps which introduce a host of privacy and safety issues with people in vulnerable situations. 20% of LGBT youth experience violence via dating apps versus 12% of their heterosexual peers with a doubled amount of risk associated making it all more important for safe and moderated LGBTQ+ oriented resource apps to have a presence.​ [1]    In addition LGBTQ youth are nearly three times as likely as non-LGBT youth to say they had been bullied or harassed online (42% vs. 15%)  [2]

PFLAG wants to create another entry point for users to be able to access information in an app based format. PFLAG Chapter Network has over 400 chapters across the country providing confidential peer support, education, and advocacy to LGBTQ+ people, their parents and families, and allies. 

pexels-sharon-mccutcheon-3738057.jpg

EMPATHIZE

TARGET USERS:

LGBTQ+ people, families, and allies. 

Drawing (35).jpeg

Design an app that creates a supportive presence in the app market specifically for LGBTQ+ individuals, family, and allies. 

Provide PFLAG's core resources in an app based format, ultimately linking users to tangible real world places to find help. 

Drawing (34).jpeg
Drawing (36).jpeg

Align with PFLAG branding. 

Understanding where the search for support begins...

To begin, I wanted to conduct market research to understand why users might search for LGBTQ+ related information and apps. 
In the app store I mostly found:
-specialized start ventures for support apps
-unmoderated dating apps

In addition, I found online information rich publications linked to national LGBTQ+ organizations about LGBTQ+ habits online. The following graphs show data collected for  
GLSEN's  publication called "Out Online".

Research Questions

What are some successful non-profit design features?

Do users desire social/dating apps over other types of apps support/affinity apps)?

Why do users search for LGBTQ+ apps? 

Is it common to seek dating/social apps in place of supportive social environments?

Understanding the users...


To gather some data by the numbers, I conducted a ten question survey. Eight participants ages 25-47 of all genders and identities responded including family members and allies on what their intentions when they sought LGBTQ+ related information online.  

Survey Findings

I conducted phone interviews with three LGBTQ+ individuals ages 20-34, two female, and one non-binary person to get a more in-depth and personal scope about their information seeking about their LGBTQ+ identity online. 

Key Findings...

Drawing (37).jpeg

Most of the support scenarios stem from physical and mental health needs and the desire to come out to family and friends. Typically if this is sought out online, in person attempts are for some reason unattainable. 

Drawing (38).jpeg

Users face a lot of social isolation, misconceptions, and confusion about themselves even within dedicated safe spaces such as GSAs therefore gaining credibilty and trust is important. 

Drawing (39).jpeg

Apps may serve as an introduction to types of resources to take the edge off of the search for emotional reassurance.

DEFINE

MEET BREE
A nursing student that is nervous about coming out to her parents. 

 I created a persona named Bree based on research participants' emotionally changed experiences to empathize with the rather complicated process of reaching out. Being such a deeply personal experience, I created a storyboard and an empathy map to inform how I could structure an app in times of stress and needing to conceal identity for safety.

Persona

Storyboard

Storyboard

PFLAG already has an existent non-profit website that helped define the site map and hint at what features might be most useful to include in the app. Unfortunately the site is a disorganized maze, a common pitfall of non-profit sites. I made an app map to simplify site based structure for less cognitive load during a stressful search for info.  I created the user flow to understand the various actions a user like Bree might need in a time of crisis.

PGLAG App@2x.png

App Map

User Flow

PFLAG Key Features.png

Key PFLAG Features from Desktop Site

IDEATE

Once features were defined, I drew low fidelity sketches using pen and paper and wireframes in Figma to visualize a set of tasks based on Bree's priorities: mental health, coming out to family, and connecting with a local support group.  PFLAG had a simple style guide so I matched the palette and pulled as much design guidance as I could for high fidelity screens.

PXL_20201206_231046355.jpg

Lo-fi Onboarding Screens

Lo-fi App Screens

Lo-fi App Screens Continued

Balancing brand identity, user needs, and app structure....


I wanted to freshen the dated appearance and gear towards adolescents and young adults due to their high needs revolving around the coming out process common in this life stage.
 

In the style tile you'll see I utilized a lot of transparent buttons for menus and an interplay between the purple and orange with a fresher lighter look than the current sharp corners and bold contrasts between grey tones. I used photographs to reflect various gender expressions due to comments from interviews where users expressed they rarely saw themselves depicted on resource sites. Representation can be a powerful thing. 

Lo-fi App Screens Continued

Style Tile

Wireframes

Mid-  Fidelity Wireframes

Priority to design...

When creating this design it was important to: 
-to keep consistent with PFLAG's main features: Support, Donation, Finding a Chapter
-create a quick exit disapproving community/family/governments as found in market research
-stay consistent with branding
-
align with Bree's needs of a simple navigational experience in a high anxiety situation
 

I then developed two sets of high fidelity mockups, after consulting with my mentor changing a few elements before prototyping. 

High Fidelity Iteration 1

Hi Fidelity Iteration #1 

High Fidelity Iteration 2

Hi Fidelity Iteration #2

Sliver.png

PROTOTYPE

With all of the emotional and security factors accounted for I created a Figma prototype however I faced technical challenges so I later used an Invision prototype and was ready to test my design on target users.

iPhone 11 Pro Max.png

TEST

TEST FORMAT
Video conference with screen sharing enabled of three LGBTQ+ identified participants, ages 21-34, one female and two males via Zoom Meetings.

I sought three participants for user test interviews. Due to the scope of this project I was interested in the users that related to Bree: individuals that have had to contend with a tough coming out process. I felt it was helpful to sort out the wide array of resopnses using an affinity map.

What test participants say...

HEATHER,
LESBIAN, TRANS FEMALE, 34

"I wish the support button was doubled, one on nav bar, one on CTA.  Much more useful than joining PFLAG meetings to me. 

BLIXA,
GAY, CISGENDER MALE, 21

"As for in person support groups, I want to be able to chat with who is leading the group. It should lead you to contact to chat with. Ease of access.

MITCHELL,
GAY, CISGENDER MALE, 29

"I like the [option to turn off the] location tracking.
If you want it to be discreet have a fake logo. Fake logo on the screen? 

Test Results...

Participants all completed tasks at 60% accuracy rate.
This is how my user test aligned with the
test goals


1. Observe if a user can complete an assigned task.
Users were able to complete all tasks independently.
Participant #1- 70%, poorly constructed prototype which was fixed by second test by placing screens into InVision
Participant #2 100%, completion rate
Participant #3 60%, completion rate, confused by indirect title and lack of affordances on clickable links


2. Identify any gaps in prototype or user flow.
-hamburger menu screen to further assist navigation
-better affordances on Local Chapter Page tabs
-succinct yet descript title copy. 


3. Are users supported enough during a difficult phase in their life?
-according to both test and research interviews, survey little to moderate support prior to using PFLAG
-after test some desired clarity for information on meetings, more reassurance, more people based depictions of support, and online offerings for support groups and prompts on how to communicate with admins of local chapters. Support isn't limited to in person, especially with introverted and anxious users. 


4. How well does the application encourage users to engage to pursue connections with services?
Not optimally. Some improvements can be made in info architecture and UI design of Local Chapter, Contact, Location, Mental Health, Mental Health Article, pages.

Affinity Map

Key Takeaways...

Once I concluded the interviews it became easier to define the key takeaways to create a priority revision list:

-Better affordances and information architecture for the article titles and local chapter tabs
-Better affordances for card swipe action and CTAs on local chapter tabs
-Specify copy on all article links and onboarding pages
-Proper depictions: replace imagery to people whenever possible, proper use of trans icon needed on Sexual Health button
-Increase security by removing rainbow, using more ambiguous icon for favicon for home screen on user's device
-Build out hamburger menu and bottom navigation pages 
-Create a card format to limit scroll on Locate Chapter screens 

Priority Revisions

Conclusion

In summary, I became very engaged in building for social impact. Researching the topic revealed there are always going to be communities that require a lot of assistance and that many systems in place that are supposed to work such as university GSAs, health care providers, and affinity institutions fall short in surprising ways. Building a project of this nature is very serious and if done without consulting the community it could miss the mark, betray trust, and miss reaching those who need it the most; thus meeting the emotional needs of my users was central to this project. 

I grew as a designer not only in the research aspect but building skill in UI. I'm still finding my own style and I felt like building my own app really brought this out moreso that other projects because of the opportunities to build several separate screens versus a more information heavy project such as responsive web design or integrating design into an existent system. This project felt like it was more of own which I felt proud of.  

In the future, if I was to advance and build on this project more I would certainly want to research, define, and iterate designs based on the input of family members and allies, a source of information not present in the scope of this short project. I would also want to challenge myself to seek out the needs and perspectives of conservative family members and how design could be informative and persuasive in order to build tolerance around the issue.
 

Key Takeaways:

• Apps for LGBTQ+ have a whole host of complex security and emotional needs to keep users safe, reassured, and acknowledged

• The LGBTQ+ community is not as unified as I assumed, there are numerous identities and each identity has it's own unique needs, understanding this means I as a designer need to build credibility and trust with my design decisions
• Expand the scope of the app audience to create additional parts to the app

What's Next?

• Handoff to development

• Investigate a more effective way of quantifying the idea of if a user feels "supported" in meeting their needs with PFLAG based on how the information is presented
• Conduct more interviews and testing to see the needs of families and allies