CISSIE
Projects Honors Contact

drinkdrink

一个围绕「朋友一起喝水」设计的轻社交产品：真实喝水后发 Drink Signal，朋友「跟一口」形成即时回应。

打开 drinkdrink

drinkdrink 起点来自朋友之间很日常的一句话：“喝口水”“别忘了喝水”。我们把这种熟人提醒设计成一个轻量互动：用户喝完水后，可以顺手邀请朋友「跟一口」，对方收到提醒后回应并完成自己的喝水动作。

我主要负责产品定义、核心流程与交互设计，并参与 Web/PWA 开发、上线后的数据分析和产品迭代。冷启动阶段同步负责抖音、小红书内容测试。

上线 2 天获得 500+ 注册，早期实际使用用户约 600–700，抖音单条产品内容获得约 1,400 点赞。

drinkdrink 产品界面示意：跟一口、喝过了、朋友互动
Hero — 第一版从手绘草图推进到可用产品，核心只围绕一条主流程。

01｜产品设计

第一版只围绕一个动作展开：

我喝水的时候，可以顺手叫一个朋友一起喝。

喝水产品很容易继续延展功能。第一版先把这些内容放在范围外，把产品结构集中在朋友互动上：

Core Loop

喝水 → 邀请朋友 → 收到提醒 → 跟着喝 → 回应 → 下一次互动

后面的关系结构、通知、页面设计和数据指标，都围绕这条主流程展开。

关系建立

drinkdrink 依赖熟人关系。用户完成注册和资料填写后，需要先添加朋友并建立关系，才能进入邀请和回应。

所以早期重点观察两个节点：

关系建立路径示意：两个人之间从建立连接到核心互动
关系模型 — 注册之后必须先走到一段有效关系，核心体验才真正开始。

这两个动作决定用户有没有进入产品的核心体验。

02｜从草图到上线

第一版从 Procreate 手绘开始，用草图确认信息结构，再进入 Figma 补完整流程，随后推进到 Web/PWA 开发和上线。

  1. Procreate：确认首页、喝水、邀请和关系页面的信息结构
  2. Figma：补全流程，并压缩首次使用路径
  3. Web / PWA：进入开发与上线，优先验证速度和分发成本
drinkdrink 关键界面：登录注册、杯子编辑、喝过了回应、关系列表
产品界面 — 从草图到上线后的主要页面：跟一口入口、杯子编辑、喝水回应与关系建立。

核心动作

首页始终围绕「喝水」和「邀请朋友」展开，减少健康数据和其他功能入口对主操作的干扰。

首次使用

首次使用路径本身已经有一定长度，所以持续删除重复确认和不必要的选择，让用户尽快进入第一次互动：

  1. 注册
  2. 资料填写
  3. 添加朋友 / 建立关系
  4. 第一次邀请

产品气质

手绘元素、卡片结构和偏轻的文案都围绕朋友之间的小互动展开，让产品更接近日常社交。

技术实现

第一版采用 Web/PWA，优先考虑验证速度和分发成本。

工具 用途
Vercel 部署
Neon 数据库
Resend 验证码与邮件
Web / PWA 产品形态
AI Coding 前端、交互与逻辑辅助开发

03｜冷启动与数据

产品上线后，通过抖音和小红书进行第一轮冷启动。

两只杯子之间的 Drink Signal 产品隐喻插图
产品隐喻 — 内容负责把用户带进来，产品需要接住这份兴趣，并让用户顺利完成第一次使用。

Early Results

指标 结果
上线 2 天注册 500+
早期实际使用用户 600–700
抖音单条内容点赞 1,400+

注册增长之后，我们继续往下看用户有没有真正进入互动。

重点关注：

如果用户注册后没有建立关系，后面的邀请和回应就不会发生；已经建立关系但没有发出第一次邀请，则说明首次使用路径里还有阻力。

04｜上线后的调整

真实使用后，主要围绕首次互动、邀请和通知做了几轮调整。

Onboarding

部分用户注册后停在首页，没有继续添加朋友。后续把「添加朋友」提前，并减少首次进入时的信息量。

Invite Flow

缩短喝水完成到发出邀请之间的操作步骤，让“喝完之后顺手叫朋友”更接近日常动作。

Notification

很多用户再次回来，是因为朋友发起了邀请。通知内容集中交代三件事：

例如：

朋友刚刚喝了一口，叫你一起。

使用细节

不同设备和浏览器也暴露出一些设计稿阶段不容易发现的问题，后续补充了：