SHUHUIDU / 杜舒惠
← 返回作品选关CASE FILE / 01

希望学 APP 体验升级

让课程更好找,让学习更容易开始。

首页重构视觉系统体验验证
从设计背景看起
希望学 APP 体验升级项目预览
PRODUCT / UI SYSTEM
THE BRIEF / 项目摘要

希望学 APP 首页承担课程发现、学习服务与运营转化等任务。针对内容重点分散、核心入口识别度不足、学习路径不清晰的问题,本次升级重新梳理信息层级与模块布局,让课程、讲师和学习资料更易查找。

设计从竞品分析、HCT 色彩优化与品牌符号提炼入手,比较两套界面风格,并将统一的视觉语言应用于导航、图标与内容卡片,在信息效率与品牌识别之间建立平衡。

项目复盘记录,新用户第 4 周留存率由 13% 提升至 18%,核心内容触达率由 42% 提升至 58%。

01
CHAPTER / 0102

找到首页的核心问题

从课程发现、内容触达与学习路径出发,明确首页需要解决的信息组织问题。

希望学 APP 体验升级 · 找到首页的核心问题 · 第 1 页
DESIGN / 01希望学 APP 体验升级
希望学 APP 体验升级 · 找到首页的核心问题 · 第 2 页
DESIGN / 02希望学 APP 体验升级
02
CHAPTER / 0306

建立清晰的视觉方向

结合竞品分析、HCT 色彩优化与品牌符号探索,寻找识别度与阅读效率的平衡。

希望学 APP 体验升级 · 建立清晰的视觉方向 · 第 3 页
DESIGN / 03希望学 APP 体验升级
希望学 APP 体验升级 · 建立清晰的视觉方向 · 第 4 页
DESIGN / 04希望学 APP 体验升级
希望学 APP 体验升级 · 建立清晰的视觉方向 · 第 5 页
DESIGN / 05希望学 APP 体验升级
希望学 APP 体验升级 · 建立清晰的视觉方向 · 第 6 页
DESIGN / 06希望学 APP 体验升级
03
CHAPTER / 0711

比较方案,落到具体界面

比较图标、导航与课程内容卡片的两套方案,将最终选择落实为统一的首页体验。

希望学 APP 体验升级 · 比较方案,落到具体界面 · 第 7 页
DESIGN / 07希望学 APP 体验升级
希望学 APP 体验升级 · 比较方案,落到具体界面 · 第 8 页
DESIGN / 08希望学 APP 体验升级
希望学 APP 体验升级 · 比较方案,落到具体界面 · 第 9 页
DESIGN / 09希望学 APP 体验升级
希望学 APP 体验升级 · 比较方案,落到具体界面 · 第 10 页
DESIGN / 10希望学 APP 体验升级
希望学 APP 体验升级 · 比较方案,落到具体界面 · 第 11 页
DESIGN / 11希望学 APP 体验升级
04
CHAPTER / 1212

回到使用数据

通过项目复盘中的留存与内容触达数据,观察首页升级后的使用表现。

希望学 APP 体验升级 · 回到使用数据 · 第 12 页
DESIGN / 12希望学 APP 体验升级
NEXT MISSION / 继续选关

成长体验升级