Designing A Friend-zone for an LGBTQ+ūüĆą¬†Christian dating app

A 3-week design sprint to research, conceptualize & execute on the product design of a dating app for LGBTQ+ Christians looking to connect with friends, as well as dates.

TABLE OF CONTENTS

The ContextTHE COMPANYThe challengeMY roleproject kickoffswot analysiskey constraintssurvey designguerilla user researchUSER INTERVIEWSAFFINITY MAPPINGUX PERSONAstoryboardproblem statementdesign hypothesiscompetitive analysissketchesprototypeusability testinguser interfacefinal reflectionsTESTIMONIALS

THE CONTEXT

In 2015, the Supreme Court delivered the monumental decision to make same-sex marriages legal across the country. It sparked celebration around the world and #LoveisLove has become a permanent echo of this around the internet to this day.

With everything that happened in 2020, it may be hard to remember the seemingly never ending fight for marriage equality. However, the fight for acceptance is all too familiar, even to this day, among the LGBTQ+ Christian community.

Being too gay for Christians, & too Christian for the gay community, many LGBTQ+ Christians have no place to call home. They need a place to feel supported & process the complex layers of their identities.
I was enlivened by the opportunity to work on such a socially inclusive project in hopes of bringing people from a such a niche community together for fellowship, friendship, & romance.

I signed a non-disclosure agreement & have omitted certain confidential information in this case study as they pertain to non public facing features. All the information in this case study is my own and does not reflect the views of believr or their employees.

THE COMPANY

WHAT¬†IS¬†BELIEVR? ūüôŹūüŹĺ

Believr is a dating app where LGBTQ+ Christians can come to find connection, belonging, & love. The key features the app markets to distinguish itself from the competition are its values-based matching algorithm  & community chat.

THE CHALLENGE

A¬†NICHE¬†WITHIN¬†A¬†NICHE ūüĎĮ

People who are passionate about Christianity & also identify as a member of the LGBTQ+ community have virtually no spaces (digital or physical) where they can safely meet others who share the same values of them.

Tailoring an improved user experience for this community while maintaining the business goals of increasing paid subscribers was at the forefront of our project goals.

The beta version of the app was released to the public on Apple App Store & Google Play less than one month prior to this project. There were many opportunities for usability improvements, however we wanted to do thorough user research before defining our MVP for our 3-week design sprint.

MY ROLE

Coming out as a ux.icorn ūü¶Ą

I led the product design experience for the 3-week design sprint with 1 other user experience designer remotely over Zoom.
‚Äć
‚ÄĘ We conducted extensive research through user interviews, surveys, usability testing, &¬†various business analyses.

‚Äʬ†We developed a design persona from a 600+ post-it affinity map in order to differentiate our work from their marketing personas.
‚Äć
‚ÄĘ We created a user scenario from the fleshed out persona &¬†created a storyboard of believr's user experience.

‚ÄĘ We sketched out 3 design concepts to generate ideas through brainstorming techniques &¬†get quick feedback from stakeholders.

‚ÄĘ We designed high-fidelity wireframes &¬†a prototype in order to conduct a 2nd round of usability tests &¬†iterate on a final design.
‚Äć

 KICKOFF DISTINCTION

Applying Product INCLUSIVITY¬†to the 5 stages of design thinking ūüíě

Building inclusive products should never be an after thought, so we made every attempt to incorporate inclusive design principles from the beginning to the end of our design process.

From our initial pitch with the CEO, we knew the majority of the app's current users were cis, male, white, able bodied, & in their mid 20s to mid 30s.

In order to build the product in the most inclusive ways, we would have to make sure to empathize, define, ideate, prototype, &¬†test our design with people from different demographics to get a 360¬į representation of user needs.

In my opinion, this should *always* be a part of any design process. However, it is particularly critical to make this distinction when working with the LGBTQ+ community.

SWOT ANALYSIS FROM STAKEHOLDER INTERVIEWS

BEING¬†PROUD¬†OF¬†strengths &¬†curious of OPPORTUNITIES ūü§Ē

CEO

ADAM

OUTREACH LEAD

DAVID

PR LEAD

EVAN

Our first step was to interview 3 stakeholders in the project so that we could assess the business strengths, weaknesses, opportunities & threats from a cross-functional perspective.

A consistent theme surfaced from each stakeholder about the strength, resilience, & vulnerability of this niche community. The community not only is looking for love, they are looking for emotional support in their journey as queer Christians.

Believr is the only digital space serving this community & so it can have the greatest impact building out its features with "community" in mind.

DESIGN INSIGHT

The app is more than a dating app. It is bringing an underserved community together & should also have UX/UI elements that mirror a social network.

KEY CONSTRAINTS

Not today satan, not today ūüėą

1. Time was our biggest constraint with a 3-week sprint window.
‚Äć
2. Engineering limitations especially concerning modals & popups.

3. Pre-existing architecture should exist for our designs so they can be actually be implemented in a reasonable timeline.

4. Business objectives to keep intrigue to pay for subscriptions.

5. Values alignment to keep the app from feeling like a hookup app.

6. Christian faith is key. Believr is open to people of other faiths joining, however, it is not designed towards other religions.

7. Non-existing budget was also a concern for this sprint.

8. No access to their lead UX designer because he was on vacation.

9. GDPR data privacy laws would delay the launching the app outside of the United States.

10. Brand aesthetics & style guide are already in place.

‚Äć
‚Äć

SURVEY DESIGN

COME¬†THROUGH! THE¬†INSIGHTS¬†ARE¬†OPULENT ūüŹĀ

We sent a 27 question survey to 735 users of the app
& received 109 responses with a14% conversion.

We were successful in all our main goals with our survey design.
‚Äć

‚úÖ Validate users were using the app as a social network.

‚úÖ Mine for hidden motivations why people were using the app.

‚úÖ Uncover the sticky areas where users are frustrated.

‚úÖ Understand if users see the value in a paid suscription.

‚úÖ Unearth patterns in requests for potential features ideas.

‚úÖ Identify a diverse set of users who we could interview.

DESIGN INSIGHT

There is overall lack of satisfaction with how "connections" aka matches are occuring on the app. This could be a component of our MVP.

GUERILLA USER RESEARCH

CROSSDRESSING¬†AS¬†CHRISTIAn ūü§ę

The easiest way to access users from day 1 of the project was to create a create a profile on the existing app.  I was able to connect with potential matches & chat with people from the community with complete ease... just don't tell my Jewish husband!

Meeting users where they were at created a sense of ease, trust, & familiarity almost immediately.
‚Äć
‚Äć
Building authentic connections was a fun way to learn more about the users &  also proved to be an effortless way to acquire users for interviews & usability testing.

P.S - In case you are wondering...I never lied in my profile or pretended to be more devout than I actually am. I was completely authentic in all of my exchanges & always revealed I was a product designer working with the app in all initial conversations.

USER INTERVIEWS

KIKI¬†TO¬†SPILL¬†THE¬†TEA ūüćĶ

We divided our interview strategy into 3 parts with 12 users to make sure we were getting a comprehensive understanding of the challenges the users were facing in their lives & on the app.

1. We interviewed 6 existing beta users of the app which we found from the community space & connections features.

2. We also conducted usability tests on the existing app with 3 LGBTQ+ Christians who had never seen the app before.

3. Finally, we interviewed 3 additional users who had recently canceled their paid subscription with the app.

"Believr as a dating app is at the bottom of the list for me. I was interested in the community space."

FRUSTRATION  OVER
 FILTERING LIMITATIONS

Users were overall frustrated by the current limitations of filtering. They wanted to filter by distance, denomination, & relationship type.

SKEPTICAL  ABOUT VALues perceNTAGE

The algorithms matching the users were often showing matches in ranging from 10-50% which made the users question the validity of the connections.

CONFUSION OVER UNFAMILIAR ICONS

Users were often confused by icons that did not follow conventional standards. These icons were meant to represent "next" & "connect."

OVERWHELMED BY COMMUNITY SPACE

Users loved the concept of the community chat, however all users were overwhelmed by the execution of its current UX state. Currently, it has one chat area where all 700+ users are chatting at the same time.

DESIGN INSIGHT

There needs to be a way to clearly & more effectively filter connections, especially as it relates to friends vs romance.

THE DISCOVERY

AFFINITY¬†MAPPING TO¬†THE¬†GODSūüďć

Timelapse video of our affinity mapping process.

We created a qualitative map of users thoughts, observations, & survey result data in order to define our UX persona, problem statement, & design hypothesis.  

634 post-its later & 6 hours of later we had organized the enormous amount of qualitative data into 42 themes.
‚Äć

DESIGN INSIGHT

Restructuring the free vs paid features of the app could increase user satisfaction & user retention & boost revenue.

UX PERSONA

HALLELOO TO¬†OUR¬†DESIGN¬†DIVA ūüíĀ

Skye

QUOTE¬† ūüí¨

"There are a lot of apps out there that are toxic. I'm so excited for the essence of this app where people are just wanting to find themselves. Although it's been hard finding a way to navigate between friends & romance." 

GOALS¬† ūüéĮ

‚ÄĘTo meet new friends &¬†go on dates.
‚ÄĘTo build strong connections with LGBTQ+¬†Christians.
‚ÄĘTo find resources to help them with their coming out journey.
‚Äć

BIO¬† ūüďĖ

New to their journey as an LGBTQ+ Christian, Skye is looking for community & hopes Believr will the solution. Although they have a committed relationship in mind for the future, connecting with LGBTQ+ Christians is their priority.

VALUES¬† ūüíě

‚ÄĘDevoted
‚ÄĘIntentional
‚ÄĘExtroverted
‚ÄĘMoralistic

FRUSTRATIONS¬†ūüėě

‚ÄĘThey don't have queer Christian friends.
‚ÄĘHookup culture is off-putting to them.
‚ÄĘHaving a hard time interpreting doctrine in context of their sexuality.
‚Äć

MOTIVATIONS¬†‚ÜóÔłŹ

‚ÄĘThey want to explore their identity.
‚ÄĘFinding relief in knowing there are others like them.
‚ÄĘKnowing that there is a possibility to find someone to love.
‚Äć

CURRENT EXPERIENCE STORYBOARD

PROPORTIONIZING INTO COMICS

We also created a storyboard of Skye's current experience within the context of the app & their journey as a LBTQ+ Christian.

REXAMINING THE PROBLEM

POOR RELATIONSHIP
EXPECTATION SETTING CAUSES 
UNCOMFORTABLE INTERACTIONS

Believr was designed as a dating app to connect LGBTQ+ Christians together. We have observed it isn't meeting the goals of who is there for friendship & who is there for romantic purposes. This is causing a disconnect between the user's experience and their expectations.

"how might we improve the app so our users are more successful in creating the relationships they intend?"

INTEGRATING THE SOLUTION

INTRODUCING THE FRIEND ZONE

The problem can be resolved by reframing several steps of the user task flow so that finding friends is equally weighted in a UX/UI context as finding dates currently is.


1. Reframe the onboarding process to be more clear about Believr being about community as well as dating.

2. Enhance the profile page so that is incorporates more filtering criteria. Examine how the match information is presented.

3. Integrate an option to browse through friendship matches.

4. Flesh out options for what is free vs paid to add value to Spectrum membership.

5. Enhance private messages with prompts & conversation starters.

competitive analysis

ORDERING¬†A¬†2-PIECE¬†&¬†A¬†BISCUIt ūüćĹÔłŹ

Because we knew we wanted to explore the idea that people could find frienship through Believr, we knew we had to perform a little more research on social networks. In addition, looking into how dating apps had already tackled a social component.

‚Äć

We started our analysis with dating apps that were repeatedly mentioned in our survey results & user interviews.
‚Äć

Bumble has a "BFF" mode.
HER has a "follow" function.
Hinge connects people through comments.
‚Äć‚Äć

DESIGN INSIGHT

There are several overarching social concepts to explore from other dating apps that our users are already familiar with.

We moved on to performing an analysis of social networks that are known for their expansive communities.
‚Äć‚Äć

We were trying to figure out if there were any patterns to which led to the success of these platforms.
‚Äć‚Äć

When it comes to social media, content reigns. The success of all of these communities is directly attributed towards motivating users to create their own generated content.

Video, in particular, is driving upwards of 82% of web traffic according to Cisco's annual white paper in 2020.
‚Äć‚Äć

DESIGN INSIGHT

Digital communities & content generation are inseparable. Incorporate an experience where users can create their own content.

SKETCHING OUT CONCEPTS

HOW TO BE A UX DESIGNER
WHEN YOUR POWER GOES OUT ⚡

In the middle of the design phase of this project there was a mega winter storm that spread across the country leaving millions of people without power....I was one of those lucky people! 

Without heat, hot water, or reliable internet, I grabbed my markers, notecards & scissors to stay productive.

CONCEPT ONE

DECIDE WHO YOU WANT TO MEET 
WHEN SETTING UP YOUR PROFILE

This is a model that is employed by both Tindr & Bumble. Essentially when you set up your profile at the beginning of the onboarding you toggle to switch either friend mode, or date mode. You can only browse matches who are also toggled in your same mode.

CONCEPT TWO

INTEGRATE a "follow" feature on the profiles

Clearly inspired from social networks, dating apps like HER & Hornet, have already successfully implemented this approach. These apps have even developed user generated news feeds so your friends can follow your content.

CONCEPT THREE

ALLOW THE USERS TO DECIDE
IN THE MOMENT

This specific model was inspired by Hinge's "heart" commenting, however, has not been implemented on any dating app before integrating a friendship UX/UI. This would allow the users to click a thumbs up icon if they wanted to be friends, or a heart icon if they wanted to go on a date. Users could decide in the moment, on a profile by profile basis how they wanted to develop their relationships.

I have consulted with the judges

C3...SHANTAY, YOU¬†STAY ūüŹÜ

After a meeting with the 3 stakeholders for the project, it was decided that concept three should be fleshed out & pushed forward into usability testing.

They chose this design specifically to test because of its uniqueness, nerve, & talent.

PROTOTYPING & USABILITY TESTING

YOU¬†BETTA¬†WERK ūüõ†ÔłŹ

We created a 40 screen prototype in Figma in the final week of our design sprint with 5 core features as part of our MVP.
‚Äć

These 5 features were chosen specifically after careful analysis from the quantitative & qualitative data we had compiled from user interviews, the survey, usability testing, & business analyzes.

We ran usability testing on these features with 5 users.

ADVANCED FILTERING

FILTER BY LOCATION, GENDERS, & DENOMINATIONS

Users can set different connection preferences for who they want to meet for friends & who they would like to meet for dates.

"Oooo! This is a feature I like...I am loving this! If I'm looking for dates or marriage I really care about filtering by denomination. But with friends I don't mind as much."

PROFILE PAGE

INDICATE IF YOU WANT 
FRIENDSHIP 
OR DATES WITH LIKE 
& HEART ICONS

As users are browsing through their matches, they can decide in the moment if they are interested in pursuing friendship or romance.

"I love how there is no pressure to be romantic. It's nice to communicate that we would be better friends than partners."

MODERN MESSAGING

INLINE REPLIES, MESSAGE REACTIONS, & INBOX CATEGORIES

Inbox categories separate out different types of messages into how they pertain to dates, friendship, or community spaces.

"...currently this feature is giving me A.I.M. texting feels... and this new design makes it look much more modern..."

SPECTRUM MEMBERSHIP

INCREASING THE PERCEIVED
 VALUe OF THE PAID 
SUBSCRIPTION

We added 4 potential feature ideas & also created an updated business model where users can subscribe by 3 & 6 months periods.

"It's really cool that this app is being so well thought out. I'm excited to see how these new features bring in a different set of users to the app."

QUESTION OF THE DAY

VIDEO PROMPTS TO 
START CONVERSATIONS

Every day, users can submit up to a 60-second video answering a creative question in hopes of building community & starting interesting conversations.

"Stories are another way to get know someone. You can cultivate friendships & relationships in an authentic way."

BEFORE & AFTER

HOW IT STARTED VS 
HOW¬†ITS¬†GOING ūüĒÄ

We sent a follow up survey to get more qualitative & qualitative data from users we had interviewed or who had performed usability testing specifically about the before & after screens of our design process.

Here's what we found.

64% of users preferred our updated connections filters design because it offered less confusion around finding friends versus finding romance.

"I have heard from friends also on the app that it would be nice to have the option to explicitly NOT be seeking dates."

82% of users preferred our redesign of the profile page because they found it clearer, more engaging & more intuitive.

"It is very to the point. It is more clear & engaging. I like that it shows the profile & brief info of a person."

73% of users preferred our redesign of the connections explanation screen because it offered up goals & specific purpose for the app.

"The icons next to the explanations give more clarify for those of us who are more *cough* picture learners."

82% of users preferred our redesign of the message inbox because it is more organized, familiar & encourages exploration.

"The first is boilerplate, it seems. The second allows friend-zoning. I like that."

73% of users preferred our redesign of the direct message screen because it is more modern, familiar, & intuitive to use.

"The redesign is just more modern & allows for more feelings while conversations are happening."

82% of users preferred our redesign of the empty connections screen because it was less busy & frankly just more cute.

"It looks less like a boring document. I mean, who can be upset when they don't have connections while you're looking at a adorable sleeping unicorn??" 

73% of users preferred our redesign of the Spectrum membership page because the graphics were prettier & because of plan options.

"The graphic is prettier & it seems less wordy. I like that the price options are clear & the layout is way more fun." 

USER INTERFACE ADJUSTMENTS

Look at that body-ody-ody ūüĎÄ

As we were designing out the prototype, we wanted to make small tweaks to the user interface to ensure the app was following up to date conventions, trends & guidelines.

ICONOGRAPHY

CREATING FAMILIARITY 
WITH ICONS

Because some of the bottom global navigation icons were unfamiliar to the users, we reinforced their meaning by adding the icons to the top of hyperlinked screens with the text meaning under them.

We also swapped out completely unrecognizable icons, such as the original "connect" & "next" icons with ones that were more intuitive.

ROUNDED CORNERS

GIVING OFF A FRIENDLY VIBE 
WITH ROUNDED UI

The concepts of safety, friendliness, & trust were repeated themes in our user testing.  To strengthen those ideas throughout the app, we rounded the corners of images, buttons, cards, & miscellaneous elements.

A NEW COLOR

INTRoducing friendly cyan

In order to distinguish the different experiences of chatting with people whom you want to be friends with from those you want to date, we introduced a new color into style guide.

We chose this color specifically because on the color wheel it is complementary to the pre-established pink tones. Psychologically, cyans instill peace & calmness & rational thinking.
‚Äć

BACKGROUND COLORS

LESS CONTRAST IN 
BACKGROUNDS

Although high contrast is great for readability, too high of contrast can cause eye strain for many users. We made small tweaks to the backgrounds of the app to adjust them to dark grays & off whites.

This created a softer & friendlier look in addition to increasing readability.

‚Äć

TARGET POINTS

WHY SIZE ACTUALLY
 *DOES* MATTER

No one knows what to do with an extra small thingie. I mean target points, of course! Get your mind out of the gutter.

We increased the size of controls like back arrows, hamburger menus, checkboxes, & message windows to at least 45 pixels for target areas.

These are standards set forth from Human Interface Guidelines by Apple & Material Design Guidelines from Google.
‚Äć

FINAL REFLECTIONS

BEING A UX DESIGNER IS KIND OF
LIKE¬†BEING¬†A¬†LAWYER ‚öĖÔłŹ

You are one of the biggest advocates for the user that exists. It's your job to put together a strong case with solid qualitative & quantitative evidence to present before the court, judge & jurors.

WHAT YOU WANNA DO IS NOT
NECESSARILY¬†WHAT¬†YOU'RE GONNA¬†DO ūü§∑

At the beginning of this project, I internally wanted everything to be clear cut & design this into a "regular" dating app. However, as we interviewed users and understood their needs for community, we knew we had to switch directions. Ultimately, I wouldn't have done it any other way.

GET OUT OF YOUR 
COMFORT¬†ZONE ūüĎü

I was absolutely shook to learn that in 2021 there are still people who are struggling to claim their gay cards. I assumed because I've been out for so long & am surrounded by others who are as well, that my experience is standard across the board. It's important to work outside of your comfort zones to understand your users & have a better understanding of the world.

IDEATE LOTS OF IDEAS FOR STAKEHOLDERS WHO LOVE
TO¬†SAY¬†NO ūüí¨

There are some stakeholders who absolutely love to say no. In the ideation phase, come up with as many ideas as possible. They can't possibly say no to all of them! 

EXPECT¬†THE¬†UNEXPECTED ūü§Į

In our final presentation meeting while I was presenting the final slide of our project, the lead UX designer for believr returned from his vacation from the last 3 weeks of our design sprint. It threw us off in our presentation as we were not prepared to have to defend some of the decisions that had previously been discussed with other stakeholders.

DON'T¬†FORGET¬†TO¬†JUST HAVE¬†FUN ūüėó

Inspiration can strike anywhere at anytime. It's easy to get lost for countless hours/days/weeks in our design software & video conferences these days.

Schedule in time for yourself to do other things you love. If you can't love yourself, how in the hell you gonna love someone else? 

Can I get an amen up here? ūüôŹ

TESTIMONIALS 

ADAM

CEO & CO-FOUNDER

I really appreciated your passion & energy towards the project. The designs you came up with definitely challenged & improved how we think about the user experience. I know we will be using the insights that you found.

PASCAL

CREATIVE LEAD

It's engaging, an easy connect point between people & simple to use. It looked great! The community desire over dating was very surprising to me! Interesting findings overall in the research, thank you!

DAVID

OUTREACH LEAD

ūüĎŹūüŹĹ¬† OBSESSED¬†ūüĎŹūüŹĹ In all seriousness I¬†really do LOVE¬†this feature. It makes sooooooooo much sense to me. Being able to look for both friends &¬†romance at the same time would really just set us apart from EVERYONE¬†out there.