产品设计 · 卡内基梅隆大学课程项目

Hive Five:Bumble BFF 的五人线下聚会

课程任务要求设计“附近有人喜欢你”的通知,推动免费用户升级付费。课程数据和 BFF 用户的实际问题却把我带向了别处:大家配对成功了,见面却一直没发生。Hive Five 为你和另外四位兴趣相近的陌生人订好一张桌子,共五人。

试用交互原型
三张 Hive Five 界面:本周活动、倒计时中的晚餐和预订成功页
最终设计:浏览本周活动,订一个座位,活动信息随日子临近逐步解锁。
课程
Advanced Interaction Design · 卡内基梅隆大学 · 2026 年春概念设计,与 Bumble 无关联。
团队
个人项目
交付
iOS 流程 · 通知、Apple Watch 与 Android · 网页入口 · 概念提案
我的角色
研究与重新定义问题 · 数据分析 · 交互与视觉设计 · Figma 设计系统反馈来自课堂同学互评,概念没有做过可用性测试。
设计稿
在 Figma 中查看(英文) 完整设计

项目成果

这个项目从一份增长任务开始,任务书指定了要做的功能。

我先用任务自带的数据和对用户的观察,判断哪个问题更值得解决,再把方案引到一个让人真的会去赴约的方向。

3.12%课程数据集中交友模式的付费转化率,高于约会(2.03%)和职场(2.17%)
5人一场活动:你和另外四人,按兴趣、街区和预算匹配
4种活动页状态:即将开始、还有一天、进行中、已结束
3个 iOS 之外的平台:Android、Apple Watch 和网页入口
01

任务与数据

任务:把“附近有人喜欢你”变成付费理由

课程任务把我设定为 Bumble 用户增长团队的设计师。免费用户很少有“现在就升级”的理由,任务书想用附近某个人的喜欢来制造这个理由:对方就在附近,意图明确,说见就能见,而 Premium 会员可以看到对方是谁。目标是让看到这个功能的免费用户有 12% 在七天内升级,同时盯住拉黑、举报和关闭定位这些护栏指标。设计要覆盖手机、桌面和手表三端。

任务还附带一份数据集,记录了两个定位功能(附近提醒和地图整合)在 Bumble 三种模式下的转化率、留存率和使用率。数据由课程提供,不是 Bumble 的真实数据,但这是我手上唯一的证据,所以我从它开始。

3.12%交友(BFF)· 地图整合实验为 2.93%
2.17%职场(Bizz)· 地图整合实验为 2.23%
2.03%约会(Dating)· 地图整合实验为 1.99%
100行数据(每个功能),按模式取平均

转化最好的是交友模式

我原本以为约会模式转化最好,打算在那里设计。结果两个实验里领先的都是交友模式。它是引入付费功能风险最低、把握最大的地方,于是我把整个项目转向了 Bumble BFF。

02

概念与重新定义

第一个概念:附近朋友的地图

我的概念提案紧贴任务书。Emily 在 BFF 上配对了几个人,却一个都没见过,因为住得太远,一直没约上。某天一条提醒告诉她朋友就在附近,Premium 会员能看到他们在哪里,她发现 Ashley 正在街角的咖啡店。她给 Ashley 发了消息,两人见了面。

提案把它和业务目标挂钩:一个意图强、价值清楚、风险低的付费时刻带来转化,一个可以重复的循环带来留存。

Emily:Emily 在用 Bumble 的 BFF
Emily:她配对了几个人,一个都没见过:住得太远,一直没约上
应用:某天收到提醒:朋友就在附近,Premium 会员能看到在哪

这里站不住:她正在开会或跑腿,走不开怎么办?每种情况都要单独一屏。

应用:开通会员后,地图上显示 Ashley 就在街角的咖啡店

这里站不住:Ashley 的实时位置给了一个从没见过面的人:正是任务书警告过的安全风险。

Emily:她给 Ashley 发了消息,两人见了面
重画自 2026 年 1 月概念提案里的“How it Works”故事板,标出了它站不住的两处。

为什么没有做下去

把真实场景走一遍,这个想法就站不住了。提醒来的时候,你可能正在开会或跑腿,根本走不开,这时该怎么办?任务书没有说,而每种情况都需要单独的界面。在交友产品里显示实时位置,也正好碰上了任务书自己警告过的安全风险。

还有一个问题是提醒解决不了的。借助 AI 做的案头研究,加上我自己用社交软件的经历,都指向同一个现象:配对很少变成计划,大多数对话慢慢就没了下文。缺的是一个具体的安排,距离倒在其次。

从 Hangouts 到五人桌

放下附近地图后,我先做了 BFF Hangouts,让用户自己发起 2–8 人的聚会。之后我把方案收敛为应用订好的五人桌:你和另外四位陌生人。“卖座位,不卖信号”也在这时确定。

下面是第一轮互评前用 AI 生成的首页。它的套路和渐变太明显。之后我只用 AI 做小组件,参照 Bumble 的应用重新设计界面。

之前 · AI 生成的第一版

深色 BFF Hangouts Activity 首页,列出附近聚会、参与人数和带渐变的活动卡片,保留红黄手画流程批注
BFF Hangouts。红黄线是原稿的流程批注。

之后 · 最终设计

最终 Hive Five 首页,白色背景上是 Meet people in New York City 标题,下方是带插画的晚餐、夜跑和咖啡聊天活动卡片
Hive Five。从本周的活动里选一场。

点击图片可查看大图。

  1. 01产品的任务到见面为止

    每个界面都为了让五个人在同一时间到同一个地方,然后退到一边。

  2. 02卖座位,不卖信号

    付费换来的是一场订好的活动,这就是现在付费的理由。一条还要再揭晓的提示给不了这个理由。

  3. 03默认安全

    没有实时位置。还有谁来,要等活动结束后才会显示。

03

最终设计

交互原型

按最终设计复刻的可交互原型。打开 Hive Five 预订一场活动,再把时间往后拨,看活动页依次揭晓餐厅、小组,活动结束后才揭晓每个人。在 Figma 中查看完整设计(英文)

这个原型需要 JavaScript 才能运行。下面各节有设计稿里的界面。

首页只列活动,不用滑卡

Hive Five 放在“People”标签页里。首页是你所在城市本周的活动列表,每一项都写明类型、日期和时间,有晚餐、夜跑、咖啡聊天、小酌、徒步和早午餐。没有卡片要滑,也不用给任何人打分,挑一个晚上就行。

你的安排也显示在这一页。预订之后,“You’re in!”卡片带着日期和街区出现在列表上方;活动结束后,它变成“Past Event”,你的小组就在那里。

报名只需要回答三个问题

报名只问匹配需要的信息:想去城市的哪一片、愿意说哪些语言、打算花多少钱;饮食限制是选填项。确认前可以回顾一遍,确认后只出现一个界面“You’re all booked!”,写着日期、时间和街区。餐厅和小组之后再揭晓。

免费随便看,付费才入座

免费用户在“My groups”里能看到 Hive Five 的卡片,了解它是什么。付费墙放在用户意图最强的时刻,也就是他们想要一个座位的时候。可以按月订阅,七天免费试用,不限场次并优先匹配;也可以单买一场,不用为了第一顿晚餐先订阅。第一次预订之前,一句欢迎语定下基调:“Take a chance, relax, and just say, Hello stranger.”

一个随时间变化的活动页

整个活动周期都在同一个活动页上完成。活动之前,横幅显示倒计时,先是“Starts in 4 days and 7 hours”,然后是“Starts in 1 day”。活动前三天,餐厅解锁,你还能看到这个小组的大致构成,包括行业、学校和国籍,但看不到具体是谁。活动进行时,横幅显示“Ongoing event”;结束后显示“This event has passed”,参与者也随之出现。

两个对话框负责把关。可以取消,但页面会直接告诉你,取消就会失去这个座位。提前点开参与者,会看到一句“还不行”,说明出于隐私和安全考虑,还有谁来要等活动结束后才显示,晚餐之后再打招呼。

见面之后,有办法保持联系

活动结束后,活动页会列出当晚同桌的人。点开每位参与者都能看到资料,有照片、简短介绍、兴趣和所在的小组。资料页上的消息按钮,让你能和见过面的人接着聊。

同一个面板里也能举报或拉黑对方。先见面已经降低了风险,剩下的交给这些安全控制。

跟着安排走的通知

任务书的主题是通知,Hive Five 也需要通知,不过每一条都对应安排里的一步,跟某个人的位置无关。餐厅订好时,你会收到一条确认。活动进行时,锁屏上的实时活动(Live Activity)一直显示餐厅和时间。活动结束后,一条消息告诉你资料已经解锁。

Apple Watch:只放有时效的内容

Bumble BFF 没有 Apple Watch 应用,Hive Five 也用不着。手腕上只放几条在特定时刻才重要的提醒:活动就在明天、更多信息已解锁、餐厅已确认。

三条来自 Bumble 的 Apple Watch 通知:距离你的晚餐还有一天,更多活动信息已解锁;以及另外两条活动提醒
手表通知只留给等不了的时刻。

Android,以及有意不做桌面端

Android 版本保持同样的设计,只调整平台不同的部分:设备尺寸和状态栏。

任务书也要求桌面端,我决定不做。BFF 没有网页产品,这个功能又依赖即时通知这类手机能力。BFF 在网页上只有营销页,所以我在它的 Friends 标签页里加了一个 Hive Five 入口,放一段简短介绍和一个二维码,扫码就能在应用里打开这个功能。

Hive Five 首页的 Android 版本:同样的活动列表和 Android 状态栏
Android:同样的设计,遵循平台惯例。
Bumble BFF 落地页的 Friends 标签页上的 Hive Five 面板:文案写作“groups of 5 people with similar interests”,以及一个在应用里试用该功能的二维码
网页:用 BFF 落地页上的入口代替桌面应用。
04

反思

我学到的

这个概念经过两轮同学互评,二月底做了展示。它没有找 BFF 用户测试过,所以这里能讲的只是推理过程,还谈不上结果。下一步应该找真实的 BFF 用户测试报名流程和“参与者活动后才可见”的规则,再对付费墙的文案做 A/B 测试。

  1. 01先重新定义,再动手画

    照任务书原样做,就得为一个解决不了实际问题的功能设计一堆边缘情况。重新定义问题以后,工作量少了,方案也更干净。

  2. 02数据定方向,判断定细节

    数据集改变了我做的是哪个产品。交互层面的决定来自互评和产品判断,之后才轮到测试和 A/B 实验。

  3. 03保留自己的设计判断

    AI 生成一屏很快,判断它是否适合这个产品仍然是我的工作。

  4. 04不是所有东西都要做成组件

    一开始我把所有东西都做成了组件,连手机外框也是。设计系统的好处要等产品变大、变体和状态多起来才显现;在那之前,它是额外负担。

下一个案例

Meta 工作经验 · iOS 功能设计与落地 Instagram“可点击类别”