# drinkdrink

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

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

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

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

![Hero — 从手绘草图推进到可用产品](/drinkdrink-case/images/hero.webp)

---

## 01｜产品设计

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

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

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

- 打卡
- 目标管理
- 饮水记录
- 健康数据
- 排行榜

### Core Loop

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

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

### 关系建立

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

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

- **Relationship Rate**：用户有没有成功建立关系
- **First Invite Rate**：建立关系后有没有发出第一次邀请

![关系模型 — 注册之后必须先走到一段有效关系](/drinkdrink-case/images/relationship.webp)

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

---

## 02｜从草图到上线

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

1. Procreate：确认首页、喝水、邀请和关系页面的信息结构
2. Figma：补全流程，并压缩首次使用路径
3. Web / PWA：进入开发与上线，优先验证速度和分发成本

![产品界面 — 从草图到上线后的主要页面](/drinkdrink-case/images/sketch-to-product.webp)

### 核心动作

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

### 首次使用

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

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

### 产品气质

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

### 技术实现

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

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

---

## 03｜冷启动与数据

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

- 抖音、小红书：第一轮内容分发渠道
- 产品介绍：快速说明「朋友一起喝水」是什么
- 操作演示：让用户看到实际怎么用
- 真实使用场景：把轻社交互动放回日常

![产品隐喻 — 内容把用户带进来，产品接住第一次使用](/drinkdrink-case/images/signal.webp)

### Early Results

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

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

重点关注：

- **Signup Completion**
- **Profile Completion**
- **Relationship Rate**
- **First Invite Rate**
- **Notification → Response**
- **Retention**

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

---

## 04｜上线后的调整

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

### Onboarding

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

### Invite Flow

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

### Notification

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

- 谁在找你
- 发生了什么
- 现在可以做什么

例如：

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

### 使用细节

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

- PWA 安装引导
- 页面提示文案
- 入口位置
- 操作完成反馈