2017 Interaction Portfolio by Jemma Guan

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