Building a collaborative travel app and its design system 构建一款协作旅行应用及其设计系统
A dual deliverable: product and system 双重交付物：产品与系统
WePlan is a mobile application concept designed to help groups of friends plan trips together, centralizing planning, decisions, and communication in one place. WePlan 是一款移动应用概念，旨在帮助朋友群体共同规划旅行——将计划制定、集体决策与沟通协调整合在同一平台。
The project had a dual focus: designing the product experience itself, and building a rigorous design system from scratch that could support it. Both are first-class deliverables: the app and the system that makes it scalable. 项目有两条并行主线：设计产品体验本身，以及从零构建一套严谨的设计系统为其提供支撑。两者都是核心交付物——应用本身，以及让其可规模化扩展的系统框架。
Roles: Product Design · UX Research · UI Design · Design System
Tools: Figma · FigJam · Notion
角色：产品设计 · UX 研究 · UI 设计 · 设计系统
工具：Figma · FigJam · Notion
How do you organize a group trip without losing everyone in the process? 如何组织一次群体旅行，而不让所有人在过程中精疲力竭？
Planning a trip as a group means juggling WhatsApp, Google Docs, Airbnb, Tripadvisor: decisions get lost, things get forgotten, and collective enthusiasm fades under the friction. 以群体方式规划旅行，意味着同时游走于 WhatsApp、Google Docs、Airbnb、Tripadvisor 之间——决策在其中迷失，事项不断被遗忘，集体热情在重重摩擦中逐渐消退。
Problem 01 问题01
Too many scattered tools 工具过于分散
Information is spread across multiple apps with no coherence or shared source of truth. 信息分散在多个应用之间，缺乏统一的信息来源与内在连贯性。
Problem 02 问题02
Hard to decide as a group 群体决策困难
Without a dedicated tool, reconciling everyone's opinions generates conflict and confusion. 缺乏专属工具时，协调所有人的意见往往引发争议与混乱。
Problem 03 问题03
Frequent oversights 细节频繁遗漏
Without centralization, important details disappear into message threads and are never acted on. 缺乏集中管理，重要细节消失在消息流中，无人跟进落实。
Problem 04 问题04
Unmanageable group chats 群聊难以管理
The primary communication channel becomes unreadable and inefficient almost immediately. 主要的沟通渠道几乎立刻变得混乱不堪、效率低下。
Designed for groups of friends 为朋友群体而设计
Young urban travelers planning together 共同规划旅行的城市年轻人
Needs 需求
- Plan a weekend or vacation quickly, without switching between apps 快速规划周末出行或假期，无需在多个应用之间来回切换
- Make collective decisions without friction or endless debate 无障碍地完成集体决策，避免无休止的争论
- Share all trip information in one centralized place 将所有旅行信息集中在同一个地方共享
- Get inspired by and copy publicly shared trips from the community 从社区公开分享的行程中获取灵感，并可一键复制使用
Frustrations 痛点
- Conversations scattered across different apps with no clear thread 沟通分散在不同应用中，缺乏清晰的信息主线
- Difficulty aligning everyone's schedules and preferences 难以协调所有人的时间安排与偏好
- Conflicts or confusion over shared decisions and responsibilities 在共同决策和分工上产生冲突或混乱
Warm, reassuring colors built for togetherness 温暖、令人安心的配色，为共同出行而生
A palette and type system designed to feel inclusive, clear, and welcoming 一套令人感到包容、清晰、亲切的色彩与字体体系
Color Palette 色彩体系
Three colors, one warmth 三种颜色，同一份温度
The palette communicates warmth and conviviality: amber as the anchor, yellow as the invitation, and a soft off-white for breathing room. 配色传递温暖与欢聚感——深琥珀色作为锚点，暖黄色作为邀请，柔和的米白色留出呼吸空间。
Typography 字体排版
Helvetica Neue
It conveys clarity, reliability, and simplicity: modern and accessible to all users. 传递清晰、可靠与简洁的气质——现代且对所有用户友好。
Weights: Regular (400) · Medium (500) · Bold (700) + italic variants 字重：Regular (400) · Medium (500) · Bold (700) + 斜体变体
Design decisions for a seamless group experience 为无缝群体体验而做的设计决策
Six principles that shaped the interface 塑造界面的六项设计原则
Bottom Sheets 底部弹出层
Contextual panels keep the user in their current flow without navigation breaks. 上下文面板让用户保持在当前操作流中，无需跳转页面。
Community Trips 社区行程
Users can browse and copy trips or activities shared by the community for inspiration. 用户可浏览并复制社区分享的行程或活动，获取旅行灵感。
Friend Collaboration 好友协作
An invitation and co-editing system built for collective decision-making. 专为集体决策设计的邀请与协同编辑系统。
Information Hierarchy 信息层级
A clear visual structure so every group member can quickly find what they need. 清晰的视觉层级结构，让每位成员都能快速找到所需信息。
Poll Results 投票结果
Real-time vote visualization to help the group reach decisions faster. 实时投票可视化，帮助群体更快达成共识。
Rounded Elements 圆角元素
Soft shapes that reinforce the warmth and friendliness of the application. 柔和的圆角形态，强化应用温暖亲切的整体气质。
Design System 设计系统
A design system built to scale 一个为规模化而构建的设计系统
Beyond the app itself, a structured design system was built from the ground up following Atomic Design methodology, from foundational tokens to complex organisms. Every component was designed with states, variants, and scalability in mind. 在应用本身之外，我们以原子设计方法论为指导，从零构建了一套完整的设计系统——从基础令牌到复杂的有机体组件。每个组件均考虑了状态、变体与可扩展性。
Atoms 原子
Typography tokens 字体令牌
Typographic tokens define every text style in the system, from Bold 20 title to Regular 12 small body, ensuring perfect consistency between Figma and code. 字体令牌定义了系统中的每一种文字样式，从粗体20号标题到常规12号小正文——确保 Figma 与代码之间的完美一致性。
Molecules 分子
Button library 按钮库
A button library covering three sizes, four states (default, hover, pressed, disabled), and two icon variants: without prefix and with prefix. 按钮库涵盖三种尺寸、四种状态（默认、悬停、按下、禁用），以及两种图标变体：无前缀图标与有前缀图标。
Organisms 有机体
Trip cards 行程卡片
Trip cards exist in three formats: large hero, medium list, and small thumbnail, each adapted to its display context with its own metadata (date, participants, primary action). 行程卡片有三种规格：大型主角卡、中型列表卡与小型缩略图卡——每种规格根据其展示场景适配，并附带独立的元数据（日期、参与者、主操作）。
Organisms 有机体
Bottom sheets 底部弹出层
Bottom sheets are WePlan's central interaction pattern. Four variants: activity detail, add activity, create poll, and trip overview, maintaining context while enabling deep actions. 底部弹出层是 WePlan 的核心交互模式。四种变体：活动详情、添加活动、创建投票与行程概览——在保持上下文的同时，支持深层操作。
Key Features 核心功能
Four core experiences that define the WePlan app 定义 WePlan 体验的四个核心功能模块
Feature 01 功能01
Get inspired and build from existing trips 从现有行程中获取灵感，直接开始规划
The home screen centralizes community trip suggestions alongside the user's upcoming trips. An inspiration feed is directly integrated into the planning flow. 首页将社区推荐行程与用户的即将出行整合在同一屏幕。灵感浏览流直接嵌入规划流程中，发现即可行动。
Feature 02 功能02
Create a trip without friction 无摩擦地创建一次旅行
In three guided steps: trip information, friend invitations, planning overview. The user creates a trip and immediately brings their group onboard. 三步引导流程：填写旅行信息、邀请好友、规划概览。用户创建行程的同时，立刻将整个群体纳入其中。
Feature 03 功能03
Let the group decide together 让群体共同做决定
Polls are embedded directly in the trip. Any member can create one, results are visible in real time, and the group can vote and move forward collectively. 投票功能直接嵌入行程中。任何成员均可发起投票，结果实时可见，群体可以一起投票并推进决策。
Feature 04 功能04
Structure activities day by day 按天逐日规划活动
Activities are added via the community database or created custom. Each activity is organized day by day for a clear, readable planning view. 活动可从社区数据库添加，也可自定义创建。所有活动按天组织，形成清晰可读的规划视图。
Key Learnings 关键收获
- Building a design system from scratch gave me a deep appreciation for naming conventions and component architecture. Decisions made at the atom level ripple through every screen. 从零开始构建设计系统让我深刻理解了命名规范和组件架构的重要性，原子层面的决策会影响每一个页面。
- Designing for group dynamics — polls, shared planning, collective decisions — introduced social UX challenges I hadn't anticipated. The hardest part was modeling how groups actually make decisions together. 为群体动态设计——投票、共享规划、集体决策——带来了我未曾预料到的社交UX挑战，最难的是建模群体实际做决策的方式。
- Maintaining consistency between the design system and the product screens required constant back-and-forth. I learned to treat the system as a living document, not a finished deliverable. 保持设计系统与产品页面之间的一致性需要不断调整，我学会了将系统视为活文档而非已完成的交付物。
