Follow me

© 2017 by Landy Hao.

 

T: 15046093959

  • Grey LinkedIn Icon
  • Grey Twitter Icon
  • Grey Facebook Icon
  • Grey Instagram Icon

Call

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 和组件库,为后续的给合作伙伴做社区互动工具打下基础。总体来说,是做过最难的项目但是锻炼了作为全栈设计师/产品经理的技能。