产品

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

Untitled Image

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.

an example of User Flowchart

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

an example of Mind Map

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

Untitled Image

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

Untitled Image

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.

Untitled Image

Also,you can try this ruler

Untitled Image

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.

Untitled Image

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

  • ios UI Template
    Untitled Image

  • Material Design Template

Untitled Image

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。

Untitled Image

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

Untitled Image

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.

Untitled Image

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

By a Rookie PM From China.

1
Standard
产品

BI 移动端测试那些事

产品上线后遇到了大大小小的一些问题,原来的流程是,开发在测试环境开发完毕,测试验收,产品通知上线,直接发布正式环境。最近开发的一个主题分析上线后,发现没有数据,最后定位发现的问题是ETL 端没有在正式数据库中添加字段;此外对于已上线的内容,进行修改后,也需要通过正式环境测试,但是又不能在用户使用的正式环境进行测试,而这是需要测试通过后才能上线的。一方面问题是出在沟通问题上,另一方面,因为数据安全,网络安全的要求,正式环境的开放有限,于是设计了这样一个架构,增加了一个「预发布环境

Untitled Image

当程序端或者数据接口进行修改后,可以连接正式数据库进行测试,测试通过后再更新正式环境。

0
Standard
产品

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

Untitled Image

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

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

Untitled Image

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

1、数据源

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

2、ETL 过程

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

3、产品设计

  • 缓存机制 :为了减轻服务端的压力,在 APP 和服务端中间加了一层数据缓存,用户打开 APP 去读取缓存的数据,缓存会在每天的固定时间失效,会遇到的一个问题就是,如果数据仓库的数据在缓存建立之后发生了变化,缓存数据会不准确,缓存更新就需要一个触发机制,可以是定时,或者是在缓存和服务端建立一个触发更新缓存的机制。

Untitled Image

  • 多端产品设计:web 和 APP 独立开发的情况下,当某一个指标的计算公式或者是某个指标对应的字段发生变化时,就需要 web和 app 的产品经理及时通知,进行统一,如果是同一个产品经理、统一报表,或者 APP 是 web 进行自适应嵌套的,就不会出现这个问题。

  • 数据准确性校验:所有的程序运行过程中基本都会出现问题, ETL 抽取数据过程中,故障的发生率是最高的,这就需要在数据报表更新后,查看数据的准确性,如果出现异常需要提前告知用户,一般的通过人工校验,当然效率是比较低的,最理想的是对核心指标进行设置阈值监控,通知到产品运营对于异常数据进行排查。此外,对于单个卡片有异常的情况,数值不准确的这种,需要配置可隐藏显示的管理选项。

愿:天下无坑

1
Standard
产品

BI移动端产品设计总结

Untitled Image

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

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

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

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

BI 的一般流程:

Untitled Image

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

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

1、产品定位(战略层)

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

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

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

产品原则

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

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

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

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

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

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

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

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

  • 数据需求:数据统计

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

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

Untitled Image

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

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

1
Standard
产品

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

Untitled Image

工欲善其事,必先利其器

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

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

1、想法

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

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

Untitled Image

流程图软件推荐 VISIO 和 OmniGraffle

Untitled Image

思维导图软件推荐 Xmind 和 MindNode

2、灵感

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

推荐灵感启发网站:BehanceDribble

Untitled Image

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

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

3、草图

Untitled Image

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

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

Untitled Image

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

Untitled Image

淘宝有售,安利一下:PdTools

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

4、设计

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

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

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

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

Untitled Image

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

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

  • ios UI Template
    Untitled Image

  • Material Design Template

Untitled Image

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

学习资料:

素材网站:

5、演示

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

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

Untitled Image

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

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

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

Untitled Image

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

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

6、协作

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

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

Untitled Image

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

1
Standard