恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何做有效的设计改版练习?
0.0°
2018-04-10 自译外文 经验/观点 原作者: Namika Hamasaki (Haiji) 举报 6455 232 281 18

本文主要讲了日本设计大神对一款旅行应用 Foursquare 的改版迭代过程,流程非常完整,相信能给你带来一些帮助!


经常听到有人说,自己刚做设计,又身在小公司,不懂得正确的设计流程,也接触不到大公司设计的迭代过程,总觉得自己设计流程不规范。偶尔有幸与大神聊设计,得到的答案多半也是多看多想多做之类的话,虽然是这个理,但是我觉得还不如来一次实战案例展示更为有效。


为此,我找了这篇文章,文章是出自日本的一位美女设计大神之手(日本产品设计师,擅长 UI 和品牌设计,个人链接:https://medium.com/@haiji505),详细的介绍了她是如何对一款应用进行改版的。相信读完此文,会对设计改版有一个全新的认识。


本文读完最大的感触就是作者全程都是在与用户进行沟通交流,结合自己的思路进行设计验证,这一点非常值得学习。


一、项目介绍


在旅行前探索你的目的地城市。

Image title△ Foursquare APP 改变了用户旅行的体验


我喜欢用 Foursquare 这款应用,自从我住在东京后就开始使用它了。搬到旧金山后,我对自己可以继续无缝地使用它印象深刻。它帮助我发现世界上任何一个新的地方。去年夏天,我还计划使用 Foursquare 帮助我去波特兰旅行,但是我在使用 APP 时发现了一个问题。


因此,我着手探索可帮助用户规划出行并吸引新用户的功能增强和改进。


二、问题与假设


去年,我尝试使用 Foursquare 的桌面端和移动端一起计划一次旅行。我注意到,在桌面端搜索周边旅游景点很容易,但是在使用移动端时,找更远的旅游目的地时要困难的多。我真的很喜欢使用 Foursquare,所以我想找到一种让移动端更容易使用的方法。要做到这一点,其中一个方法是为用户创建一种方式来为潜在的旅游目的地添加书签,这样他们在使用移动端时就更容易导航了。

Image title

△ Foursquare的桌面端


我研究了指导 Foursquare 的设计理念,他们建议用户列出最喜欢的景点,计划一次旅行并保存想去的地方。我相信他们的目标和我的假设是一致的。

Image title

△ 在 App Store 中Foursquare 的应用截图— iTunes (2017年11月)


三、用户画像


首先,我创建了一个基于在线研究中的潜在用户和身边在使用这款应用的朋友们的用户画像。既然 Foursquare 是关于发现新地方的,我认为目标用户应该是一个好奇和爱冒险的人。

Image title


四、故事板


我使用 Jobs To Be Done(译者注:待完成之工作, 更多详细介绍请参考:https://jtbd.info/2-what-is-jobs-to-be-done-jtbd-796b82081cca,这里就不扩展讨论了)框架和场景创建了以下故事内容。

Image title

△ 故事内容(图片译文:当我想到下一个假期去旅游时,如果我能够知道在某个城市或国家哪里可以找到一个美丽的地方,那么我就可以决定我的旅游目的地了。)

Image title

△ 场景


五、小范围可用性测试

Image title

△ 在旧金山 Yerba Buena 花园里做用户测试


根据我的故事内容和场景,我进行了小范围可用性测试来验证我的假设。

我在公园里找到了7个人,在开始测试之前,我询问了一些基本的问题。

Image title

在我让他们做任务之前,我让他们想象他们正计划前往一个新的目的地(城市或国家)。


这七位用户被要求在 iPhone 上完成以下任务:


1、如果你想找一个你想去旅游的地方,你会怎么做?

2、假设你找到了一个你喜欢的地方,你怎么去看看那个地方?

3、你对那个地方很感兴趣,你决定去那里旅游,接下来你会做什么?


六、发现痛点并确定优先级

Image title

Image title

△ 关联映射

Image title

△ 2 x 2优先级矩阵


我回顾了用户访谈,并将每位用户的痛点写在了便签上。 然后我用关联映射对痛点进行分类,并用2×2 优先级矩阵对它们进行优先级排序。


我测试的每个人都无法在他们当前位置之外找到一个旅游目的地。搜索是最重要的,因为如果新用户不能得到他们想要的结果,他们可能就不再用了。


搜索功能是很多痛点的根源,所以我决定把重点放在搜索功能上。


照片也是一个痛点,用户说他们在决定旅行前希望看到一些关于目的地的高质量照片。这说明在照片功能上有改进的机会。


七、任务流程

Image title

用户评论页面对于 Foursquare 来说很重要,但大多数受访者在寻找目的地之外的旅游目的地时,并没有到达评论页面。


八、设计决策


1. UI 草图

Image title

在设计我的初步解决方案并创建高保真原型之前,我画了一些草图来探索最佳的解决方法。


2. 原型设计并验证


我使用 Sketch 和 Marvel 来创建高保真原型,并召集了5名新用户参与测试。


以下是我在用户测试中使用的原型和测试结果。


主页


Foursquare 确实有助于在当前位置附近找到推荐地点,但在旅行之前找到旅行目的地并不容易。参与者想通过 Foursquare 了解一个推荐的目的地。 我修改了主页,以解决寻找旅游目的地的问题。

Image title

△ 主页


1、根据用户的当前位置,我将主页首图更改为城市照片。

2、由于用户想要找到迷人的目的地,我添加了特色城市功能。

3、Foursquare 在「列表」菜单中提供了专题列表,但新用户没有注意到「列表」菜单。 所以我将现场列表移到了主页,以便让更多用户使用该功能。

4、我把标签名「搜索」改为「探索」。「探索」在字面上的意思是指发现一个新的地方,在首页上它会比「搜索」更让人兴奋。(译者注:功能文案,这个细节很多人经常会遗漏)



结果:5个人中有4人浏览了主页并点击了特色目的地。


搜索流程


在旅行之前寻找目的地是研究参与者的主要痛点。 我回顾了搜索流程和修改后的 UI 设计, 参与者的主要问题是在一座城市中找到目的地。 当参与者在搜索栏中输入城市名称时,他们会显示一个包含你输入的城市名称的当地商圈。我的解决方案是,当用户输入一个城市名称,推荐结果出现一个只有该城市名称的位置(译者注:城市总览入口)。

Image title

△ 搜索区域


结果:每个人都注意到位置输入区。

Image title

△ 建议查询位置


结果:5个人中有2人选择了建议的城市。

Image title

△ 建议使用城市名称的位置搜索


结果:5人中有3人将城市名称输入主文本字段,然后点击「东京」按钮。

Image title

△ 搜索结果


结果:5人中有3人对类别按钮感兴趣。


详情页面


习惯了 iPhone 的人无法找到共享和书签按钮,iPhone 用户不熟悉 Android 上使用的浮动操作按钮,他们没有想到在浮动操作按钮中会有「添加到列表」功能。我将分享按钮和「添加到列表」功能移动到标题栏显示。

Image title

△ 详情页面


结果:每个人都感觉点击「添加到列表」按钮变得更容易了。


九、改善用户旅程


总的来说,参与者都喜欢在应用中探索新的目的地,而不是在他们家城市周边探索。


目前的 Foursquare APP 很有帮助,但缺乏用户需要和期望从 Foursquare 获得的某些功能。 同时,他们也面临着与越来越多的本地搜索平台(如 Facebook Local,Yelp 和其他具有更全面功能的平台)竞争。 Foursquare 的用户希望发现新的地方, 然而,当地搜索市场竞争激烈。 Foursquare 可以通过成为人们发现新地点的应用来扩大用户群,增加现有用户的满意指数,无论要搜索的是在哪个地点。


作为 Foursquare 的忠实粉丝,我不论何时何地都想用到它,我相信后续它也能给我推荐一些很棒的地方!


原文:https://medium.com/haiiro-io/foursquare-a-ux-case-study-f606d4757d9b

作者:Namika Hamasaki (Haiji)

译者:彩云Sky

本文翻译已获得作者的正式授权

Image title

△ 授权截图


本文由 @彩云Sky 原创发布于彩云译设计。未经许可,禁止转载。


微信公众号:彩云译设计

更新:2018-04-10

收藏

232人已收藏

彩云Sky

腾讯ISUX高级视觉设计师

  • 177

    作品

  • 1.3w

    粉丝

  • 13

    关注

  • 实战案例!如何从0到1为Apple Vision Pro设计
  • 苹果Vision Pro上到底有哪些设计亮点?| 视觉篇
  • 抢先体验苹果visionOS的方法
  • 深度解读VisionOS设计原则,掌握下一代设计趋势!

    猜你喜欢

      2018-04-10 自译外文 经验/观点 原作者: Namika Hamasaki (Haiji) 举报 6455 232 281 18

      如何做有效的设计改版练习?

      0.0°

      你确定要举报如何做有效的设计改版练习?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年04月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      281
      232
      18

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录