BFF Quest
CLIENT
Self-directed project
TIME
4 weeks
SKILL
Cross Device Experience, UX Design, Design System
TOOL
Figma, Figma Slides, Google Sheet
MY ROLE
Product Designer
TEAM
n/a, this is a one-person project
Originally created to challenge traditional dating norms by empowering women to “make the first move,” Bumble has since expanded to foster confident connections across dating (Bumble), friendship (BFF), and professional networking (Bizz). By prioritizing kindness, respect, and safety, Bumble has cultivated a trusted online community.
BFF Quest is a speculative project that leverages a tested technology—map integration—with the goal of increasing retention among BFF users. By engaging users in personalized challenges, the project aims to encourage real-life meetups, ultimately fostering deeper relationships.
As the sole designer, I took responsibility for shaping the UX flow, UI, and interactions across devices.
PROBLEM
The Design Brief
The Bumble Customer Acquisition Team aims to increase the conversion rate of non-paying users. With 50 million active users and 2.4 million subscribers as of 2023, approximately 95% of its user base remains on the free tier. It also aims to attract new users in all categories, particularly users in “BFF” and “Bizz” categories, using Bumble to expand social circles and develop their careers.
In summary, the North Star for the project is:
How might we increase the conversion rate of non-paying users, and acquire new users to join BFF and Bizz?
Forming the Key Assumptions
To break down the business goal, I applied the 3C model (Company, Customer, Competitor):
1. What values define Bumble as a brand?
→ Community and Trust are Bumble’s core values.
2. What do users prioritize when using Bumble/BFF/Bizz?
→ Users appreciate the “Plans” feature in BFF, which facilitates real-life meetups based on shared interests. They find these gatherings unique and meaningful for forming new friendships.
3. How are competitors positioning themselves, and how can Bumble differentiate in the fragmented online networking space?
→ Unlike most competitors, who incorporate friend-matching as a secondary feature, Bumble stands out with its dedicated friend-matching network.
After conducting desktop research, interviews, and data analysis, I identified 3 key assumptions:
Framing the Problem Statement
By synthesizing key assumptions and user research, I refined the project scope to craft an experience unique to Bumble’s BFF app and reframed the problem statement:
PROCESS
In response to the problem statement, I identified key design challenges and made informed design decisions based on insights from research conducted throughout the process, and in class feedback.
Exploratory Research
Why aren’t users staying on the app?
To identify key attributes of Bumble BFF, I actively used the app for a month—exploring profile creation, matching, and chat features. Through this hands-on experience, I identified two main pain points.
Pain Point 1
Inactivity in Plans
Hosting events requires extra effort, and outdated event listings in the page discourage users attendance.
Pain Point 2
Barriers to Chat
Difficulties in breaking the ice, and even harder to maintain a conversation.
What does data say?
Additionally, data from Bumble’s feature testing reveals an interesting insight.
The chart below illustrates the adoption rate of Map Integration, a feature designed to showcase local events and hangouts. Initially tested in 5 cities over 6 months, the feature was deemed unsuccessful at the time. As the chart suggested, the adoption rate shows a decline as time went by.
Interestingly, when viewed from a different perspective, the data tells a compelling story. Adoption spiked early on, with nearly one-third of users engaging with the feature in cities like Los Angeles, Austin, and Washington, D.C., when the Map Integration feature was first introduced.
This leads me to consider that integrating a map into the app did initially capture users’ interest—perhaps the issue wasn’t the feature itself, but how it functioned.
The feature may need to be more proactive or goal-oriented, rather than simply presenting information.
In other words, I saw opportunity space in
stimulating the existing features through map integration, integrating experience of meeting people in Plans and Chats in a seamless way.
Design
Exploration
Exploring the Possible Solutions
Dismantling the problem statement, I came up with 4 main design concept that I presented to the class.
Decision: Settling Down on a Concept
After evaluating user interactivity and determining how to integrate the map feature in a meaningful way, I chose to move forward with the 4th feature, originally named Vibe Challenge.
Design
Challenge #1
How might we design a flow that aligns with the existing culture and user behavior on BFF?
This was the first and foremost challenge I faced—how to create something both distinctive and meaningful, especially in the context of real-life meetups.
I intentionally streamlined the process into three key steps:
Explore the challenges
Accept the challenge
Complete it in real life with one of your friends
User Flow
For the Vibe Challenge scenarios, I developed three user flows that cover the start of the challenge, the middle phases, and the completion of the challenge.
Wire Frame
Here are some of the low fidelity sketches of the phone & watch interactions.
Early UI
Design
Challenge #2
How might we seamlessly integrate interactions across multiple devices, such as Apple Watches, to enhance the user experience?
I envision the watch as a convenient extension of the experience—allowing users to quickly accept quests and complete them through wrist-to-wrist interactions.
Wire Frame
Here are some low-fidelity sketches illustrating how the Apple Watch could integrate into the app’s current flow.
UI Overview
Design
Challenge #3
Now, how can we enhance the experience to make the quest more engaging and evoke a sense of reward?
Now that the core experience is in place, I want to make it more intrinsically motivating and rewarding to encourage active participation.
Here are the main iterations I made based on feedback after pitching in class.
Iteration #1: What information should I put on the main page?
Initially, I had two consecutive pages for step 1: picking a spot. The older version consist of all kinds of information - and that might be too much for the users.
Old Version
Initially, Step 1: Picking a Spot had two consecutive pages. The older version contained an overload of information, which might have been overwhelming for users.
New Version
To streamline the experience, I simplified the main page by:
Removing redundant information
Highlighting the progress bar & event timer as a motivating element
Integrating Step 1 directly into the main page to reduce clicks
Adding microinteractions that encourage users to continue completing the challenge
New Version - Instructions
The “How To” guide will be accessible through an information button at the top, keeping the interface clean and uncluttered. Users can revisit it anytime they need assistance.
Iteration #2: What is the logic of inviting friends?
Next, I refined the logic for ordering the invite list. It now prioritizes friends who share the same interests as the challenge, (as tagged) while still allowing users to invite other friends. This way, users can help each other with the quests, fostering a sense of collaboration.
Iteration #3: What would user see after completing the quest?
To motivate users to complete the quest, I added two elements to the interface, both on the Plans page and the Profile:
• Plans: The progress bar is now highlighted and placed at the top of the hierarchy on the main page, making it more prominent.
• Profile: A badge is displayed on the user’s profile, indicating their active participation in this month’s quest.
Logo
Design
Since this is a brand-new feature that requires an icon to represent the event itself and “locked” locations, I decided to design a unique logo for it.
Here are the iterations I sketched on paper.
I ultimately chose the design that conveys “synthesizing,” as the quest relies on teamwork to complete.
Design
System
For this project, we were asked to use an existing design system to create assets for the app. I’m utilizing Material UI for Figma, specifically for button and avatar interactions. However, due to differences in typography between Bumble’s brand and the design kit, I decided to create my own system for typography and colors.
The follow is the design system used for this project.
SOLUTION
BFF Quest is a speculative feature aiming to encourage real-life meetups, ultimately fostering deeper relationships.
# Pick a spot
To get started, explore the Quests section on the Plans page. Select a location that hasn’t been unlocked yet.
# Invite a friend
After selecting the location, invite your friend to join you and complete the quest together!
You may also accept the challenge through your Apple Watch, whenever and wherever!
# Unlock the location
Once your friend accepts, it’s time to meet in real life and complete the quest.
You may send them messages on your way to the spot.
When you're there, simply tap your phones together, and you’ll feel a vibration when they connect. The location will then be unlocked!
You may also interact with your friend with your Apple Watch, without taking out your phone.
# Win a badge
Afterwards, head to your profile page, where you’ll earn badges based on your contributions to the quest that month.
REFLECTION
If there is more time…
Overall, I learned a great deal throughout this project, as it covered everything from problem reframing and research to data analysis and UI/UX execution. The full scope allowed me to familiarize myself with the entire product design cycle, particularly when it comes to designing a new feature.
If given more time, I would focus on refining the micro-interactions throughout the app. Bumble offers many subtle, detailed interactions that contribute to a great user experience. As Dan Saffer once said, “It was the microinteractions that made that app really special.” I'd really like to dive into animations to focus on details of the app.
Space for Improvement in Utilizing the Design System
One of the biggest challenges I faced (and learned from) was effectively utilizing the design system. My working style typically involved creating components as needed, and through trial and error, I would refine and curate a design system that suited the project.
However, things don’t always work that way in the real world. Designers are often required to follow an existing system and update it based on the assigned styles.
If I were to redo this process, I would adjust my workflow. I’d take time to familiarize myself with the system after completing low-fidelity sketches/wireframes but before moving to high-fidelity design. This approach would allow me to treat the design system as a toolkit I can own, while still keeping my creativity open and flexible.
minjeanchu@gmail.com