Happn
Happn
From online to real life.
From online to real life.
Case study presented by Paul-Antoine Campos - Lead Designer at Happn - and his team who shared a real subject they are currently working on.
Case study presented by Paul-Antoine Campos - Lead Designer at Happn - and his team who shared a real subject they are currently working on.
I participated in every step of the product design process, with a strong emphasis on UI.
I participated in every step of the product design process, with a strong emphasis on UI.
Team
Team
3 product designers
3 product designers
Scope
Scope
Mobile
Mobile
Timeline
Timeline
Q3 2024
Q3 2024
Break down barriers to
real-life encounters
Break down
barriers to real-life encounters
Context
Context
Happn is a dating app that breaks down barriers to real-life encounters by connecting users with people they've crossed paths with during the day, using geolocation to recreate missed connections in their app.
Happn is a dating app that breaks down barriers to real-life encounters by connecting users with people they've crossed paths with during the day, using geolocation to recreate missed connections in their app.
Problem
Problem
Moving from virtual to real is tough: uncertainty, anxiety, fear of judgment, rejection, or choosing the wrong venue. Many users turn to the internet for ideas, and Happn aims to simplify this process.
Moving from virtual to real is tough: uncertainty, anxiety, fear of judgment, rejection, or choosing the wrong venue. Many users turn to the internet for ideas, and Happn aims to simplify this process.
Some numbers
Some numbers
75 %
75 %
of conversations have fewer than 30 messages
of conversations have fewer than 30 messages
37%
37%
of conversations switch to a social media app
of conversations switch to a social media app
60%
60%
of “Ready to date” users have never met each other in real life
of “Ready to date” users have never met each other in real life
Initial flow
Initial flow
Project goal
Project goal
Encourage our Crushers to go on a date in real life.
Encourage our Crushers to go on a date in real life.
Sucess criteria
Sucess criteria
The project will be a success if 5% of crushes with a conversation have accepted a date proposal.
The project will be a success if 5% of crushes with a conversation have accepted a date proposal.
Research
Research
What we would like to learn ?
To gain deeper insights into the problem we're addressing and our users' motivations, we carried out qualitative research.
To gain deeper insights into the problem we're addressing and our users' motivations, we carried out qualitative research.
Interviews parameters
Interviews parameters
Semi-directive interviews
Semi-directive interviews
via Google Meet
via Google Meet
50 min
50 min
4 people
4 people
2 men / 2 women
2 men / 2 women
22 to 35 years old
22 to 35 years old
Research objectives
Research objectives
When does someone feel ready for a meeting?
When does someone feel ready for a meeting?
Identify the key factors that make users feel ready to transition from online chatting to an in-person meeting, helping the app support this decision effectively.
Identify the key factors that make users feel ready to transition from online chatting to an in-person meeting, helping the app support this decision effectively.
What are the obstacles to a real life meeting?
What are the obstacles to a real life meeting?
Uncover the barriers that prevent users from transitioning from a virtual match to an in-person meeting.
Uncover the barriers that prevent users from transitioning from a virtual match to an in-person meeting.
In practice, how a date is planned?
In practice, how a date is planned?
Identify the path taken from the moment two users match to when they actually meet, in order to provide solutions at the best time.
Identify the path taken from the moment two users match to when they actually meet, in order to provide solutions at the best time.
Interviews insights
Interviews insights
What have we discovered ?
Out of 4 users…
Out of 4 users…
4/4
4/4
Prefer to meet shortly after matching
Prefer to meet shortly after matching
To avoid talking too much with someone it wouldn’t work out with (waste of time).
To avoid talking too much with someone it wouldn’t work out with (waste of time).
To quickly ensure the match is meaningful.
To quickly ensure the match is meaningful.
4/4
4/4
Think the location should be convenient and meet their expectations
Think the location should be convenient and meet their expectations
To easily change locations once there, if needed.
To easily change locations once there, if needed.
So that the effort is mutual.
So that the effort is mutual.
4/4
4/4
Want to show their interest in the other person
Want to show their interest in the other person
To increase the chances of a successful meeting.
To increase the chances of a successful meeting.
To show their motivation.
To show their motivation.
Refined project goal
Refined project goal
Encourage our Crushers to go on a date in real life.
Encourage our Crushers to go on a date in real life.
Simplify the steps for choosing a meeting place and allow both Crushers to participate in the decision.
Simplify the steps for choosing a meeting place and allow both Crushers to participate in the decision.
Steps toward the solution
Steps toward the solution
1
Benchmark 1
We took inspiration from competitors to see how features were suggested and organized.
2
Benchmark 2
We also looked at popular apps like Netflix and Spotify to see how content and categories were displayed.
3
Sketch
We generated a variety of ideas, ranging from practical to less feasible. In the end, we selected the ones that we were confident would add value and be easy to implement.
Benchmark
Competitors
We took inspiration from competitors to see how features were suggested and organized.
Top Tech app
We also looked at popular apps like Netflix and Spotify to see how content and categories were displayed.
Sketch
Brainstorm
We used creative tools like mind mapping, Crazy 8 and Remix & Improve to generate a wide range of ideas.
Select the best idea
We selected the idea that offered the most value for users and was easiest to implement.
Solution
Solution
Our v1
The new feature introduces a "Spots" button, providing users with location suggestions based on their profiles, which they can easily share in the chat to enhance engagement and interaction.
The new feature introduces a "Spots" button, providing users with location suggestions based on their profiles, which they can easily share in the chat to enhance engagement and interaction.
Dating is emotional
Dating is emotional
Chatting on a dating app can feel awkward, so it's essential for the app to preserve the emotional aspect as subtly as possible. Our design choices have been guided by the goal of being minimally intrusive.
Chatting on a dating app can feel awkward, so it's essential for the app to preserve the emotional aspect as subtly as possible. Our design choices have been guided by the goal of being minimally intrusive.
'Spots' button
'Spots' button
V1
V1
We added a location icon button next to the chat box to access the new functionality.
We added a location icon button next to the chat box to access the new functionality.
Button position
Button position
The feature is subtly integrated into the lower left corner of the chat box, aligned with the standard layout for apps that place attachment buttons in this position.
The feature is subtly integrated into the lower left corner of the chat box, aligned with the standard layout for apps that place attachment buttons in this position.
Tooltip
Tooltip
A tooltip appears after a few messages are exchanged, explaining the feature and encouraging users to use it.
A tooltip appears after a few messages are exchanged, explaining the feature and encouraging users to use it.
Overlay
Overlay
When the tooltip appears, a dark overlay is applied to the chat for optimal visibility.
When the tooltip appears, a dark overlay is applied to the chat for optimal visibility.
Spots main page
Spots main page
V1
V1
When users click the new button, they are redirected to the main feature page, which displays a collection of suggested locations.
When users click the new button, they are redirected to the main feature page, which displays a collection of suggested locations.
Search bar
Search bar
At the top of the page, users can search for specific spots by entering keywords or names into the search bar.
At the top of the page, users can search for specific spots by entering keywords or names into the search bar.
Categories
Categories
We’ve grouped suggestions into three categories: "Your Spots" for locations added by either user, popular spots near the initial meeting point, and other popular locations.
We’ve grouped suggestions into three categories: "Your Spots" for locations added by either user, popular spots near the initial meeting point, and other popular locations.
Spot detail
Spot detail
V1
V1
Each spot features a detailed page with additional information such as pictures, directions, and opening hours, and allows users to share it with their Crush as a potential meeting place.
Each spot features a detailed page with additional information such as pictures, directions, and opening hours, and allows users to share it with their Crush as a potential meeting place.
Information hierarchy
Information hierarchy
We focused on essential data to maintain an optimal information hierarchy and avoid cluttering users with unnecessary details.
We focused on essential data to maintain an optimal information hierarchy and avoid cluttering users with unnecessary details.
Foursquare
Foursquare
Happn has an agreement with the Foursquare API to gather data, which we use to present detailed information about each Spot.
Happn has an agreement with the Foursquare API to gather data, which we use to present detailed information about each Spot.
Spot card
Spot card
V1
V1
When a location is proposed, a new card appears on the chat page, offering a brief overview of the place.
When a location is proposed, a new card appears on the chat page, offering a brief overview of the place.
Color scheme
Color scheme
The card’s background color matches the type of location, such as a restaurant, bar or park.
The card’s background color matches the type of location, such as a restaurant, bar or park.
Spot details on tap
Spot details on tap
By clicking on the card, both users can access detailed information on the spot's detail page.
By clicking on the card, both users can access detailed information on the spot's detail page.
User tests
User tests
Verifying design decisions
To deliver a successful solution and create a great user experience, we performed a series of user tests.
To deliver a successful solution and create a great user experience, we performed a series of user tests.
Test parameters
Test parameters
Semi-directive interviews
Semi-directive interviews
via Google Meet
via Google Meet
30 min
30 min
4 people
4 people
2 men / 2 women
2 men / 2 women
22 to 35 years old
22 to 35 years old
Test objectives
Test objectives
Feature relevance
Feature relevance
Ensure the spot-finding process is intuitive, quick, and efficient.
Ensure the spot-finding process is intuitive, quick, and efficient.
'Spots' icon visibility
'Spots' icon visibility
Ensure that the spot icon in the conversation is both visible and easily understood by users.
Ensure that the spot icon in the conversation is both visible and easily understood by users.
'Spots' feature components
'Spots' feature components
Observe whether users understand all the new feature components, including categories, chat spot card, and the color scheme.
Observe whether users understand all the new feature components, including categories, chat spot card, and the color scheme.
Refined solution
Refined solution
Our V2
Final prototype
Final prototype
Check out the final prototype - enjoy !
Conclusion
Conclusion
How can we track impact
and enhance user experience?
These metrics will help us evaluate the feature's impact on user engagement and real-life connections. By closely tracking these indicators, we can refine the feature to better support meaningful interactions and meet user needs.
These metrics will help us evaluate the feature's impact on user engagement and real-life connections. By closely tracking these indicators, we can refine the feature to better support meaningful interactions and meet user needs.
Key metrics
Key metrics
Number of dates that took place thanks to our feature
Number of dates that took place thanks to our feature
Number of date spot proposals per conversation
Number of date spot proposals per conversation
Increase in chat duration within the app
Increase in chat duration within the app