← 全部作品 Udemy · 增长设计 · 2024

一个让用户和收入一起增长的首页

Udemy 以前有两个首页,一个给学习者,一个给企业。我主导了这次改版,把它们合成一个页面, 带来了 2.41% 的 GMV 增长。

我的角色端到端负责的主设计师从研究到全球上线
团队PM、PMM、创意和工程以及研究伙伴
周期2023 年 · 6 个月2023 年 12 月上线 · 2024 年 6 月覆盖全球
成果GMV +2.41%每年约 110 万美元+7.7% 用户增长已在 18 个地区上线
问题

从找不到位置到找到自己的角色

Udemy 自己都把旧首页比作一家线上百货商店,到处是折扣。但来到这里的人其实不是来逛街的。学习者和企业买家都在找属于自己的位置,可谁都没找到。

学习者 · 旧首页

找不到自己的角色

那几年就业一直不太好,刚毕业的学生都很焦虑。他们不知道学什么技能才能找到工作,而页面上只有一排又一排的课程。

Udemy 旧首页,一长串课程轮播悬停即可滚动
企业买家 · 旧首页

不知道团队预算该往哪里放

企业买家想知道团队的培训预算该花在哪里、为什么要信任 Udemy、它到底能提供什么。他们需要的是一眼就懂的价值和真实的客户案例,而不是一个看起来只给学生找工作用的页面。

Udemy Business 旧首页,一个文字很多的长页面悬停即可滚动
对业务的影响
~20%的流量都落在未登录首页但导航把 Udemy 的大部分内容藏了起来
60%的受访者第一眼看不懂 Udemy 的价值主张
50%知道 Udemy 的职场人士并不知道它也面向企业
冲突

先照顾学习者还是企业买家?

学习者 · 课程市场团队课程发现和购买
  • 知道下一步该学什么
  • 快速找到好课
  • 看到学完能带来什么
企业买家 · Udemy Business 团队曝光和销售线索
  • 看懂企业版能提供什么
  • 看到真实有效的证据
  • 清楚知道怎么联系销售
我的判断
  • 用户下一步需要什么?
  • 我们能衡量什么?
  • 一轮又一轮评审

各团队认同的模块顺序

我的增长假设

先讲清价值再让每个人选自己的路

  1. 进入首页看懂 Udemy 是做什么的只要几秒钟
  2. 选择路径看到适合自己的路径学习者企业
  3. 行动
    • 注册
    • 买课
    • 咨询 Udemy Business
页面策略

边介绍边建立信任让人一直往下滑

我按用户心里有多确定来排列页面。已经想好要什么的人,在最上面就能做出选择;越往下,页面越偏向浏览和发现。一路上,每介绍一个新东西,后面就跟一个让人信任的理由,这样用户会一直往下滑。

新的 Udemy 首页,从首屏一直到客户案例和页脚
  1. 做选择个人方案还是企业方案第一个分岔口就在首屏
  2. 做选择职业路径给已经想好目标职位的人
  3. 介绍所有技能都在这里展示课程的广度
  4. 建立信任超过 14,000 家公司信赖第一个大承诺之后马上放上企业标志
  5. 介绍围绕目标的学习方式实操练习、认证备考和数据洞察
  6. 介绍适合每个人和每个团队的方案花多少钱、能得到什么
  7. 建立信任学习者故事和趋势报告来自真实用户和研究的证据
  8. 发现热门内容和大家正在看的课给还在探索的人随便逛逛
  9. 发现根据你的搜索推荐个性化推荐
  10. 建立信任一个有成果数据的客户案例最后再给一个信任的理由

四个设计决策

01

以内容为先的模块化布局

一套基于卡片的系统,每个地区都能按自己的重点重新排序,让 18 个市场共用一套设计。我把新组件加进了 Udemy 的设计系统。

02

讲成果的故事

新的标题模块和学员故事,展示大家从课程里真正收获了什么。

03

给买家的证据

报告、案例研究和客户成果,让决策者有可以分享给团队的证据。

04

两个页面讲同一个故事

先是旧的学习者首页,再切到新首页。新首页同时适用于学习者和买家,不管是第一次来还是回访,往下滚动还能看到更多证据。

降低风险

先测试再分步上线

我们先对首屏的模块做 A/B 测试,验证之后才开发首屏以下的部分。课程卡片根据用户偏好测试来定,新首页再一个市场一个市场地上线。

版本 B · 用户偏好测试
All1JavaScript285,000+ learners2React JS270,000+ learners
3Amazon Web Services (AWS) Certified22 hours · All levels4$17.993
上线版
JavaScriptReact JSAngular
Amazon Web Services (AWS) Certified$17.99
  1. 1“全部”主题筛选拖慢了浏览速度不再作为默认选项
  2. 2主题上的学员人数看不出趋势反而让人困惑去掉了数字
  3. 3价格和真人头像用户两者都在意而真人头像更能建立信任保留在每张课程卡片上
  4. 4课程时长和难度在这个阶段不是决定因素从卡片上移除

设计背后的过程

草图和对齐看板:低保真首页线框图,旁边是模块笔记和业界优秀案例
画草图并对齐方向

低保真草图和内容策略

研究和设计工作坊看板:40 多个首页参考案例按模式分组,比如数据点、方案卡片、报告和故事
研究和工作坊

40 多个竞品研究和团队工作坊

可用性测试卡片分类看板:十位参与者的笔记被归纳成洞察
测试和迭代

偏好测试、文案测试和 A/B 测试

我在 Udemy 的其他增长项目

同样的思路贯穿整个转化漏斗

+13.8%Personal Plan 订阅转化,来自体验优化和测试
2×Team Plan 试用转付费翻倍,来自新的订阅管理
+13%MQL 到 SQL 转化率,来自新的 demo 申请流程
+1.4%付费购买尝试,来自先结账后注册的流程

来自我的设计总监

她在许多影响深远的项目中都是关键贡献者。她充满好奇心,思考深入,一直积极地为我们的工作出力……她的协作精神非常宝贵,她经过充分探索、深思熟虑的设计方案和方法,也说明她是用户的坚定代言人。
Pilar Strutin-BelinoffUdemy 高级设计总监

在 LinkedIn 上查看完整推荐

我的收获

首页本身就是一个商业决策

这个页面决定了 Udemy 怎么向两块业务介绍自己。每一种模块顺序,背后都是两条收入线之间的取舍。我学会了尽早把这个取舍摆到桌面上,而不是让它藏在排版的争论里。

先对齐指标再谈设计

大多数关于排版的争论,其实是在争目标。等各团队对什么算成功达成一致,评审就从各说各的变成了看证据。

设计系统也是增长工具

模块化的组件让 18 个市场可以根据自己的数据重新排列页面,本地团队不用等新的设计就能自己优化。

一起做设计吧。