首图2.jpg

Intern @Kwai

快手实习

交互设计实习生 | UX Designer

Loliboom

一甜相机

一甜相机是快手旗下一款集美颜、修图、模板、玩法视频于一身的多功能拍摄软件。

​由于一甜相机仍处于产品成长期,在实习期间有着较大的设计变动。六个月十余个版本迭代的过程中,我参与了模板页大改版、分享链路优化、构建会员体系、搭建设计系统等重要的设计/业务需求。

My Role / 

用户调研 | User Research

竞品分析 | Competitive Analysis

交互设计 | Prototype

设计系统 | Design System​

Year / 

2021.06-2021.12

Loliboom is an all-in-one camera & photo/video editing app.

分享链路改版背景 | The Background

01

一甜相机包含几个功能,拍照、修图、模板、拍视频、跟拍卡点视频,分享链路指的是所有这些功能从启动-保存-分享的这一整个链路。

在之前的设计改版中,已完成短期业务目标(主站分享率提升),但基于当时的设计方案,我们仍然洞察出了许多新问题。

01

业务侧 | Business Side

​分享链路为达目标牺牲体验,矫枉过正。对于长期目标实现与口碑建设不利。

02

用户侧 | User Side

在分享上被剥夺了选择权。使用效率低。

图片备份.png

此时的业务目标 | Product Goal

长期目标:提升MAU

短期目标:通过稳定主站分享率、持续输送主站作者数、主站作品数,改版后接受数据不变或轻微下滑(由于之前强制分享带来的脏数据将被清除)。 

此时的用户目标 | User Goal

​高效完成任务

此时的设计目标 | Design Goal

​考虑到业务目标,链路优化后分享到快手的数据可能会轻微下跌,但用户体验的提升长远来看对于用户粘性、用户满意度的维持有着较大的影响,

因此,设计的首要目标为修正明显设计bug,让用户使用更流畅、便捷

其次,相较于追逐短期目标舍本逐末的做法,我们在引导用户分享的同时,为长期用户增长布局

现状分析 | Current Situation Analysis

以拍视频为例
Taking a video

2021-12-23 233719.png

· 不同模块的分享页差距巨大,用户学习成本高

​· 分享到其他平台路径较深,用户难以发现;使用文字按钮诱导用户分享到快手,使用户出现“被欺骗”感,从而产生负面情绪

​· 页面布局上出现反用户操作习惯的设计

数据分析 | Data Analysis

下载.png

a.拍照/修图目前作为生产量最高的两块,保存-分享转化率较低,提升空间较大;
b.跟拍的分享转化率是所有功能中最高的,但由于拍摄门槛较高,保存转化率有待提升;
c.卡点的制作门槛较低,保存、分享的转化率都比较好,需要提升启动-拍摄这块的转化率;

​设计洞察 | Insights

· 图像处理类功能的使用率最高,但用户分享到快手的意愿较低(与快手短视频平台定位略有错位),因此可通过设计:(1)让用户了解可以在快手分享照片;(2)允许用户分享到其他平台,以通过社交平台传播吸引用户增长;

​· 玩法视频类功能转化率高但使用率低,可通过引导用户,以降低学习成本,提升使用率;

设计策略 | Design Strategy

尊重
Respect

不强迫用户

​文案表达平易近人

高效
Efficiency

符合或低于用户认知

信息传达清晰

交互​一致性,对用户来说没有陌生的门

愉悦
Pleasure

视觉清新活泼

​反馈符合预期

设计方案 | Final Design

拍照
Camera

2021-12-24-083928(1).png

· 「视觉引导」增加缓慢浮动的气泡提示,分享icon在1s后,旋转成为快手logo;

· 「文案提示」气泡文案教育用户可将图片分享快手;

· 「信息归纳」页面清晰简洁,视觉上与层级上强调“分享至快手”;

· 「拓展性高」若之后增加更多图片二次编辑功能,布局更合理;

· 「一致性」统一图片处理模块的分享页布局;

拍视频
Take videos

2021-12-23 233719.png
2021-12-24-083928(2).png

· 「系统可见」按钮文字与icon表意一致,用户理解无歧义,不误导用户;

· 「灵活高效」将用户行为分流,选择分享到快手的用户与其他平台的用户可最快完成目标;

· 「防错」用户若想分享到其他平台有两条路径:

                 (a). 在保存页点击分享弹出此面板;

                 (b). 从快手返回一甜的用户弹出此面板;

跟拍视频
Follow

2021-12-24-083929.png

· 「避免歧义」修改变速icon的开启态与关闭态,用对勾样式代替on与off,开启态代表效果开启,有助于区分变速面板打开与变速效果打开,避免歧义;

· 「灵活高效」变速的快速、慢速经调研发现存在较大歧义,理解成本较高,将文字信息改为速率,更加具象;随着用户切换进度条,小窗教程随之匹配速率;

· 「一致性」统一视频处理模块的分享页布局;

更多方案与思考 | Other results

2021-12-24-084123.png

数据反馈 | Data feedback

整体数据表现有升有降。但保存渗透率整体上涨分享快手转化率轻微下跌,但未超过0.5pp,在方案设计前期预期之内,是由于剔除一部分强制分享的数据导致。

icon-新用户 - 副本.png

新用户

一甜-修图-分享快手作品数  +0.215%

一甜-修图-分享快手转化率  +0.175%

​……

yonghu.png

老用户

一甜-修图-保存渗透率  +0.011%

一甜-修图-保存uv  +0.036%

​……

从分新老用户的数据维度上看,针对新用户的各项核心数据中,上涨项数量与幅度均大于下跌项,由于新方案交互更合理,对于新用户来说更友好,因此该结果在预期之内;

针对老用户的各项核心数据中,上涨项幅度略低于下跌项,可能原因是a/b test实验时间较短(2021-08-26 至 2021-10-12),若拉长实验周期,随着用户对改版的习惯,预估数据将会回升;

模板页改版背景 | The Background

02

模板模块自2021-07上线起,几经改版,功能渐渐变得丰富而冗杂。我们不断收到用户反馈其中的一些体验问题,同时一直以来沿用的首发版本的设计已渐渐落后,改版势在必行。

用户调研 | User Research

于2021-11,从交互体验方向进行满意度调研,选取一甜活跃用户投放问卷,有效回收11502份。NPS整体提升较大,由9月的32.9%提升至45.9%,其中模板功能的使用情况由21.5%提升至55.7%。同时也收集到对模板功能满意度较低的用户反馈。

其中,

28.9%

​用户表示,无法快速找到退出模板页的方式

27.3%

​用户表示,不能快速找到想要的功能

竞品分析 | Competitive Analysis

美图秀秀

image (2).png
image (3).png

用户下滑时,顶部banner、搜索、工具栏均收起,加大feed流显示区域

轻颜相机

image (5).png

醒图

QQ图片20220110213523.png

顶部tab均较为精简,可预留较大的feed流空间

faceu

image (4).png

​以二级页形式出现,不设底部tab以增加展示区域

启发点:竞品整体的feed流展示区域较大,同时采用底部tab的设计可避免返回交互不统一的问题

机会点:但大部分竞品在下滑态中无法快速回顶,也无法快速进入个人页

现状分析 | Current Situation Analysis

模板页初始态

QQ图片20220110110120.jpg
编组 8_1x.png

关闭icon不明显,用户不易感知。本质原因是交互行为不统一

banner布局与样式限制了模板显示区域,以及搜索栏的视觉表现

页面元素堆叠,玩法栏与tab栏所占空间较大

feed流展示区域较小,坪效较低,增加用户额外操作成本和浏览成本

底部导航样式导致所占空间较大

模板页下滑态

QQ图片20220110110111.jpg
编组 9_1x.png

模板页下滑后,退出路径较长,对于新用户不易感知

​分类栏的主tab与子tab亲密性有优化空间

顶部元素堆叠,且feed流浏览区域仍然不大,用户不易沉浸

feed流上下滑过程中,底部tab反馈不够敏捷,用户无法快速感知tab唤起与消失的逻辑

设计目标 | Design Goal

a. 增加初始态与下滑态时feed流显示区域,提升屏幕使用效率

b.  优化返回的交互逻辑,同时满足用户快速回顶的需求;

c. 在下滑态中提升坪效比的同时,尽可能多地保留其他功能入口(搜索、个人页),满足用户快捷操作;

设计方案 | Final Design

方案A

iphone-13-pro-max-mockup_freebie.png

「初始态」

 · 将模板功能作为首页主tab,彻底消除了返回的问题,同时也便于核心功能的切换;

 · 修改banner样式,减少高度,使搜索框视觉表现更加明显;

 · 缩减主tab与子tab之间的间距;

「下滑态」

 · 常驻个人页入口;

 · 保留回顶快速操作(图2放在顶部搜索栏旁,图3在底部tab文字按钮旁);

方案B

2.png

「初始态」

 · 修改底部tab样式,缩减tab栏高度;

「下滑态」

 · 返回按钮样式更明显;

方案C

3.png

「初始态」

 · 去掉底部tab,将个人页入口放在banner内部;

 · 优化搜索框视觉样式,同时需要更改与统一线上banner颜色与样式,以确保文字识别度与页面美观度;

「下滑态」

 · 隐藏玩法入口;

最终经设计侧产品侧讨论,达成共识采用方案A。