Xiaoe · Live 2.0

We removed a page. Subscriptions more than doubled.我们删掉了一个页面,订阅率翻了一倍多。

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 后台、桌面端

Redesigned portrait live room
81%Subscription rate, from 36%订阅率,从 36% 提升
+9.3%Course purchase conversion, relative课程购买转化率,相对提升
6/6Found a recommended course in class, from 2/6不退出直播就找到推荐课程,从 2/6
4.1Learner satisfaction out of 5, from 3.5课后学员满意度,从 3.5
Context

Every live class is both a classroom and a storefront.每一场直播,既是课堂,也是店面。

Xiaoe is a SaaS platform for knowledge businesses. Merchants sell live and recorded courses; learners buy courses and join live classes.小鹅通是服务知识付费商家的 SaaS 平台。商家在上面卖直播课和录播课,学员可以买课,也可以进直播间听课。

Merchant

Sets up the class

Web admin and desktop client.商家:在 Web 后台和桌面端创建、开播。

Live room · my scope

Where learning and buying meet

Course info, the live class and recommended courses.直播间:课程信息、直播课堂和推荐课程都在这里,是我负责的范围。

Learner

Joins from a link

WeChat groups, official accounts, mini program.学员:从微信群、公众号、小程序的链接进入。

Core metric

Course purchase conversion

核心指标:课程购买转化率
Leading metric

Subscription rate

Free class: a tap to subscribe. Paid class: a purchase.订阅率:免费直播算订阅,付费直播算购买。

My role

Lead designer, team of 3

3 months, from research to launch.我主导设计,带领 3 人交互小组,从调研到上线历时 3 个月。

The problem

64% of learners left before reaching the live room.64% 的学员,还没进直播间就离开了。

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.两个页面大量重复,可直播间里偏偏缺了学员最需要的东西。

Old detail page
Old · detail page
Old live room
Old · live room
FunctionDetail pageLive room
On both pages · 5
Store name, logo, followYesYes
Course titleYesYes
Live status and viewsYesYes
Leaderboard and inviteYesYes
Profile entryYesYes
Only on the detail page · 4
Course detailsYes–No
Course outlineYes–No
Recommended coursesYes–No
CouponsYes–No
Only in the live room
Watch, chat, gifts–NoYes
The redesign at a glance

One live room. Learners watch, ask and read about the course without leaving.一个直播间。学员不用离开,就能听课、提问、看课程介绍。

The detail page is gone. A live link opens straight into the class, and course info lives in a tab.详情页没有了。点开直播链接直接进入课堂,课程信息收在 Tab 里。

Portrait live room
Portrait live · class and offers in one view竖屏直播:课程和优惠在同一个画面里
Landscape live room with the Chat tab open
Landscape live · Chat tab横屏直播·互动:视频下方就是讨论
Landscape live room with the About tab open
Landscape live · About tab横屏直播·课程介绍:不离开课堂就能看
The first guess

The obvious fix was better course copy. We tested it first.最直觉的解法是优化课程文案。我们先验证了它。

The flow looked logical: learn about the course, then decide whether to watch. So the team assumed the course info wasn't convincing enough.这个流程看起来很合理:先了解课程,再决定要不要看。所以团队以为是课程介绍不够吸引人。

Our first hypothesis

Better copy and covers will get more learners to subscribe.所以团队最初的假设是:更好的文案和封面,会让更多学员订阅。

If it was wrong, every hour spent rewriting copy would be wasted.如果判断错了,花在改文案上的时间就全白费了。
Old detail page with cover, title and course copy
Research

Three questions needed three different methods.三个问题,需要三种不同的方法。

Click and scroll heatmaps

Why did learners leave at the door?学员为什么在门口离开?

2 weeks of live traffic on the detail page, ~30,000 visits.点击和滚动热图:详情页两周的真实流量,约三万次访问。

→ Finding 1
Task-based usability testing

How 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 2
Merchant interviews and chat logs

How do merchants sell through live?商家怎么通过直播卖课?

6 merchants and instructors; 200 assistant–learner chats, shared with consent.商家访谈和聊天记录分析:6 位商家和讲师;200 段助教与学员的聊天记录,经授权使用。

→ Finding 3
Research process

Every finding traces back to real behavior, words or data.每一个发现,都能追溯到真实的行为、原话或数据。

A learner taking a usability test on a phone while a researcher takes notes
Learner session · think-aloud on the learner's own phone · placeholder photo学员用自己的手机边做边说 · 占位照片
Merchant interview: sketches and notes on the table
Merchant interview · how free classes turn into sales商家访谈:免费直播怎么变成成交

How the 6 learners usually join

WeChat group link3
Official account post2
Mini program1

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 段聊天记录

148observations, tagged by source and moment观察记录,按来源和时间点标注
9issues, each linked to its evidence归类后的问题,都能追溯到原始证据
3findings behind the 64% drop解释 64% 流失的核心发现

Quotes are condensed from interview notes and translated from Chinese.文中引语根据访谈记录精简,由中文翻译。

Finding 1

Most learners never scrolled far enough to see the course info.大部分学员根本没滑到课程介绍。

Old detail page with attention heatmap: hottest on the poster and close button, then the coupons, light on the title
Course details sit below the screen
LowHigh attention
<20%reached the course details滑到课程介绍的人
~80%of leavers were gone within 10s离开的人里,停留不到 10 秒的比例

Heatmap · 2 weeks · ~30,000 visits

AreaAttention
PosterHighest
Close buttonHigh
CouponsHigh
Course titleLow
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 page

The copy wasn't the problem. The detail page stood between learners and the class, and most never reached the copy at all.问题不在文案。详情页挡在学员和直播之间,大部分人根本没看到文案。

Finding 2

Learners needed course info before, during and after class.学员在课前、课中、课后都需要课程信息。

Before

Decide whether the class is worth it.判断这节课值不值得听

Old: shown here only, as a gate
During

3 of 6 left the class to re-check the details; 2 then opened other courses.3 位中途退出回看课程详情,其中 2 位还点开了其他课

Old: only by leaving the class
After

4 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-class

5 of 6 used courseware, chat and instructor interaction most in class.5 位学员上课时最常用的是课件、讨论和讲师互动。

Old live room: no course info inside, only a close button
Old live room · no course info inside旧直播间:里面没有课程信息

In the old live room, the only way back to the course info was the close button.在旧直播间里,想回看课程信息,唯一的办法是点关闭退出去。

Finding 3

Merchants sold courses one WeChat message at a time.商家要靠微信,一条一条地卖课。

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 位靠免费直播卖其他课程。感兴趣的学员只能去微信问助教,而答复总是来得太晚。

Learner asks on WeChat during class 20+ min Assistant replies by hand, class over Class startsClass ends Illustrative · based on 200 chat logs
~50%of course questions came in during class课程咨询发生在直播进行中
20+ minaverage reply time, often after class助教平均回复时间,那时直播往往已结束
WeChat group notice with a live class link, names blurred
Where it starts · a group notice起点:一条群公告

“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 seller

Learners asked for what the live room should already show: what it covers, how much, where to buy.学员问的,正是直播间里本该有的信息:讲什么、多少钱、在哪买。

Insight

Course info was built as a gate before the class. Learners and merchants needed it as a layer, open before, during and after.课程信息被做成了直播前的一道门。可学员和商家需要的,是一层在课前、课中、课后都随时可看的信息。

Before · a gate之前:课程信息挡在门口
Opens a live link Detail page 64% left here Live roomwatch · chat · gifts
After · a layer之后:课程信息一直在直播间里
Opens a live link straight into the class AboutChatRecommended
From findings to structure

We sorted every function by when it's needed, not by which page it lived on.我们按“什么时候需要”重新整理所有功能,而不是按它原来在哪个页面。

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.功能对照表里的每一项都贴上墙,按时间点和使用者分组。每一组,在新直播间里对应一个位置。

Team mapping every function of both pages on a wall
Both pages, taken apart on one wall把两个页面拆开,贴在同一面墙上
FunctionBeforeDuringAfterNew home
Course details, outlineYesYesYesAbout
Chat, courseware–NoYes–NoChat · after purchase
Leaderboard, inviteYesYes–NoLeaderboard · before purchase
Recommended courses–NoYesYesRecommended
Store, title, live statusYesYesYesHeader
Detail page itself–No–No–NoNothing left
Decision 1

We removed the gate and moved course info into the live room.我们拆掉了这道门,把课程信息放进了直播间。

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?但两个页面合在一起,带来一个新问题:直播间会不会变得太拥挤?

New live room with course info in the About tab
New · course info in the About tab新版:课程信息收在 About Tab 里
Decision 2

Tabs change with the learner's status, so the room never gets crowded.Tab 随学员状态变化,直播间不会因此变拥挤。

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

Not bought: About tab open first
Not bought · About first未购买 · 先展示课程介绍
Bought, during class: Chat tab open first
Bought, live · Chat first已购买、直播中 · 先展示互动
Learner statusTabsOpens first
Not boughtAbout · Leaderboard · RecommendedAbout
Bought, before liveAbout · Chat · RecommendedAbout
Bought, liveAbout · Chat · RecommendedChat

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 里,不会弹到直播画面上。

One class, every surface

The fix had to work in every live mode, or the gains would stay in one.这套改法必须在每种直播模式里都成立,否则提升只会停在一种模式里。

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%。

Landscape live room
Landscape · lectures横屏 · 讲课
Portrait live room
Portrait · movement, selling竖屏 · 动作展示、带货
Audio-only live room
Audio-only · talks语音 · 讲座

Instructor desktop

Camera, slides, whiteboard, screen share and chat in one client.讲师桌面端:摄像头、课件、白板、共享屏幕和讨论都在一个客户端里。

Instructor desktop client in camera mode

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%。

Merchant web admin: create a live class and choose a mode
Countdown before the class with a Notify me button
Results

Subscriptions more than doubled, and purchases followed.订阅率翻了一倍多,购买也跟着提升。

Two weeks after rollout, we compared the new live room against a control group.上线两周后,我们把新直播间和对照组做了比较。

Answers finding 181%subscription rate after opening a live link, from 36%点开直播链接后的订阅率,从 36%
Answers finding 26/6found a recommended course without leaving the class, from 2/6不退出直播就找到推荐课程,从 2/6
Answers finding 3+9.3%course purchase conversion, relative, vs control课程购买转化率,相对提升,与对照组比较

“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 launch

Learner 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 分制)。购买还受内容、价格和运营活动影响,所以我们与同期对照组对比。

Retrospective

The live room is not just a place to play video.直播间不只是一个播放视频的地方。

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.对学员来说,它是了解课程、确认价值、参与课堂的地方;对商家来说,它是继续卖课的入口。

Next time · 01

Define design metrics and tracking at kickoff.

Findability was validated only through pre-launch testing, because no tracking was planned.在立项时就定义设计指标和埋点。这次课程信息能不能被找到,只能靠上线前的测试验证,因为一开始没有规划埋点。

Next time · 02

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.转化设计不是让“购买”更容易点,而是找到从兴趣、价值到决定之间,哪些障碍是设计能解决的。