经常听到有人说,自己刚做设计,又身在小公司,不懂得正确的设计流程,也接触不到大公司设计的迭代过程,总觉得自己设计流程不规范。偶尔有幸与大神聊设计,得到的答案多半也是多看多想多做之类的话,虽然是这个理,但是我觉得还不如来一次实战案例展示更为有效。
为此,我找了这篇文章,文章是出自日本的一位美女设计大神之手(日本产品设计师,擅长 UI 和品牌设计,个人链接:https://medium.com/@haiji505),详细的介绍了她是如何对一款应用进行改版的。相信读完此文,会对设计改版有一个全新的认识。
本文主要讲了对一款旅行应用 Foursquare 的改版迭代过程,流程非常完整,最大的感触就是作者全程都是在与用户进行沟通交流,结合自己的思路进行设计验证,这一点非常值得学习。
一、项目介绍
在旅行前探索你的目的地城市。
△ Foursquare APP 改变了用户旅行的体验
我喜欢用 Foursquare 这款应用,自从我住在东京后就开始使用它了。搬到旧金山后,我对自己可以继续无缝地使用它印象深刻。它帮助我发现世界上任何一个新的地方。去年夏天,我还计划使用 Foursquare 帮助我去波特兰旅行,但是我在使用 APP 时发现了一个问题。
因此,我着手探索可帮助用户规划出行并吸引新用户的功能增强和改进。
二、问题与假设
去年,我尝试使用 Foursquare 的桌面端和移动端一起计划一次旅行。我注意到,在桌面端搜索周边旅游景点很容易,但是在使用移动端时,找更远的旅游目的地时要困难的多。我真的很喜欢使用 Foursquare,所以我想找到一种让移动端更容易使用的方法。要做到这一点,其中一个方法是为用户创建一种方式来为潜在的旅游目的地添加书签,这样他们在使用移动端时就更容易导航了。
△ Foursquare的桌面端
研究指导 Foursquare 念,议户列,划并存。相目标假致。
△ App Store Foursquare 应截图— iTunes (201711月)
三、用户画像
首先,创基研究潜户身使款应户画。既 Foursquare ,认目标户应该奇冒险。
四、故事板
我使用 Jobs To Be Done(译者注:待完成之工作, 更多详细介绍请参考:https://jtbd.info/2-what-is-jobs-to-be-done-jtbd-796b82081cca,这里就不扩展讨论了)框架和场景创建了以下故事内容。
△ 故事内容(图片译文:当我想到下一个假期去旅游时,如果我能够知道在某个城市或国家哪里可以找到一个美丽的地方,那么我就可以决定我的旅游目的地了。)
△ 场景
五、小范围可用性测试
△ 在旧金山 Yerba Buena 花园里做用户测试
根据我的故事内容和场景,我进行了小范围可用性测试来验证我的假设。
7,始测,询问基问题。
任,象划往目(或)。
这七位用户被要求在 iPhone 上完成以下任务:
- 游,怎?
- 假设你找到了一个你喜欢的地方,你怎么去看看那个地方?
- 你对那个地方很感兴趣,你决定去那里旅游,接下来你会做什么?
六、发现痛点并确定优先级
△ 关联映射
△ 2 x 2优先级矩阵
我回顾了用户访谈,并将每位用户的痛点写在了便签上。 然后我用关联映射对痛点进行分类,并用2×2 优先级矩阵对它们进行优先级排序。
测法游目。搜索,户结,。
搜索功能是很多痛点的根源,所以我决定把重点放在搜索功能上。
照片也是一个痛点,用户说他们在决定旅行前希望看到一些关于目的地的高质量照片。这说明在照片功能上有改进的机会。
七、任务流程
用户评论页面对于 Foursquare 来说很重要,但大多数受访者在寻找目的地之外的旅游目的地时,并没有到达评论页面。
八、设计决策
1. UI 草图
初决案并创,画草图探索决法。
2. 原型设计并验证
我使用 Sketch 和 Marvel 来创建高保真原型,并召集了5名新用户参与测试。
户测使测结。
页
Foursquare 确,目并易。参者 Foursquare 目。 改页,决寻游目问题。
△ 页
- 根据用户的当前位置,我将主页首图更改为城市照片。
- 由户迷目,添功。
- Foursquare 在「列表」菜单中提供了专题列表,但新用户没有注意到「列表」菜单。 所以我将现场列表移到了主页,以便让更多用户使用该功能。
- 我把标签名「搜索」改为「探索」。「探索」在字面上的意思是指发现一个新的地方,在首页上它会比「搜索」更让人兴奋。(译者注:功能文案,这个细节很多人经常会遗漏)
结:54浏览页并击目。
搜索流程
在旅行之前寻找目的地是研究参与者的主要痛点。 我回顾了搜索流程和修改后的 UI 设计, 参与者的主要问题是在一座城市中找到目的地。 当参与者在搜索栏中输入城市名称时,他们会显示一个包含你输入的城市名称的当地商圈。我的解决方案是,当用户输入一个城市名称,推荐结果出现一个只有该城市名称的位置(译者注:城市总览入口)。
△ 搜索区域
结果:每个人都注意到位置输入区。
△ 建议查询位置
结果:5个人中有2人选择了建议的城市。
△ 建议使用城市名称的位置搜索
结果:5人中有3人将城市名称输入主文本字段,然后点击「东京」按钮。
△ 搜索结果
结果:5人中有3人对类别按钮感兴趣。
详页
习惯 iPhone 法共享书签按钮,iPhone 户熟悉 Android 使浮操按钮,浮操按钮「添列表」功。将享按钮「添列表」功移标题栏显示。
△ 详页
结:击「添列表」按钮变易。
九、改善用户旅程
总的来说,参与者都喜欢在应用中探索新的目的地,而不是在他们家城市周边探索。
目 Foursquare APP 帮,缺乏户需望从 Foursquare 获某功。 ,越越搜索( Facebook Local,Yelp 功)竞争。 Foursquare 户希望, ,搜索竞争激烈。 Foursquare 应扩户群,增户指数,论搜索哪。
作为 Foursquare 的忠实粉丝,我不论何时何地都想用到它,我相信后续它也能给我推荐一些很棒的地方!
原文链接:https://medium.com/haiiro-io/foursquare-a-ux-case-study-f606d4757d9b Namika Hamasaki (Haiji)
欢迎关注译者的微信公众号:「 彩云译设计」