2017
Portfolio By Jemma Guan
UX Designer | Jemma Guan
Interaction Design
1
Part one
一个面向90后年轻人的美食直播交流 平台，这里有众多美食达人分享的直播 测评，大批吃货分享的必去餐厅，让你 的舌尖之旅尝尽美味。
• 我的角色 PM——需求分析
饭合Foodlink—— 一款美食类直播APP的交互设计 2017.07-2017.08
UX Research——用户研究和分析 Interaction Design——流程和原型绘制
• 方法流程 项目管理——背景分析——用户研究——需求 分析——信息架构——流程图——产品原型—— 可用性测试——迭代
背景概述 ■ 项目目标
■ 存在痛点
以网络直播为主题，选定某一种形式的直播，完成一款 APP 产品的 交互设计，内容集中在播放和互动方面，内容健康积极向上
•
直播行业分析
目前直播可以细分为:综合类、秀场类、社交类、游戏类、明星类、体 育类、教育类。 做基于某一类兴趣爱好或细分市场的直播社交平台， 并完成由量向质的转变成为直播市场突围的关键。
•
1.面对菜单上众多菜品， 人们往往希望对食物有更 深的了解，而不是只知道 其名称价格等
2.传统的点评软件呈现内 容都是图文且极碎片化， 不能很好地展示和传达食 物的真实口味
直播属性分析
视频直播的相比于文字、图片和录播视频而言，前者内容更加丰富， 交互性更强，社交效率更高，更具真实感、实时性，更能满足用户心 理。
•
美食类产品分析
美食相关的应用很多，但直播类的美食推荐几乎没有。除了美食相关 的广告植入外，美食推荐类直播应用则有着更广阔的的盈利空间。
UX Designer | Jemma Guan
3.很多餐厅的广告介绍过于 美化，人们到店了才发现 与想象中相去甚远
4.美食热爱者和吃货们有 向其他人分享美食和餐厅 信息的诉求
用户研究 92
份问卷
4
位深度访谈
■ 问卷&访谈总结 •
有一定数量的人群经常性观看美食视频，集中于睡前和吃饭时
•
受访者认为直播比图文能更好地了解餐厅和食物的真实状况
•
大部分人认为目前直播内容分区繁杂，内容低俗不健康，弹幕素 质低下，播放界面杂乱无章
•
希望同时具有专业人士团队打造和用户原创的内容
•
相比单纯观看主播而言，更多人喜欢弹幕里用户之间的互动
■ 目标用户 •
特征：18~30岁之间的吃货或美食爱好者，希望更多对食物口味、 餐厅体验进一步了解与分享
•
经验：有一定的互联网产品使用经验，对直播类APP（或视频播 放等同类产品）有一定的使用经验或了解
UX Designer | Jemma Guan
■ 用户模型
“美食分享，结交吃货朋友” 林冉，20岁，大学生，吃货一枚 喜欢吃饭的时候用手机看木下大胃王、密子君等 节目，但这些节目来源都很分散，观看不方便， 总会错过更新。她还喜欢到处搜罗并品尝美食， 但是没有一个圈子可以交流分享。
“找到中意的餐厅” 刘畅，27岁，白领，单身小资 刘畅闲暇时会追《深夜食堂》、《孤独的美食 家》等剧集，有时临睡前饿了还会看几集解馋。 周末喜欢和闺蜜们去逛街吃饭，但总是找不到 口味和体验都符合预期的餐厅。
需求分析 ■ 需求提取 •
希望了解更多关于餐厅、食物的信息
•
认为现有的菜单图文介绍不具有吸引力
•
美食爱好者们有分享餐厅和美食信息的需要
•
每个人都有最感兴趣的点
UX Designer | Jemma Guan
接触点分析 1. 登陆／注册
2&3. 寻找／观看直播
•
•
是否需要注册一个使用频率未知的新产品——在首页放置好评较 多的精选视频，吸引用户观看后想要进行更多操作从而完成注册
•
注册流程繁琐，导致放弃注册——简化注册流程, 支持通过多个社 交网络媒体登录
查找观看自己感兴趣的美食直播——提供搜索/标签分类功能让美 食直播内容划分清晰
•
直播内容是否符合自己需求——可以查看直播内容的推荐数、直 播观看人数、评价、主播人气
5. 再次登陆
4. 与主播互动
•
担心错过想看的直播或想回顾直播内容——直播前可设置消息提
•
对主播所吃的美食感兴趣——提供餐厅位置定位或美食购买链接
醒，播放完的内容会有录播，用户可回放播看
•
提出的问题发送后主播没有给予及时回答或者刷屏刷走——对重
•
查看身边好吃的地方——自动检索到自己所在地域位置，也可手
动搜索附近美食直播 UX Designer | Jemma Guan
复的问题评论文字颜色会不同 •
对直播页面各种送礼特效广告表示反感——提供一键隐藏功能， 只保留最基本的设置
信息架构 通过竞品分析和卡片分类法，结合产品需求分析，产出信息 架构及重要层级如右图所示:
■ 设计要点分析 整个应用大的框架分别为“首页”“直播”“饭圈”“我的” 四部分： •
首页“推荐”的直播内容让用户快速能够预览到受关注以 及收视率较高的直播，这主要迎合用户心理好奇心以及喜 欢关心关注率较高的内容，从而促使用户点击。
•
考虑到用户使用手机的习惯以及产品的需要，将“直播视 频”分为可横屏也可竖屏使用，横屏重观看，竖屏重交流。
•
直播间的“加入饭圈”功能可促使用户与主播之间形成群 体，主播对加入自己小组的用户单独开启直播，并且用户 与用户之间也可以进行交流，主播可以发起话题用户一起 讨论。
•
“我的”页面内的重要级主要让用户更为关注的是“关
注”“收藏”，其余是与系统相关的信息纳入“设置”页 UX Designer | Jemma Guan 面当中。
使用流程图——直播播放与互动 ■ 设计分析 直播互动主要针对的是观众端与主播互动的方式，传统的直播互 动方式有：发送弹幕、送礼、点赞。用户在直播页面还可以选择 关注主播、分享直播来表达自己对主播的支持。结合饭合定位， 在保留常见互动方式的基础上增加一些新的功能：加入饭圈讨论、 美食／餐厅推荐。
UX Designer | Jemma Guan
交互方案——竖屏直播间
UX Designer | Jemma Guan
交互方案——横屏直播间
UX Designer | Jemma Guan
交互方案——注册登录
交互方案—— 一级页面
① 首页 让用户快速能够预览到受关注以及收 视率较高的直播，促使用户点击
UX Designer | Jemma Guan
② 直播 细分直播的类别，让用户更清晰更 直观快捷的找到符合自己想要的内 容，降低搜索成本
③ 饭圈 促使用户与主播之间形成群体， 且用户与用户之间也可以进行 交流
④ 我的 简洁清晰，让用户更为关注的是 “关注”“收藏”“个人资料”
2
Part two
易信是网易出品的一款以微信为竞品， 和中国电信联合开发的一款能够真正 免费聊天的即时通讯软件。
• 关于星币商城 一个提供用户使用积累积分来换购商品的功能 。
易信星币商城 ——换购页面重设计 2017.06
一方面易信规定产生星币的奖励规则，鼓励用 户通过一些行为来积攒星币。另一方面易信提 供商品的展示平台，用户可以消耗星币来换购 商城里面的商品，同时也可以按照正常价格购 买。
• 我的任务目标 重新梳理星币商城首页的信息架构，改善页面 布局，优化商品的购买流程。
页面信息元素梳理
■ 星币商城功能： 由信息架构看出，在星币商城内的积分功能包括： 签到、抽奖、分享、成功购物后奖励、游戏以及 一些活动运营等。商城部分包括：购物下单支付 等一系列功能和易信周边、电话短信充值、特惠 限购商品以及一些品牌应用提供的商品等。
■ 星币商城作用： 该功能模块为易信的非核心功能，存在的目的是 为了提升用户的活跃、留存、新增以及内容，通 过丰富的运营活动去促进用户的行为。其次利用 星币商城来打通网易旗下的其他购物平台，如网 易严选、考拉海购等。
UX Designer | Jemma Guan
换购商品核心流程
UX Designer | Jemma Guan
页面分析重设计——商城首页 ■ 结合业务和用户需求得出设计依据
■ 目前页面存在的问题 •
运营活动的推送区域过于分散
•
用户进入星币商城无法快速确定自己目前的星币数量
•
问题与说明置于页面最底部，对用户是较为重要的功能却难以寻找
•
产品模块以Feed流展示，布局过长，如限量商品、周边商品、特权商品、值 得买等，越往下浏览用户越容易迷失
• 第三方合作入口放在值得买和易信周边产品列表的中间，布局不合理 UX Designer | Jemma Guan
页面分析重设计——商城首页 ■ 改进方案 •
首页显示用户当前星币数量，问题与说明入口改为帮助 按钮置于右上角
•
把运营活动集中在一起，包括领现金红包、星币抽奖以 及推荐活动入口
•
去掉电话信息、限量商品以及易信周边三个重复信息流 展示，把爆款精选、值得买两个类目以标签页面形式布 局
页面分析重设计——商品详情页 ■ 结合业务和用户需求得出设计依据
■ 目前页面存在的问题 •
展示图片占用大量空间，应有适配性
•
分享功能属于产品强需求，对用户而言优先级 较低，不应与商品重要信息放在一起
•
点击购买之后才能选择购买数量，一般用户的 逻辑顺序是先决定购买物品和数量，然后直接 付款购买
UX Designer | Jemma Guan
页面分析重设计——商品详情页
■ 改进方案 •
将对于用户而言优先级较低的分享功能放置在右上角， 既不影响主要任务流程，又能保证必要的需求
•
增加尺码颜色选择，减少用户操作层级
•
悬浮面板增加显示商品小图，更加符合用户心智模型
页面分析重设计——购买成功页
■ 改进说明 •
将原设计中标题栏中的返回按钮改为关闭，返回更容易 被误以为返回上一个支付详情页，而事实上是到达订单 详情页
•
将原配图改为商品图片，避免无实际意义的图片占据大 幅版面
•
在“也许感兴趣”列表中加入价格显示，让用户看到更 全面的核心信息有助于增大点击的几率
UX Designer | Jemma Guan
部分交互文档展示
详情见作品链接
Flattening the general theme Flattening the general theme
UX Designer | Jemma Guan
3
Part three
专注于为用户提供简约，易用，有品 质，重原创的博客工具，原创社区， 以及有品质的手机博客应用。
• 关于LOFTER改版 作为图片社交类产品，用户通过发布图片和观
LOFTER 5.6.2 ——信息架构改版设计 2017.05
看他人发布的图片从而结成社交关系，因此首 页、发现、消息、我的以及最重要的发布，这 五大元素在包含大量内容数据和社交数据的情 况下，其庞杂的信息如何进行有序的整合和组 织，就成了一个待解决的问题。
• 我的任务目标 重新梳理LOFTER整体的信息架构，改善页面 布局，优化用户使用体验。
竞品分析 注：这里不再列出详细的信息架构对比，只 做差异点说明，详情见作品链接
• • • •
LOFTER 5.6.2
In 记
首页顶部采用了分段二级导航 发现页滚动标签和下滑菜单结合 卡片式布局展示，注重评论互动 期望用户发高质量的单张图片
• 底部舵式导航只有3个标签 • 主打故事集、贴纸和玩字功能 • 产品可玩性高，社交性弱
UX Designer | Jemma Guan
Nice 好赞 • • • •
首页瀑布流布局 赋予直播功能，入口明显 突出私聊功能，强社交模式 图片发布必须打上标签
足记 • 发现页采用大片列表流 • 发布图片能处理成电影风格 • 支持创建多人聊天
核心流程对比——图片发布
■ LOFTER：
■ In记：
把图片发布当作核心功能，期望用户能够更多的发高质量的单张
通过各类有趣的表情贴纸俘获女性的芳心，因此它主打贴纸和玩
图片，将多选的功能做得较为隐蔽，对图片长按才能唤起。
字功能，增强产品的可玩性同时更增强了用户的粘性。
■ 足记：
■ Nice好赞：
大片模式是足记的主打，将用户拍摄的照片，处理成电影风格，
编辑照片时必须要先打上标签才能发布，这维护了产品内容的统
给用户带来一定的社交筹码。
一性，图片上的标签也为产品提供了更高的信息层级。
卡片分类法 从LOFTER的信息框架中，提取了25个功能点，并找了3名用户进行卡片分类测试。
■ 具体功能卡片： 好友发布的动态、标签推荐、搜索 、达人推荐、我的订阅、 发布文字、发布照片、发布视频、订阅标签、个人信息、 摄影课堂、福利市集、 乐乎印品 、我的喜欢、我的关注、我的粉丝、个人应用 、设置、猜你喜欢、专题推荐、同城热门
筛选定义功能卡片
THEN
NEXT
聊天、通知、评论 、微博好友
简单访谈并存档
为用户介绍卡片内容
让用户把卡片归类
让用户取名并继续分类
先让用户自己看一遍卡片功能，然 后简单讲解，再让用户提问，保证 没有理解上的误差
在没有任何人引导的情况下， 让用户自行分类卡片，类别不 限制
根据用户的现有分类，提示用户增加 或缩小分类，拆分或进行组合，并将 分类命名
UX Designer | Jemma Guan
设计改版点分析 ■ 访谈记录总结 •
■ 设计改版点
三位用户都把“订阅标签”放在发现里，而不是“首页”。 他们认为这一功能更适合与标签推荐，精选推荐归为一类。
•
用户2和3把“微博好友”的功能归为“我的”页面下。用户 原本认为这属于第三方绑定功能，后续不会再使用。
•
三位用户都把“专题推荐”放到了“发现”页面。他们一致 认为专题更像是用户在闲逛时看看能不能发现更多感兴趣的 内容，而放在“消息”页里面有点不伦不类。
•
动态与发现的展示形式
发布照片过程可简化
首页是图片分享App视觉中最
可以减少发布照片的流程，方
重要的部分，也是功能实现好
便用户体验
坏的展示
用户表示“首页”和“发现”页的内容很难进行一个清晰的 功能分类，分类的时候也是最纠结的。
减少部分层级方便进入
标题词汇及逻辑顺序
减少一些重要功能的进入层级，
精选推荐、频道、标签、专题
增加点击和用户关注度
等名称让人混淆，部分逻辑体 验不佳
UX Designer | Jemma Guan
信息架构改版
Point 1
Point 2
Point 3
Point 4
订阅功能调整：在订阅标签的垂直列表展示用 户使用频率最高的标签，采用“标签名字+更 新量+参与人数+更新内容图片”的形式，更容 易激起用户浏览的欲望。 发现页分类标签调整：对原有的精选分类部分 改为小图展示导航，只显示用户订阅标签最多 的前5个，当然用户也可以点击“更多”小控 件查看全部标签。
发布页临时保存位置调整：将临时保存 从首页移除，在选择发布页面新增“临 时保存”入口。
新增专题推荐入口：专题推荐在消息页的入口 不变，新增在精选分类下滑动展示的入口，也 可查看全部专题。
UX Designer | Jemma Guan