INTERFACE · FLOWS · ATMOSPHERE

Interface
as a quiet
conversation.

From medical recruitment tools to atmospheric travel apps, my interface work balances logic with tone-of-voice. 信息结构要清晰,视觉和动效则为体验加一层温度。

MEDICAL UX TRAVEL EXPERIENCE INTERNAL TOOLS
12
36
88
115
STATE
39
DEPTH
44
68
TONE
SYSTEM
A QUIET INTERFACE FOR BECOMING
STATE / DEPTH / TONE
SHI
CASE STUDY · YUNYE 云野|Decision-Layer Travel Product

A travel product built from real friction,
then made runnable.

Created during Tencent Future PM Creation Camp 2025(10–20 days). I started from real planning friction found in feeds/comments and rebuilt it into a decision chain: Plan → Prove → Pack(规划→验证→打包). Deliverables include UX strategy, runnable prototype, and a lightweight system for commercialization without ad-noise.

UX Strategy · 决策链 Runnable Prototype · 可运行 Cursor-assisted Build · 工程协作 AI as Optional Helper · 轻介入
CHAPTER 01 · HOW I RESEARCH 调研方式

From "feeds" to "decisions".

I don't begin with personas. I begin with repeated hesitation in the wild: comment threads, saves, and "still-not-sure" questions. Then I compress them into three decision moments: Where to go, How to go, What to bring(去哪/怎么去/带什么).

研究不是"证明我对",而是让每一步决策更可复用、更省脑力。
YUNYE research comment 1 YUNYE research comment 2 YUNYE pseudo demand debate
WHAT THIS MEANS
When people say “this already exists”, they often mean: the surface exists, but the decision layer doesn’t. (表层功能有了,但决策链没被照顾。)
CHAPTER 02 · COMPETITIVE SCAN 竞品拆解

Not "who is better", but "what decision layer is missing".

I mapped mainstream travel products by how they support decisions. The goal isn't feature-copy, but extracting a usable structure: keep the clarity, refuse ad-first rhythm, and add a proof layer for trust.(借优点,拒绝广告节奏与伪内容)

Product Strengths Weakness / Friction Takeaway for YUNYE
Refuse
Ad-first rhythm, fake notes, endless scrolling.|拒绝:广告节奏、伪内容、刷到疲惫。
Borrow
Structure + signals: guide skeleton + real friction clues.|吸收:结构骨架 + 真实信号(收藏/评论/日期对照)。
Differentiate
Decision-layer product: Plan → Prove → Pack.|独特:把"出行犹豫"做成可闭环的决策链。
CHAPTER 03 · FROM DATA TO DECISION 证据链与方法

Research that can be checked.

I don't "invent numbers". I build a traceable chain: source → sampling → coding → clustering → decision artifacts(来源→抽样→编码→聚类→产出物). This makes the UX decisions explainable and reusable.

EVIDENCE SOURCES 证据来源
Where friction comes from.
Public comments 公开评论区/社群复问
0%
Saves & lists 收藏夹/清单行为
0%
Map reviews 同地点跨日期对照
0%
Route friction 交通/票务/换乘断点
0%
这里的比例是“展示型结构”,你后面把数值替换成真实统计即可(或改成计数:XHS-xx / FORUM-xx / MAP-xx)。
METHOD 数据化方法
From messy inputs to runnable structure.
0
steps
Hover a node to read. 悬停节点查看说明。
PRODUCT ARTIFACTS 产出物
Decision layers, not decoration.
Plan|路线与节奏可执行
0%
Prove|可信度证据层
0%
Pack|装备与行前清单
0%
云野想解决的不是"信息不够",而是"信息太多但无法下决定"。所以把证据链做进流程里,让人更快做出可执行选择。
CHAPTER 04 · BUILD IT 可运行原型

Prototype that can be used, not just shown.

I built a connected front-end prototype to test navigation depth, decision rhythm, and edge cases. AI is used only as an optional helper, never as the main experience. 先把流程跑通,再谈智能化

YUNYE Screen 1
YUNYE Screen 4
YUNYE Screen 7
YUNYE Screen 10
YUNYE Screen 1
YUNYE Screen 4
YUNYE Screen 7
YUNYE Screen 10
YUNYE Screen 2
YUNYE Screen 5
YUNYE Screen 8
YUNYE Screen 11
YUNYE Screen 2
YUNYE Screen 5
YUNYE Screen 8
YUNYE Screen 11
YUNYE Screen 3
YUNYE Screen 6
YUNYE Screen 9
YUNYE Screen 3
YUNYE Screen 6
YUNYE Screen 9
CHAPTER 05 · INTERFACE GLIMPSES 界面瞬间

Selected moments only.

Hover: slow lift + depth. Click: open viewer(进入关键流程的截图组)|把"美"压在"可用"之下。

hover to breathe · click to view

EPILOGUE · 结语

Design is not decoration.
It is decision, made visible.

I build concepts fast, then turn them into runnable structures. 我更在意“想法是否成立”,也有能力把它做成可以上线的东西。

If a product can’t help people decide, it becomes noise. 如果一个界面不能帮助人做决定,那它只是另一种噪音。

CASE 01 · JIAHUI HR OPS SaaS (Concept Redesign)

Operational clarity for HR teams.

Built from real ops pain points, not assumptions.

在上海嘉会国际医院担任招聘运营期间,我高频使用 MOKA 等招聘 SaaS 平台推进岗位发布、筛选与流程流转。长期使用后我发现,问题往往不在"功能不够",而在"状态不清、信息不齐、协同成本高"。因此我以真实业务节奏为约束,构建一个虚拟的 HR 招聘 SaaS 概念方案,把可优化点系统化落到界面与流程结构中。

My Design Position

01 Reduce high-frequency ops friction (把"筛选/流转/确认"做得更省心:少点跳转、少做重复判断)
02 Make status & next-step explicit (任何时刻都能回答:现在在哪、卡在哪、下一步是谁负责)
03 Increase decision confidence with structure (用信息层级与关键字段,让 HR 不必反复"问一圈"才能下结论)

Lightweight validation via a candidate-side micro prototype

我用一个轻量级候选人侧 App 原型,快速验证"状态理解与反馈节奏"是否成立:候选人能否读懂当前进度、是否知道接下来会发生什么。该原型只作为验证工具,用来反向校验后台的状态设计是否真正"可被理解"。

Can candidates understand the status at a glance?
Is the feedback rhythm clear and predictable?

Web Console UI Snapshots (招聘后台的关键页面快照(概念方案,用于呈现信息结构与关键交互))

A focused set of screens covering the core ops loop: job management, pipeline, candidate profile, interview ops, and handoff states. (覆盖高频任务链路:岗位、人才库、候选人档案、面试推进、状态回收与协同提示)

DESIGN PROCESS · STEP BY STEP

How I approached the problem As a recruitment operator, not just a UI executor.

在一开始,我并没有直接进入界面设计,而是先回到招聘工作的本质:

为什么这个节点需要存在
为什么 HR 会在这里犹豫
为什么信息在系统中是"看得见但不好用的"

STEP 01 Problem Framing
在真实招聘流程中,我发现核心问题并不集中在某一个页面,而是出现在流程衔接与状态理解之间的断层。

HR 经常需要反复确认:
这个候选人现在算不算"推进中"?
是否已经进入下一轮?
这个状态是系统规则,还是人为判断?
Focus
Reduce unnecessary confirmation
Goal
Clear and explainable status
Tone
Operational, not emotional
WHAT HAPPENED AFTER THE STEPS

From assumption to validation.

在形成系统结构后,我并没有直接假设方案成立,而是通过对比与拆解进行验证。

Evidence Board
Decision
Hover / Click 左侧证据卡片,右侧规则会"对齐"。
UX Rule
01
UX Rule 01
HR Perspective: Align system status with real recruitment logic
系统中的每一个状态,都必须能够对应到现实招聘中的真实行为或判断, 而不是仅仅作为流程占位。
Status clarity consistency
进度理解一致性
87%
Confirmation efficiency
状态确认效率
79%
Overall process trust
整体可理解度
91%
Micro-interaction

Status that speaks operational language.

我将状态设计视为一种内部沟通接口, 而不是单纯的视觉反馈。

  • 01 Status must be explainable
    HR 能清楚知道:为什么会停在这里。
  • 02 Feedback must be predictable
    下一步是谁,大概多久,会发生什么。
  • 03 Key confirmation should be lightweight
    减少重复确认,而不是制造心理负担。
Submitted
SUBMITTED
我们已收到该候选人的投递
当前处于简历初筛阶段
预计 1–2 个工作日内完成判断
ETA
24–48h
Next
Initial Review

Evidence (What I Actually Changed)

I translated ops pain points into concrete UI rules: status taxonomy, field priority, batch actions, and collaboration cues.

把"难用"拆成可落地的规则:状态体系、字段优先级、批量操作、协同提示。

Structure (How It Holds Together)

The design centers on a stable mental model: Pipeline → Candidate → Action → Feedback. Every screen supports faster decisions for HRBP & hiring managers.

以稳定心智模型串起页面:流程 → 候选人 → 操作 → 反馈,服务 HRBP 与用人经理的决策效率。

EPILOGUE · 结语

Design is not decoration.
It is clarity, made deliberate.

在这个医疗 UI 项目中,我关注的并不是界面是否"更丰富", 而是每一个结构、层级与反馈,是否真正减少了犹豫与误解。

医疗场景本身已经足够复杂, 设计的责任不是增加存在感,而是让关键信息自然浮现, 让人知道自己身在何处,接下来会发生什么。

这一章所呈现的,是我在 Interface 层面的核心立场:
让界面成为秩序,而不是干扰。

NAVIGATION

Continue to systems or studio work.