
Qingmang 2.x:
IOS and WeChat Mini - Program Design
Role: Product Designer
Duration: 6 months
Methods: research synthesis, interface design, usability testing
Deliverables: on-boarding user flow, wireframes, mockups with ideation, marketing campaign design
Background and Challenges
轻芒杂志是一个高质量内容平台,目标是提供 state-of-the-art 的推荐产品模式,让高品质内容成为读者睡前必读。2.0 版本要为读者提供的是更为轻松愉悦的内容消费享受,让对高质量内容更有追求的用户,可以在轻芒杂志里发现和自己兴趣相关的源源不断的好内容。
这其中我们面临很多产品设计的挑战。1.0 版本给用户的感受是简洁的,每个栏目每天更新人工更新 5 篇,采用留白风格和纤细的新报宋字体。2.0 中我们要丰富内容体裁,在首页可以有无限的内容,可以切换分类产生在各个兴趣广场闲逛的感觉,同时还可以进入无限量本细分兴趣杂志。2.0中人的要素更重,好的内容是被很多人马克出来的,碎片内容是可以看到很多好内容的
更具体的挑战是:
-
我们如何让用户找到足够多感兴趣的好内容?
-
我们如何在源源不断的内容信息流下保持杂志感和沉浸阅读感?
-
我们如何让用户打开更多文章,并分享给他的好友们,或者写下他们对文章段落的看法?
-
我们如何在更丰富的内容体裁和页面逻辑下保持原有品牌的简洁、留白,和所谓的轻芒感?
Research and Synthesis

IA 2.0 by Junyu

Customer Journey by Xiaoxu
On-board Design Process
On-board User Flow

On-board Design Goals:
-
用户有具体目标时,首先保证进入具体目标
-
任何路径进入的用户,都会经过 On-board
Sign-up Goals:
-
没有用过 iOS 的用户,直接微信登录
-
用过 iOS 的用户,提供用手机号认证的可能 (只在初次进入时提供,以及之后可以绑定手机号)
-
如有可能,尽可能收集更多的微信号、手机号、绑定关系
Key Decisions:
-
微信登录是必须的
-
两个已存在账号绑定,必须放弃一个
On-board Wireframe
Goals: 体现丰富的细分兴趣,可以订阅杂志和关注人




On-board Iterations



on-board 2.0



on-board 2.1
通过用户测试发现,用户没有耐心做多层级选择,on-board 通过率平均 69%, 于是去掉了分类的概念,直接订阅杂志;除了反色,加了 icon,来表示选中未选中的状态;2.2 版本中,on-board 里又去掉了关注人的概念,只需要勾选一本杂志的 onboard 通过率有 89%.
Overview Design Process
Overview Wireframe
Goals: 快速导航到自己订阅的杂志,订阅管理,发现新的杂志



Overview Iteration



overview 2.0
Explore Design Process
Explore Iterations
Goals: 读者可以随意「闲逛」,在浏览自己已知兴趣内容的时候,也发现自己未曾知道的新鲜兴趣

Challenges:
-
封面呈现杂志感
-
体现丰富的内容体裁:
-
碎片内容:马克,图片,短视频
-
长内容:图集,文章,长视频
-
-
保持留白的风格和沉浸的阅读体验
-
有限内容和无限内容的矛盾
-
让用户感受到轻芒的 timeline 里有源源不断的好内容,有刷新的习惯
-
让用户感知到优质内容是每天都有人挑选的,大家马克出来的才是好内容,有每天都来看看的习惯
-
Design Solutions
-
通过 usability testing 和对 metrics 的分析,我们发现用户对于同内容体裁的横滑消费的并不如预期,而且很多用户反馈多section的横滑和页面整体的竖滑,让页面多显杂乱,和我们想要体现的简洁和留白背道而驰。所以在后续版本迭代中不再采用同体裁横滑的方式。
-
为了为用户建立每天都打开轻芒的预期,我们对头部内容(封面)进行日更,并且人工配图,体现杂志感和内容的高质量。
- 通过观察用户的 behavior flow,我们发现重度用户在具体的细分杂志里消费更多内容,所以在 explore 内容开始前插加了一个 section 给重度用户快速导航到自己最常看的杂志。
-
为了有纸质杂志感偏扁平的感觉,在最早期的版本 timeline 中并没有用卡片的形式;在 usability testing 和用户反馈中多人表示内容呈现的杂乱和没有分界,于是采用了灰底白色卡片的样式,提升了 explore 页文章的打开率。
Retrospective
作为全栈的产品设计师参与了轻芒杂志 2.x 版本从线框到最后交付的过程,并为提升 Growth 包括新用户的 Activation, Retention,
Referral 等指标做出产品设计和运营需求上的优化。整体做设计的思路是把我们调研出的需求推到极致,然后通过测试和上线后的观察,再去繁从简或做更加柔和的调整。这样的好处是我们确实验证了一些 assumption 并从用户行为中找到了如何让他们阅读更多文章,鼓励他们分享或是做笔记的规律,但同时因为融合了太多需求,可用性和视觉层面都做了一定的牺牲,还有很大优化的空间。
个人来说大体掌握了内容信息流的设计要领,常规的功能页面可以通过组件库快速搭建,确保流程上没有差错,同时可以快速设计并协助开发小的优化增长指标的 feature 做快速迭代和测试并对结果负责。进行到 2.3 版本的时候也协助 Junyu 完善了轻芒的 Design Guideline 和组件库,为后续的给合作伙伴做社区互动工具打下基础。总体来说,是做过最难的项目但是锻炼了作为全栈设计师/产品经理的技能。