Creating a Dating App Leveraging Mutual Connections
Role: UX Research, UI/UX Design, Brand Identity
7Degrees is a dating app that leverages mutual connections to foster love within the familiarity of your inner circle. This platform not only connects individuals but also allows friends to vouch for their friends, creating a safe and authentic space for meaningful connections to flourish.
Problem
Dating app users struggle to find compatible matches and do not always feel comfortable going on dates with strangers they meet online.
Solution
Utilize mutual connections and enable friends to vouch for each other, fostering a sense of comfort when building relationships with online strangers and providing deeper insight into someone’s personality based on their profile.
The Final Product
How did it all start?
While catching up with my friend, we discussed the common frustrations of encountering incompatible matches on dating apps. In our conversation, she floated the idea of utilizing mutual connections and enabling friends to vouch for each other, fostering a sense of comfort when building relationships with online strangers. Excited by the prospect, I took the lead on the UX research and design as we embarked on this journey to bring her idea to life.
Understanding the user
There were four main goals I wanted to accomplish with my user research.
Validate the assumption that people are more open to connecting with a stranger if they share mutual friends.
1
Identify pain points in the current online dating space.
2
Uncover opportunities to enhance the user experience in the online dating space.
3
Gather insights to understand user behaviors, needs, and expectations related to the 7Degrees dating app.
4
To achieve these goals, I conducted 4 user interviews with dating app users to gain insights on their perspectives and experiences in using dating apps.
User interviews validated interest in the idea of going on dates with mutual friends and revealed people want more insight into compatibility when viewing someone’s profile.
Some things that were said:
“If I see mutual friends between me and someone I’ve matched with I’ll ask my friend about the match.”
“There’s an added layer of comfort knowing that the person you’re matching with knows people you know. There’s more common ground and things to talk about usually.”
“It’s hard to tell through the minimal info from someone’s profile whether or not we’d be compatible.”
Key Takeaways:
People respond positively to the idea of going on dates with mutual friends.
People feel hesitation to go on dates with someone from a dating app for reasons including not knowing whether or not the person is safe or real.
There is an added layer of comfort in going on a date with mutual friends for reasons including
knowing the person is real
having a higher probability of sharing common interests
having someone who can vouch for their date.
People want to know about personality compatibility when looking for a partner.
People like features such as photo captions and prompts on profiles to provide more insight into someone’s personality.
A Competitor Analysis provided a baseline for basic profile information, references for how people match and connect with one another, and features that provide insight into someone’s personality.
In my user interviews, three prominent dating apps were mentioned: Hinge, Coffee Meets Bagel, and Bumble. Delving into these platforms, I conducted a thorough comparison, analyzing features, functionalities, strengths, and weaknesses. Integrating this insight with user preferences and criticisms from their dating app experiences sparked ideas about the potential design and functionality for our new app.
Competitive Analysis Sample
Defining the User by Referencing Insights Gathered from User Interviews
During the interviews, common sentiments emerged among all participants. However, there were distinct sentiments that diverged between male and female users. To ensure inclusivity and consideration for both user groups, I opted to create two personas—one representing the male perspective and the other representing the female perspective. This led to the creation of Emma and Cameron.
Note: In this project, my interview participants were predominantly heterosexual and cisgender individuals. In a broader iteration of this product, it would be essential to engage a more diverse participant pool to ensure a more inclusive representation of various groups of people. This would be reflected in the personas as well.
Crafting How Might We Statements to Steer the Direction of Ideation and Effective Problem Solving
To better articulate the challenges and to steer the project in a direction aligned with meeting user needs, I formulated two How Might We statements addressing concerns raised during my interviews.
?
How might we help users feel more comfortable going on a date with someone from a dating app?
?
How might we make it easier for users to gauge their compatibility with someone from a dating app?
Ideating Different Ways to Address User Concerns
Having identified the how might we statements and personas, the next step was to brainstorm solutions. This encompassed devising user-friendly implementations for the proposed ideas of leveraging mutual connections and a vouching system in addition to ideating features to tackle newly revealed issues from user interviews.
How might we help users feel more comfortable going on a date with someone from a dating app?
HOW MIGHT WE QUESTION 1
FEATURES THAT ADDRESS HOW MIGHT WE QUESTION 1
Showcasing Mutual Connections and Which Friends have Vouched for the User’s Match
The connection map and its expandable mutual connections list allows users to identify which mutual friends link them with their match. This establishes common ground between the user and their match which enhances comfort when connecting with an online stranger.
The user also gains insights into which mutual contacts have vouched for the match by seeing what specific qualities they have endorsed. If the user trusts the mutual connection, it builds trust that someone they are vouching for is probably someone the user can trust too.
Building on the concept of fostering familiarity, the app also displays the number of degrees of separation between the user and a potential match. This pushes the notion that a connection already exists between the two parties and can lead to more comfort in getting to know them.
Highlighting Degrees of Separation
How might we make it easier for users to gauge their compatibility with someone from a dating app?
HOW MIGHT WE QUESTION 2
FEATURES THAT ADDRESS HOW MIGHT WE QUESTION 2
Displaying Personality Traits and Friends who Have Vouched for Those Traits
Users can view self-identified traits of their match, gaining insight into their personality. Additionally, they can see how many of their match’s contacts have vouched for these traits providing more credibility.
Slider Prompt Questions that Provide Insight into Personality
To offer deeper insights into an individual's personality, which would help a user assess compatibility, prompts resembling personality quizzes were incorporated. These questions are designed to unveil information about one's thought processes and values. To enhance precision, respondents answer on a scale rather than opting for a binary choice. Additionally, users can provide further context by adding comments explaining their choices.
Mapping out User Flows Integrating the Proposed Features to Understand How a User Will Navigate the App
I developed user flows to further understand the user's journey for each task and offer a foundational understanding of the app's functionality. Emphasis was placed on mapping out the various screens and identifying decision points where users would be directed towards different actions.
Sketching Low-Fidelity Wireframes to Work Through Initial Concepts
Once I identified the key screens needed for my flows, I drafted low fidelity wireframes to begin understanding how they might look while taking into consideration UI components, layout, and visual hierarchy.
Given the pivotal role of mutual connections in the app's concept, I also explored different ways to visually show mutual connections between users.
Putting Together a Brand Identity
The name for this app is 7Degrees referencing the theory that everyone in this world is separated by 7 connections or less.
The brand's primary colors are lilac and a vibrant orange. Lilac, with its inviting tone, fosters emotional expression, while the bright orange introduces a burst of excitement, injecting boldness into the identity and subtly alluding to themes of romance and love.
The typography focuses on two fonts: Fraunces, chosen for its distinctive personality, and Source Sans Pro, a clean and legible sans-serif font. This pairing aims to enhance both the visual appeal and readability, ensuring easy comprehension of information. Font sizes were guided by the Golden Ratio Rule, dividing sizes by 1.618 to establish a harmonious balance between variations.
Assembling a UI Kit to use as Building Blocks for the High Fidelity Wireframes
Having established the fundamental elements of the brand identity, I proceeded to develop the necessary UI components for my screens in accordance with the defined identity. For this project, I focused on constructing states of the components integral to my flows. However, in a more comprehensive version, additional states like disabled buttons and error messages would be included.
Referencing the Brand Identity and UI Kit to Build out a High Fidelity Prototype
Utilizing my low-fidelity wireframes as a guide, I expanded the screens in Figma, adhering to the established brand identity and incorporating the UI kit. I then interconnected the pages to illustrate how interactions with various components result in different screens.
Testing the Product to Get Feedback and Identify Areas of Improvement
To assess the app’s usability, I recruited 5 participants to navigate through the 3 flows:
Completing the 7Degrees Onboarding
Sending a Like to Someone
Vouching for a Contact
Applying Feedback to the Product
From my user testing I was able to collect feedback about how my participants felt while completing the task flows. I prioritized changes based on comments brought up multiple times and ones that affect the usability of the product.
Users expressed confusion about what the “+1” indicated on the contact page so I got rid of it and added the header “My Contacts and Their Endorsements” to improve clarity and appropriately label the page.
In response to user feedback expressing uncertainty about how individuals on the connection map related to one another, I enhanced clarity by introducing lines to visually link the associations.
Users expressed confusion about the content of the image on the onboarding page explaining mutual connections and their endorsements. To improve clarity I labeled the illustration explaining what was being shown.
Addressing user uncertainty regarding the purpose of the page labeled "Your Contact," I enhanced clarity and directed users toward the intended action by changing the header to "Vouch for Your Contact."
Revisiting the How Might We Statements
?
How might we help users feel more comfortable going on a date with someone from a dating app?
This was addressed by
Showing mutual connections and the degree of separation between a user and their match.
Showing which mutual connections have vouched for the user’s match.
These features leverage mutual friends to establish comfort and common ground between the user and their match.
?
How might we make it easier for users to gauge their compatibility with someone from a dating app?
This was addressed by
Having users display personality traits on their profile.
Creating personality quiz style prompts that the user can answer on their profile to show their values and how they think.
These features provide insight into someone’s personality, mindset, and values which can help a user gauge compatibility.
Next Steps
Having received feedback during user testing regarding the arrangement of basic information on a user's profile, my next step would involve planning a card sort. This approach aims to understand users' expectations and would inform the prioritization of basic profile information. By aligning the display with user expectations, this would enhance the overall user experience .
Another next step for this project would be to broaden my user interviews by engaging with a more diverse range of individuals representing different sexual orientations and genders. This would ensure better representation and address potential concerns from various demographics, contributing to the overall inclusiveness of the app.
Learnings
User research serves a dual purpose when confirming the viability of an idea. Beyond gauging interest, it provides a valuable opportunity to identify unforeseen issues within the space. Through thoughtful questioning and gaining a deeper understanding of user experiences, we delve into the challenges users encounter from their perspective. This understanding allows us to reshape and refine the initial ideas effectively, ensuring it is better equipped to address the identified issues. The outcome is the development of a more intentional and user-centric product.
Effective onboarding screens play a crucial role, especially when introducing novel concepts or unique features within a product. They serve as a means to educate users on how to navigate and make the most of the product, ultimately preventing confusion during user interactions.