Learners who opened a live link used to land on a detail page first. Now they land in the class.以前学员点开直播链接,要先进入详情页;现在直接进入课堂。
Lead designer · Team of 3 · 3 months · Mobile, web admin, desktop主导设计 · 3 人小组 · 3 个月 · 移动端、Web 后台、桌面端


Xiaoe is a SaaS platform for knowledge businesses. Merchants sell live and recorded courses; learners buy courses and join live classes.小鹅通是服务知识付费商家的 SaaS 平台。商家在上面卖直播课和录播课,学员可以买课,也可以进直播间听课。
Sets up the class
Web admin and desktop client.商家:在 Web 后台和桌面端创建、开播。
Where learning and buying meet
Course info, the live class and recommended courses.直播间:课程信息、直播课堂和推荐课程都在这里,是我负责的范围。
Joins from a link
WeChat groups, official accounts, mini program.学员:从微信群、公众号、小程序的链接进入。
Course purchase conversion
核心指标:课程购买转化率Subscription rate
Free class: a tap to subscribe. Paid class: a purchase.订阅率:免费直播算订阅,付费直播算购买。
Lead designer, team of 3
3 months, from research to launch.我主导设计,带领 3 人交互小组,从调研到上线历时 3 个月。
Opening a live link led to a detail page first, then one more tap to join. People who open a live link came to watch, yet most never got in.点开直播链接后,要先进入详情页,再点一次才能进直播间。点开链接的人本来就是想来听课的,可大多数人连直播间都没进去。
Live link funnel
64% left on the detail page.64% 的人在详情页离开。
The two pages repeated each other, yet the live room lacked what learners needed most.两个页面大量重复,可直播间里偏偏缺了学员最需要的东西。






| Function | Detail page | Live room |
|---|---|---|
| On both pages · 5 | ||
| Store name, logo, follow | Yes | Yes |
| Course title | Yes | Yes |
| Live status and views | Yes | Yes |
| Leaderboard and invite | Yes | Yes |
| Profile entry | Yes | Yes |
| Only on the detail page · 4 | ||
| Course details | Yes | –No |
| Course outline | Yes | –No |
| Recommended courses | Yes | –No |
| Coupons | Yes | –No |
| Only in the live room | ||
| Watch, chat, gifts | –No | Yes |
The detail page is gone. A live link opens straight into the class, and course info lives in a tab.详情页没有了。点开直播链接直接进入课堂,课程信息收在 Tab 里。






The flow looked logical: learn about the course, then decide whether to watch. So the team assumed the course info wasn't convincing enough.这个流程看起来很合理:先了解课程,再决定要不要看。所以团队以为是课程介绍不够吸引人。
Better copy and covers will get more learners to subscribe.所以团队最初的假设是:更好的文案和封面,会让更多学员订阅。
If it was wrong, every hour spent rewriting copy would be wasted.如果判断错了,花在改文案上的时间就全白费了。


Why did learners leave at the door?学员为什么在门口离开?
2 weeks of live traffic on the detail page, ~30,000 visits.点击和滚动热图:详情页两周的真实流量,约三万次访问。
→ Finding 1How do learners use the live room?学员怎么使用直播间?
6 learners, 2 tasks: join from a WeChat link; browse and buy freely. Think-aloud and follow-up interviews.任务式可用性测试:6 位学员,2 个任务,从微信链接进入;自由浏览和购买。边做边说,结束后追问。
→ Finding 2How do merchants sell through live?商家怎么通过直播卖课?
6 merchants and instructors; 200 assistant–learner chats, shared with consent.商家访谈和聊天记录分析:6 位商家和讲师;200 段助教与学员的聊天记录,经授权使用。
→ Finding 3

How the 6 learners usually join
So Task A recreated the most common entry: a link in a WeChat group.所以任务一模拟了最常见的进入方式:微信群里的一条链接。
Sources: ~30,000 heatmap visits · 6 learner sessions · 6 merchant interviews · 200 chat logs来源:约三万次热图访问 · 6 场学员测试 · 6 位商家访谈 · 200 段聊天记录
Quotes are condensed from interview notes and translated from Chinese.文中引语根据访谈记录精简,由中文翻译。



Heatmap · 2 weeks · ~30,000 visits
| Area | Attention |
|---|---|
| Poster | Highest |
| Close button | High |
| Coupons | High |
| Course title | Low |
| Course details (below the screen) | Under 20% reached |
“I came here for the class. Why am I on a sales page?”“我是来听课的,怎么跳到一个卖课的页面了?”
Learner, usability test · 4 of 6 stopped on this pageThe copy wasn't the problem. The detail page stood between learners and the class, and most never reached the copy at all.问题不在文案。详情页挡在学员和直播之间,大部分人根本没看到文案。
Decide whether the class is worth it.判断这节课值不值得听
Old: shown here only, as a gate3 of 6 left the class to re-check the details; 2 then opened other courses.3 位中途退出回看课程详情,其中 2 位还点开了其他课
Old: only by leaving the class4 of 6 came back for the outline, the replay or other courses.4 位课后会回来看大纲、找回放或看其他课
Old: back through the detail page“I wanted to check what the course really covers. Was it worth it?”“我想再看看这门课到底讲什么,确认自己买得值不值。”
Learner, usability test · left mid-class5 of 6 used courseware, chat and instructor interaction most in class.5 位学员上课时最常用的是课件、讨论和讲师互动。



In the old live room, the only way back to the course info was the close button.在旧直播间里,想回看课程信息,唯一的办法是点关闭退出去。
4 of 6 merchants ran free live classes to sell other courses. Interested learners had to ask an assistant on WeChat, and the answer came too late.6 位商家里有 4 位靠免费直播卖其他课程。感兴趣的学员只能去微信问助教,而答复总是来得太晚。



“We go live to sell. A course page alone rarely convinces anyone. The class, the instructor and the energy in the room do. For us, live is the step right before the sale.”“我们开直播就是为了转化。光靠课程介绍很难打动学员,真正让人下单的是课堂互动、讲师和现场氛围。对我们来说,直播是成交前最关键的一步。”
Merchant interview · free-class sellerLearners asked for what the live room should already show: what it covers, how much, where to buy.学员问的,正是直播间里本该有的信息:讲什么、多少钱、在哪买。
Every function from the audit went on a wall, grouped by moment and by who needs it. Each group became one place in the new live room.功能对照表里的每一项都贴上墙,按时间点和使用者分组。每一组,在新直播间里对应一个位置。

| Function | Before | During | After | New home |
|---|---|---|---|---|
| Course details, outline | Yes | Yes | Yes | About |
| Chat, courseware | –No | Yes | –No | Chat · after purchase |
| Leaderboard, invite | Yes | Yes | –No | Leaderboard · before purchase |
| Recommended courses | –No | Yes | Yes | Recommended |
| Store, title, live status | Yes | Yes | Yes | Header |
| Detail page itself | –No | –No | –No | Nothing left |
After the sort, the detail page had nothing left that only it could do. Learners now land in the class, with course info one tap away.重新分组后,详情页已经没有独有的作用。现在学员直接进入课堂,课程信息只差一次点击。
But merging two pages raised a new question: would the live room become too crowded?但两个页面合在一起,带来一个新问题:直播间会不会变得太拥挤?


Purchase status decides which tabs appear. Live status decides which one opens first.购买状态决定出现哪些 Tab;直播状态决定先打开哪一个。




| Learner status | Tabs | Opens first |
|---|---|---|
| Not bought | About · Leaderboard · Recommended | About |
| Bought, before live | About · Chat · Recommended | About |
| Bought, live | About · Chat · Recommended | Chat |
About: 4 of 6 came back for course info after class.课程介绍:4 位学员课后会回来看课程信息。
Chat: 5 of 6 used chat and interaction most in class.讨论:5 位学员上课时最常用讨论和互动。
Trade-off: merchants wanted more courses on screen; learners didn't want to be sold to mid-class. Recommendations stay in a tab and never pop over the video.取舍:商家希望多展示课程,学员不希望听课被打扰。推荐只收在 Tab 里,不会弹到直播画面上。
The change shipped in every live mode, and most classes ran on mobile.改动上线到了所有直播模式,大部分课在移动端进行。
Learner mobile
Landscape, portrait and audio-only. About and Recommended stay one tap away in each. Drives purchase +9.3%.学员手机端:横屏、竖屏、语音,每种模式里课程介绍和推荐都只差一次点击。推动购买转化 +9.3%。






Instructor desktop
Camera, slides, whiteboard, screen share and chat in one client.讲师桌面端:摄像头、课件、白板、共享屏幕和讨论都在一个客户端里。
Merchant admin and learner countdown
Merchants pick a mode and every mode gets the same tabs. Before the class, the countdown replaces the old detail page. Drives subscription 36% → 81%.商家在后台选择模式,每种模式都自带同一套 Tab。开播前,倒计时页替代了旧详情页。推动订阅率 36% → 81%。



Two weeks after rollout, we compared the new live room against a control group.上线两周后,我们把新直播间和对照组做了比较。
“I can check the course details without leaving the class. When my mind wanders, I flip through them, and I'm still in the room.”“现在不用跳转就能看课程详情。上课走神时翻一翻,也不用离开课堂。”
Learner, after launch“The live room holds so much more now. Before, it felt like half our content was left behind.”“现在直播间能承载的内容丰富多了。以前感觉很多东西都被丢掉了。”
Merchant, after launchLearner CSAT 3.5 → 4.1 out of 5 in the post-class survey. Purchases also depend on content, price and campaigns, so we compared against a control group.课后满意度从 3.5 提升到 4.1(5 分制)。购买还受内容、价格和运营活动影响,所以我们与同期对照组对比。
For learners, it's where they learn about a course, confirm its value and take part in class. For merchants, it's where they keep selling.对学员来说,它是了解课程、确认价值、参与课堂的地方;对商家来说,它是继续卖课的入口。
Define design metrics and tracking at kickoff.
Findability was validated only through pre-launch testing, because no tracking was planned.在立项时就定义设计指标和埋点。这次课程信息能不能被找到,只能靠上线前的测试验证,因为一开始没有规划埋点。
Test making the poster itself tappable.
It drew the most attention on the old page.测试让海报本身可以点击,它在旧页面上吸引了最多的注意力。
Conversion design isn't about making “buy” easier to tap. It's about finding which obstacles between interest, value and decision design can remove.转化设计不是让“购买”更容易点,而是找到从兴趣、价值到决定之间,哪些障碍是设计能解决的。