产品

PM’s Methods and Tools:Workflow from idea to prototypes

Sharp tools make good work.

From idea,to product,there is a long way to go, Success depends on a right positioning,Duration and costs depend on the requirements。

Speed!it is the most important thing in the Internet age。So,we make a MVP(Minimum Viable Product) at first,also,PM can make a High-fidelity prototypes

Here are some tools and methods of my workflow,:

1、IDEA

At first,I draw the 「User Flowchart」according to the product form. for example:sign in process、shopping process…Is this a useful way to think the pages and functions
of the product.

Then,I classifying requirements,sorting out the product form by 「Mind Map」.Is this a useful for User Interface Design.

Draw a sketch on a paper is fine ,when you make the final draft,draw it by using the software and put it is the PRD.

BTW,about the flowchart software,I recommend VISIO 和 OmniGraffle,also PowerPoint is fine

I recommend Xmind and MindNode

2、INSPIRATION

A good design must be from the inspiration of lots material collection,after I saw a lot of APPs and design plans,I am familiar to the design pattern,when I see an idea,I can imagine how the APP looks like.

some websites can inspire you:BehanceDribble

Some tools for material collection:Pixave、Ember、Inboard…that is the smartest way to organize my images,I can sort and add some tags to each image,It is easy and useful to search what I wants.

3、SKETCH

Hands with paper and pen is the best tools, you can draw your inspiration quickly.

I recommend the paper with device wireframe,you can easy to control the elements size.

Also,you can try this ruler

Marvel App provided a file you can print :download here

4、DESIGN

Then,I start to design the prototype,High-fidelity prototypes can be defined as a design with confirmed icons and colors
,also can without color.I think,as a PM,invest your energy in the interaction not the color,It is UI designer‘s duty .

High-fidelity prototypes can cut the cost of team communication.

There is lots of tools,such as Axure RP and Justmind.

I like to use Sketch,professional UI design software,also can be used for prototype.

Sketch is a vector drawing app intended for designers of all sorts. Vector-based drawing is by far the the best way to design websites, icons or interfaces. On top of this vector editing we have added support for basic bitmap styles, such as blur and color corrections.——From Sketch Introduction

Sketch offers the iOS、Andriod UI kits


You can use it proficiently in a couple of hours

Learning Materials:

Materials Websites:

5、PRESENTATION

You can use POP app to show Sktch by hands、Low-fidelity prototypes,take the photo,then creat a link between the pages。

Silverflows can prototype directly in Sketch ,Now,it joins invision,Coming with Graft 2.0,It worth to wait.BTW,Craft is powerful plug-in of Sketch .

I recommend:Flinto、Principle and Marvel, you can use a plugin to export your designs from Sketch into Flinto for Mac. If you make a change in Sketch, you can import again and update your existing prototype.BTW,Principle has timeline

Attention!Do not spend too much time on the cool effects,may slow the program process.

tips:You can link the Mac and iPhone,Then creat a film recorder by Quicktime, use a slide projector give a presentation for team members or clients.

6、COLLABORATION

A real-time tool to present designs with team members for commenting and getting feedback is most important and necessary.

Invision or Zeplin is all your need.

Prototype Design is a fraction of works, Focus on User Study 、Requirements Analysis and Product Planning

By a Rookie PM From China.

Standard
产品

BI 产品开发过程中遇到的那些坑

成功的经验不可复制,但失败的经验可以避免

BI 产品因为环节比较多,所以在开发过程中会有很多坑,这里总结一下踩过的坑。

BI 系统环节虽然环节较多,但是总体可以划分为三部分:数据源、ETL 过程、产品设计。

1、数据源

  • 历史数据:历史数据的处理,向来是数据产品不可避免的一个问题,数据源系统重构,数据库结构字段发生了变化,都需要对历史数据进行整理;此外,也会遇到很多数据字段缺失的问题,比如某些数据未做记录,比如订单数据、商品数据等。这就需要,企业最开始时就要尽可能的考虑未来数据平台的设计,尽可能的记录所有数据。
  • 业务规范:业务不规范会导致数据源质量问题,例如部分业务未完全线上数据化,例如:唯品会平台的平台模式,退款退货时间较长,营收的计算准确性的问题。

2、ETL 过程

  • 数据抽取时间:ETL 一般的都会在凌晨执行任务,然后生成报表,手机端因为更加灵活,随时随地都可以看数据,当时我们设计了「昨日」这个日期选项,所以在 ETL 前后,对用户的迷惑比较大。
  • 源数据修改:如果第二天业务人员对源数据系统中的前一天或者某个时间点的数据进行了修改, ETL 需要及时更新数据仓库的数据。一般是业务人员通知技术,人工调整。

3、产品设计

  • 缓存机制 :为了减轻服务端的压力,在 APP 和服务端中间加了一层数据缓存,用户打开 APP 去读取缓存的数据,缓存会在每天的固定时间失效,会遇到的一个问题就是,如果数据仓库的数据在缓存建立之后发生了变化,缓存数据会不准确,缓存更新就需要一个触发机制,可以是定时,或者是在缓存和服务端建立一个触发更新缓存的机制。
  • 多端产品设计:web 和 APP 独立开发的情况下,当某一个指标的计算公式或者是某个指标对应的字段发生变化时,就需要 web和 app 的产品经理及时通知,进行统一,如果是同一个产品经理、统一报表,或者 APP 是 web 进行自适应嵌套的,就不会出现这个问题
  • 数据准确性校验:所有的程序运行过程中基本都会出现问题, ETL 抽取数据过程中,故障的发生率是最高的,这就需要在数据报表更新后,查看数据的准确性,如果出现异常需要提前告知用户,一般的通过人工校验,当然效率是比较低的,最理想的是对核心指标进行设置阈值监控,通知到产品运营对于异常数据进行排查。此外,对于单个卡片有异常的情况,数值不准确的这种,需要配置可隐藏显示的管理选项。
Standard
设计

BI 移动端 UI 设计总结

上篇:BI移动端产品设计总结

在这个项目里,我不仅担任了PM,还有机会做了 UI 设计师,学习了 Sketch移动设计软件和 Flinto交互设计工具。这一部分,我从框架层和表现层的角度上做项目总结。

1、产品框架设计(框架层)

首先,面对 N 多角色,报表要做到个性化定制,角色之间关注的某一类型的数据中有重复的指标也有不通的,为了避免代码的重复,最好是对数据的分析进行单独管理,直接调用指定的指标组合成报表。

其次,为了更高效,在界面设计上,报表能够灵活组合、快速调整。我对比了业内几个比较先进的移动 BI APP

通过对比不难发现,Power BI 卡片式的设计最符合需求。利用这种设计,一方面,可以通过接口控制增减卡片、调整顺序,而不需要通过更新版本来实现;另一方面,可以通过将卡片类型抽象化、数据格式抽象化,缩短客户端开发时间,如果报表增加,卡片增加,几乎不会占用客户端的开发资源。反观其他界面,例如千牛和 Google Analytics等,分析报表的内容相对固定,如果需要调整,则需要更新版本来实现,每一个报表都需要大量的开发资源。当然,优点就是相比卡片设计,单屏承载的信息量更多,这里就需要根据情况做相应的取舍。

根据结构层功能的需求设计 APP 的框架,上一篇提到了关于报表分类的问题,在最早的 Demo 设计时考虑到某个经理可能会有多个角色(即使部门经理,又是品牌负责人,查看的报表就不一样),而事实上,很少有多重角色存在,在做产品设计时,就要充分考虑这个需求的必要性,不然会影响整个产品体验,实际Demo 1 设计结果,发现品牌切换设计不友好,于是做了重新设计。

所以在设计过程中,要充分考虑用户的交互习惯,要跳出自己思维,去审视设计。做出交互原型的时候,多体验,邀请团队的成员包括技术、测试,听一下他们的想法,最好的是要邀请真实的用户去体验

接下来就是对于图表类型、数据类型进行抽象,把所有的指标进行分类,然后再去分析,这些数据指标展现需要的图表类型,以及数字格式。

  1. 图表类型:
·数字卡片(number)·进程图卡片(progress)
·组合图卡片(combo)·面积图卡片(area)
·堆积面积图(stacked_area)·折线图卡片(line)
·饼图卡片(pie)·列表卡片(table)
·排行榜卡片(ranking)·活动进度卡片(activity_guage)
·条形图卡片(bar)·柱状图卡片(column)
·多柱状图卡片(multi_column)·环形图卡片(donut)
·Web引用卡片(web)· 空白卡片(empty)
·不支持卡片(error)
  1. 数字格式
  • 带单位的金额数字格式(amount_with_units):保留千分符,万元以下为实际数字,小数点后四舍五入,例如:9,999元;万元以上,亿元以下,显示万位,例如:800万;亿元以上显示亿位及小数点后一位,例如:1.3亿。用于销售额、营收、库存指标


  • 金额数字格式(amount):保留千分符,万元为计量单位,万元以下显示小数点一位,例如:0.9;万元以上,显示万位,例如:800。用于销售额、营收、库存指标绘制的图表


  • 基本数字格式(basic_number):整数,例如:1、999


  • 有限小数格式(finite_number):四舍五入精确到小数点后一位,例如:1.5


  • 百分比数字格式(percent):四舍五入精确到小数点后一位,例如:2.8%


  • 日期数字格式(date):日的展形式为「1日、2日、3日…」月的展示形式为「1月、2月、3月…」年的展示形式为「2015年、2016年、2017年…」,此规范适用于日期图标的横纵坐标


2、界面设计(表现层)

分析对比上面提到的业内的几款 APP,像 GA 、Roambi、Tableau还是跟随了企业自身的品牌色调, 生意参谋和 PC 端色调一直,均为科技蓝,而我司主色调为红色,对于数据类 APP,我觉得红色过于鲜艳,我认为应该用一个冷色调做为主颜色,看了dribbblewrapbootstrap上的一些dashboard设计,决定参考INSPINIA IN+ – WebApp Admin Theme配色

  • 关于图标设计:遵循简约至上的设计原则用了柱状图来诠释「数据分析」这个概念
  • 卡片设计:在设计的过程中,需要充分考虑,正常情况和各种异常情况的处理,比如在「进度条」设计过程中,因为卡片内容需要包含实际值、计划值、进度百分比,一开始出了一套比较满意的原型,但是当考虑上进度为负值、超过100%等异常情况时,原型远远满足不了数据的展示需求。在开发过程中也会暴露出未考虑周全的点,比如:数据异常(例如有负值),数字 0和 Null 字段,无数据的处理,版本过低新卡片类型不支持的情况,数据系列排序等

(数据均为脱敏数据,无真实意义)

  • 部分卡片展示
  • 全套界面展示

因为我即扮演了 PM 也扮演了 UI/UX ,跳过了「原型设计」这一步,输出了设计文档,而真实的团队中是少不了 UI/UX 设计师的,PM 们不要过多的去干涉设计,提出自己对于 APP 设计的一些思路就好了,不要限制 UI 设计师的发挥,设计师们一般会给你超出预期的想象。


推荐阅读:

Standard
产品

BI移动端产品设计总结

马云曾经公开说,阿里巴巴本质上是一家数据公司。

我们已经从 IT 时代进入了 DT 时代,尤其是电商公司,大数据的分析应用尤为重要,五月份中旬确立移动 APP 的项目,开始做产品的规划,到现在也已经历了近三个月,迭代了多次,版本号已经到0.18

革命尚未成功,同志仍需努力,先从产品定位(战略层)、产品的功能需求(范围层)、产品结构(结构层)三个方面做一下总结(关于产品的 UI 设计进行单独的总结)。

BI(Business Intelligence)即商务智能,它是一套完整的解决方案,用来将企业中现有的数据进行有效的整合,快速准确的提供报表并提出决策依据,帮助企业做出明智的业务经营决策。

BI 的一般流程:

  1. 设计业务模型
  2. 根据业务模型搭建数据仓库
  3. 数据抽取(ETL)
  4. 设计报表、仪表板

ETL 就是送数据源对数据进行抽取(extract)、转换(transform)、加载(load)的过程,占据相当大工作量的,需要对源数据的表字段进行深刻的理解,此外在业务不规范的情况下,会出现数据质量的问题,数据清洗是一个漫长的处理过程。反向的也会推动业务流程的标准化、规范化。

1、产品定位(战略层)

这里需要解决的第一个问题就「什么是韩都智能?」

产品定位:智能地解读运营核心数据的报表工具

产品目标:决策层方便直观的查看相关数据指标,实时了解经营状况

产品原则

  • 数据准确性
  • 更新及时性
  • 报表扩展性

2、产品的功能需求(范围层)

作为一个BI的移动端,首先需要要有良好的用户体验,分析报告要直观简洁,有极高的可读性。

  • 核心用户体验:方便、简单、清晰、智能

  • 核心数据:营收、销售、库存…等业务多主题分析,面向多个角色


  • 产品功能:趋势图、环比同比分析、进度分析…支持日期筛选、品牌筛选…


  • 系统性功能:登录(白名单)、消息通知、安全设置(手势密码、指纹解锁)、缓存清理、技术支持…


  • 安全性需求:SSL 加密、IP锁定策略…


  • 数据需求:数据统计


3、产品结构设计(结构层)

通过思维导图的形式梳理产品的结构

在设计过程中遇到过一个棘手的问题:面对多个角色,多个报表是否需要分类,如何分类? 当引入权限后,面对不同部门的总监和经理,需要有效的进行权限控制如?结构层的设计对于框架层以及表现层的设计有极大的影响。

下篇:BI移动端UI 设计思考

Standard
产品

产品经理的术与器:从想法到产品原型

工欲善其事,必先利其器

从idea,到product,中间的可谓要经历几番曲折, 产品定位确定决定产品的生死,产品功能需求的确定决定着开发的周期和试错的成本,互联网拼的就是快,所以要做 MVP(最小化可行产品),当然,在这之前,还可以通过高保真原型的方式去演示产品。

整理一下从产品构思到项目执行阶段,产品原型交付阶段的一些工作方法和工具:

1、想法

首先根据产品形态绘制用户流程图比如注册登录流程,购物类APP用户的购物流程,有助于思考产品涉及的页面和功能;接下来需要把APP的功能分类汇总,用思维导图整理出产品的结构框架,为设计 APP 界面做参考。

构思阶段用铅笔画一下草图就 OK,当确定之后,就需要整理进 PRD 文档里。

流程图软件推荐 VISIO 和 OmniGraffle

思维导图软件推荐 Xmind 和 MindNode

2、灵感

一个好的设计灵感的一定是来源于日常素材的积累,在你看过N个APP,N种设计方案,熟悉设计模式之后,看到一个需求,你就已经脑补出 APP 的模样。

Untitled Image

推荐灵感启发网站:BehanceDribble

素材整理工具:Pixave、Ember、Inboard…通过对图片进行打标签、分类快速建立你的素材库,而且很方便进行检索。

你可能会问,「有专业的UI/UX设计师,产品还需要对设计这么深入么?」,一方面,对于设计,我是真心的热爱,我会拿出精力去研究;另一方面,我的观点是,UI 设计是基于你的原型去做界面设计,会受到一定的局限。如果是高级一点的设计师,会加入自己的经验和思考进行设计,初级的 UI,可能直接基于你的原型去设计了。对于色彩的搭配、icon 的绘制等UI 设计更有发言权,但是你的产品结构,排版布局,在一开始就影响了设计的思路。

3、草图

纸和笔是最好的工具,没有之一,可以快速把你脑补的界面画出来。

推荐使用带有手机框架的点状草稿纸,方便根据实际物理尺寸控制元素的大小。

如果你是一个追求细节的处女座,或者是追求完美的天秤座,可以尝试这个尺子。

淘宝有售,安利一下:PdTools

提供一个可打印的模板,Marvel App 提供:点此下载

4、设计

这个阶段可以把手绘的设计稿做成原型,高保真模型可以定义包含颜色、界面元素的UI交互设计稿,也可以定义为灰度无色彩包含交互逻辑的相对高保真,我认为,对于产品,是后者。产品更多的精力放在界面和人之间的交互和界面与界面之间的逻辑。

高保真可以降低沟通的成本,产品的逻辑、流程、布局、操作状态的展现,能够快速的让团队成员理解。

原型设计的工具有很多,面向 Web 为主的Axure RP、面向移动设计的Justmind、还有在线的墨刀等。

这里强烈推荐 Sketch,专业的移动APP界面设计软件,产品也可以用来做原型。

Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页,图标以及界面设计的最好方式。但除了矢量编辑的功能之外,我们同样添加了一些基本的位图工具,比如模糊和色彩校正。我们尽力让 Sketch容易理解并上手简单,有经验的设计师花上几个小时便能将自己的设计技巧在Sketch中自如运用。对于绝大多数的数字产品设计,Sketch 都能替代Adobe Photoshop,Illustrator 和 Fireworks。——摘自《sketch用户手册》

Sketch 提供了 iOS、Andriod系统的原生控件,可以直接使用。

作为产品,不需要做什么复杂的炫酷的设计的情况下,这个工具,基本上一个小时左右你就上手了。

学习资料:

素材网站:

5、演示

无论是给客户,还是给 Boss,以及团队成员,演示交互效果是必不可少的一环。

手绘草图、低保真模型的演示可以通过 POP APP,拍照然后创建页面与页面之间的连接进行演示。

此外针对Sketch 输出的高保真模型。可以通过交互工具来做演示。

silverflows是一款直接在 Sketch 里做原型的工具,不过前端时间被 invision 收购了,计划集成在 invision labs 出品的 Craft2.0版本中,还是非常值得期待的,BTW,Craft 是 Sketch 中功能非常强大的一款插件。

推荐一下:Flinto、Principle和 Marvel, 三款工具都可以实现直接导入 Sketch 设计稿,然后设计页面之间的点击跳转以及转场动画,值得一提的是 Principle 支持时间线,你可以做视差滚动的效果。

切记不要花费太多的时间在炫酷的效果上,可能会拖慢项目的进度,能够达到基本的演示效果就可以。

tips:可以通过手机连接 mac,通过 Quicktime 录屏的方式,将手机屏幕投影到投影仪上进行演示。

6、协作

如果需要将原型展示给团队成员,进行实时讨论,可以实时标记,这样子能够节省沟通成本,提高效率。

推荐几款实时协同标记的工具 invision、zeplin、以及国内的Bearyboard。

原型设计仅仅是产品经理的一小部分工作,产品经理的工作重心应该在用户调研、需求分析、产品规划上

Standard
产品

淘宝店铺还可以这么玩

对于淘宝商家功能,想到了两个点,整理下来

1、店铺首页定时切换

淘宝店铺的首页或者说是专题页面,可以支持两个版本或者以上,可以设定版本生效的时间段。

主要应用场景:电商大促对于每个运营和设计来讲可谓是喜忧参半,有双十双十二这样子的大活动,都是晚上零点开始,一年不下于四五次,要熬夜换页面。自己策划活动也是需要准时切换页面,每次卡点更换心急如焚。如果可以定时切换,这样子不仅解放设计,也有利于用户体验,等待的消费者不用每次刷新都发现页面还没有更换。

2、店铺首页千人前面

店铺首页支持多版本的千人前面

主要应用场景:主要用在精准营销上,可以对新客老客户展现不同的页面,新客推爆款,老客推新品;在换季的时候,针对南北方温度差异,还可以区分营销活动,夏秋交季,北方提前推秋冬装,南方还可以保持夏装清仓的节奏…

Standard
产品

搜索结果商品排序规则设计

在网站重构的时候,整理需求,虽然是自建的 B2C 商城,但是因为品牌的增多,商品数据也指数上涨,老大对于 B2C 商城的发展方向的构思是平台化,而且消费者在搜索浏览商品时,平均深度在3页,需要优先展示优质的商品,满足用户的需求,提升网站转化率,类目列表和搜索结果列表的排序规则需要重新设计优化。

我们核心要解决的一个问题是:能够让用户快速查到想要的商品。这里的核心就是「想要的」,一方面我们就需要了解用户的画像,即人群特征和行为偏好,另一方面就是要推荐给用户普遍收欢迎的商品。这里就包含了两大层数据:输入层和输出层

  • 输入层:这里的数据就包含:用户画像,行为偏好,搜索内容三部分
  • 输出层:输出的是商品,对商品进行评估就需要全方位的分析商品的数据:商品名称关键词、商品属性(品牌、类目、风格、元素、尺码、版型…)、商品标签、价格、促销、商品销售、曝光量、点击率、流量、转化率、库存、退款率、评分…

把这些数据指标进行分类,设计了一下搜索排序模型:

每个模型会处理商品的评分,因为搜索的结果需要快速展现,预先对一些中高频的搜索词建立索引,而商品的打分的更新也会安排周期性,不会过于频繁。

  1. 相关性模型:匹配用户搜索词和商品类目、属性的相关性,这里对搜索词进行分词,优先匹配类目,然后匹配属性、标签,商品的属性区分优先级。
  2. 销售模型:统计商品销售情况,用到的数据有销量、转化率、退款率几个指标,销售占的权重较高,主要统计近三十天的销量。
  3. 人气模型:统计用户对商品的兴趣度,涉及的数据主要是点击率、流量、评分。
  4. 运营模型:运营人工干预的需求,商品的促销,新品的加权,剩余库存以及人工干预排序。
  5. 个性化模型:分析用户画像和行为偏好,用户人群画像,性别、年龄属性与商品的匹配度,用户的浏览习惯、消费习惯。对于用第三方统计工具的来讲,数据几乎不能收集,Google Analytics提供的受众群体受众特征的准确度也较低。
Standard
产品

网站改版总结:如何做网站改版?

负责官网的运营以来,兼任产品经理的第一个接触的项目就是网站首页改版,针对这次首页的改版,从需求收集、产品分析、上线分析三个方面做一下总结。

1、需求收集

一般而言,改版的需求来源于以下几个方面:

  1. BOSS制定的改版计划要求
  2. 运营团队根据数据分析的结论提出需求
  3. 产品以及设计师的思考(当前交互方式、设计流行趋势等)

    4.用户调研和用户的反馈

当然我们这次改版就是老大提出的需求。我们都知道动机理论,老大提需求背后肯定有她思考的点,面对这个需求的时候还需要进一步的请教老大真正的动机。 因为产品主要面向的是消费者,BOSS 的需求事实上可以归为要求,还不能算得上真实的需求。

需求的和评定上还有以下几方面:

  1. 用户调研:我们长期运营着一个会员群,通过调研有奖的形式,邀请会员参与调查问卷,对于首页展现内容的意见和建议
  2. 数据分析:这里我们经常用到的一个功能是热力图,通过这个分析用户的点击行为
  1. 运营需求:收集运营的需求,对于网站展示的内容,以及内容的优先级进行排序

2、产品分析

  1. 战略层:我们的改版目标就是提供给消费者良好的购物体验,首页的作用就是提供清晰的导购体验(如果是个性化的体验,就要考虑千人前面的因素)
  2. 范围层:首页作为大部分访客首次着陆的页面,首先要满足有目标客户搜索,通过分类查找商品的需求,也要满足无目的客户逛的需求
  3. 结构层:通过对内容需求优先级的评定和归类整理,确定不同内容的位置
  1. 框架层:网站的布局一定要有层次,能够区分主次,避免出现信息拥堵,给用户造成心理障碍,减少跳失率
  1. 表现层:用户感知的层面,能够传达网站的形象,给用户留下印象。这里主要就是设计配色,主色调+辅助色以及广告图片颜色、布局、文本等规范

3、上线分析

改版上线后,需要做的就是进行数据分析,分析改版的效果如何,这里就需要对比改版前后的各项数据来评判改版的成功与否。

  1. 流量分析
  • 流量去向:对比改版前后流量去向占比数据,分析是否达到预计的倒流效果
  • 热力图:分析改版后用户点击情况是否达到预期
  1. 用户黏性
  • 主要分析指标:跳失率、停留时间,这两项指标代表用户对当前页面的喜爱程度。对比改版前后一段时间的数据,需要排除特殊运营活动的影响。比如大促节日
  1. 用户反馈

    -通过用户访谈、或者调查问卷收集用户的意见喝建议。
Standard