Enhancing the Bumble dating app experience by turning conversations into dates
You find a good match on the Bumble dating app and your messages to each other are flowing. But neither one of you has initiated a date. How do you take the next step of meeting your match in person?
I designed a feature for Bumble Date with the goal of turning matches into dates. The new feature would make it easy, smooth, and accessible to set up a date by finding and sharing an event with your match.
My solution solves the problem of transitioning conversations into dates. Once inside the messenger with their match, users are presented with:
-
An events page that makes it easy to find a date idea by searching for an event based on category
-
A call to action to share the event directly with his or her match
Project Role
UX Designer
Key Skills
Research & synthesis, storyboarding, user personas, task flows, sketching, wireframing, prototyping, usability testing
Project Length
4 weeks
Research Phase
I was interested in discovering how users felt about the frustrations of online dating and how improvements might be made. So I recruited and conducted 7 user interviews with current and past users of dating apps. The participants ranged from the ages of 21 to 35 and were both male and female.
I used affinity mapping to synthesize my user research. The main takeaway that I discovered was this:
Users were frustrated with talking to matches on the app and wanted to turn matches into dates because:
01.
It is important to meet their match in person to see if they truly connect
02.
It is hard to be your true self without meeting in person
03.
Dating is an elimination game where you keep moving on to the next match if you don't connect
In order to learn how other dating apps were engaging and connecting their matches, I did a competitive analysis of features that encouraged matches to stand out and connect with each other.
Hinge's Rose Gift
Send a rose to a match and add a comment
Tinder's Explore Page
Explore and find matches based on different interests and categories
CMB's Conversation Prompt
Conversation prompts that focus on starting a conversation with a match
Although all of the competitors had strengths in finding and connecting with matches through conversation, none of the competitors motivated users to turn their matches into dates. This is where I saw an opportunity to improve online dating.
Define Phase
Using my user interview insights, I created Jessica as my user persona to personify the traits and pain points of my target audience. Jessica's main pain point with dating apps is spending too much time talking on the app before finally meeting in person for a date.
Combined with my user research findings and the opportunity I saw from my competitive analysis, I constructed this how might we question:
How might we make the transition from online dating to real-life dating smoother and more engaging for matches?
Ideate Phase
Using post-its and a Sharpie, I created a storyboard to illustrate the pain point that I would be solving for Jessica, my user persona.
The new feature would allow users to share an event with a match by clicking on an icon. I went through several iterations for the placement of the icon (highlighted in orange). It was a challenge to fit the new icon into the navigation bar without overcrowding it and having it stand out to the user.
With my user persona, pain point, and solution in mind, I created this task flow to illustrate the path that Jessica would take for sharing an event with her match.
Click the image for a better viewing experience
At the stage of mid-fidelity wireframing, I transferred my sketches of where the new icon would live into Figma. During this process, I decided to change the icon design to a honeycomb shape instead of the initial calendar icon because it better matched Bumble's theme and banding. The wireframes below show the different placements of the new honeycomb icon in the bottom navigation bar. I also applied UI to explore different colors and strokes for the icon.
Below are a few samples of mid-fidelity wireframes that show the flow for sharing an event before I improved them with iterations.
Find an event
by category
Foodies page with different food events
Event Details Page
Share the event and send a message to your match
In order to apply UI to my wireframes, I attentively studied the Bumble app to see how and where the UI was applied to buttons, icons, and screens. To replicate Bumble's icons, I recreated them using the pen tool in Figma. For the new feature's icon, I designed a honeycomb shape because I wanted to align with Bumble's theme of bees and honeycombs.
I did a few rounds of iterations to improve my wireframes by tweaking the UI and language to better match Bumble’s branding. I also made iterations to the task flow so that it felt more similar to Bumble’s user experience.
Before Iterations
I designed a modal to pop out against a black background with 60% opacity because I wanted the modal to stand out and have contrast.
After Iterations
After analyzing the Bumble app again, I realized that Bumble did not use modals in their flows. I decided to remove the modal to make it identical to Bumble's UI and flows and added a close icon instead.
Testing Phase
I tested my feature with 5 users and received positive feedback regarding the concept, design, and ease of use.
The Rainbow Sheet
To organize my observations from usability testing, I created a rainbow sheet to record user behaviors and identify patterns. After analyzing the patterns, it was evident that a major pain point was that the user was confused about where to click on the landing screen for sharing an event.
Feedback Grid
I created a feedback grid to further determine the successes and areas of improvement for my new feature.
What was Revealed in Testing
After observing the participants, there was one area of frequent confusion for users. Users were confused about where to find the icon for sharing an event.
"It says click the icon and I can't find it."
Improvements After Feedback
As a result of the users' confusion, I made two small iterations to solve the problem:
1.) Provide a CTA button on the landing screen
2.) Add a “NEW” banner to highlight the new feature’s icon
Final Design
Postmortem
What I Learned
This project expanded my knowledge and skill of what it means to follow and be consistent with the branding of an app. I learned how to maintain consistency with Bumble’s branding not just through visual elements such as the color palette and icons but also through communication elements like language, voice, and tone. Last but not least, I also learned to stay consistent with Bumble's user experience when designing my user tasks.
Back to top
See More of Annie's Work
