改版练习这样做,效果非常不错!

写在前面:

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

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

文章简介

本文主要讲了对一款旅行应用 Foursquare 的改版迭代过程,流程非常完整,最大的感触就是作者全程都是在与用户进行沟通交流,结合自己的思路进行设计验证,这一点非常值得学习。

(译者注:为方便阅读学习,我将文章中出现的图片也都尽可能的翻译过了,见图片中的灰色小字。)

一、项目介绍

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

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

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

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

二、问题与假设

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

△ Foursquare的桌面端

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

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

三、用户画像

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

四、故事板

我使用 Jobs To Be Done(译者注:待完成之工作, 更多详细介绍请参考:,这里就不扩展讨论了)框架和场景创建了以下故事内容。

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

△ 场景

五、小范围可用性测试

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

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

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

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

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

  • 如果你想找一个你想去旅游的地方,你会怎么做?
  • 假设你找到了一个你喜欢的地方,你怎么去看看那个地方?
  • 你对那个地方很感兴趣,你决定去那里旅游,接下来你会做什么?

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

△ 关联映射

△ 2 x 2优先级矩阵

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

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

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

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

七、任务流程

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

八、设计决策

1. UI 草图

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

2. 原型设计并验证

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

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

主页

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

△ 主页

  • 根据用户的当前位置,我将主页首图更改为城市照片。
  • 由于用户想要找到迷人的目的地,我添加了特色城市功能。
  • Foursquare 在「列表」菜单中提供了专题列表,但新用户没有注意到「列表」菜单。 所以我将现场列表移到了主页,以便让更多用户使用该功能。
  • 我把标签名「搜索」改为「探索」。「探索」在字面上的意思是指发现一个新的地方,在首页上它会比「搜索」更让人兴奋。(译者注:功能文案,这个细节很多人经常会遗漏)

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

搜索流程

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

△ 搜索区域

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

△ 建议查询位置

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

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

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

△ 搜索结果

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

详情页面

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

△ 详情页面

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

九、改善用户旅程

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

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

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

注:*这是一个个人练习项目。 我不隶属于Foursquare。 Foursquare是我最喜欢的探索应用,我正在探索如何让它变得更好。 *本案例研究于2017年11月~12月完成。

原文链接:medium

译文地址:彩云译设计(公众号)

作者:Namika Hamasaki (Haiji)

译者:彩云Sky

(0)

相关推荐

  • ps里面怎么把文字做效果(ps文字特效制作方法)

    这一篇类似流淌一样的文字我个人也是很喜欢的不过其实如果是用Ai来做的话会更加方便哦!大家一起来看看吧直接新建一个画布,尺寸随意啦:新建一个黑白径向渐变填充图层,缩放的话大家看着办吧,主要是让白色背景有 ...

  • 微商怎么做效果最好

    淘宝时代的商家赚不到钱,微信时代的微商同样也面临这样的现状.一个新的商业机遇的盛行,赚钱的永远是先吃螃蟹的人.随着红利期渐渐接近尾声,微商也将迎来新的瓶颈.微商怎么做才能赚钱呢? 操作方法 01 对产 ...

  • AI教程:[147]名片如何把图片嵌入文字做效果

    如果在设计过程中,想要把某张图片素材嵌入文字里面,让文字看起来有图案,有特别效果,怎么办呢? 操作方法 01 我们接着上一节的名片制作继续讲解,置入自己的图片素材以后,把图片移动到合适的位置 02 接 ...

  • 形状裂变效果怎么做

    所谓的形状裂变效果,就是一个完整的图形随着时间而变成无数个很小的图形,从动效视觉方面来看的话比较有视觉冲击力,而且搭配一些后期做效果也是很不错的选择,今天一起来学习一下怎么做形状裂变效果. 操作方法 ...

  • CDR[coreldraw x6]怎么做立体效果

    这里分享一下CDR[coreldraw x6] 软件来快速做出一个立体五角星和带立体的圆的效果 操作方法 01 在CDR里将图形画好 02 这里将画好的圈轮廓化,以方便进行做效果 03 在菜单栏内找到 ...

  • cdr字体发光效果怎么做(cdr发光字效果图怎么做)

    大家好,本期小编给大家带来的内容是:"如何在Coreldraw中制作字发光效果?",希望对大家有所帮助.首先,我们先在Coreldraw中创建一个背景为黑色的背景,效果如图所示:第 ...

  • 想快速入门UI该怎么做?

    可以解决刚刚入行做UI时,遇到的大部分问题,纯干货的分享 先举个例子,大多都有的亲身经历,十一年的应试教育,大多都会有自己的一套学习方法.但是对大多初学者而言,都迷茫于如何提升自己,快速学习UI并在行 ...

  • dnf逸龙剑抉择最快怎么做

    逸龙剑-抉择是90级的制作史诗巨剑,和已经绝版的50级史诗巨剑有着相同的名字.或许是由于凝聚了剑圣索德罗斯的气息,逸龙剑(改版后)的整体水准在其他制作武器之上.目前的逸龙剑有着数值优秀的额外伤害加成, ...

  • 美图秀秀制作泛黄色调效果教程

    很多朋友都喜欢泛黄风格的照片,可是PS又不会。怎么办呢? 今天用美图秀秀教大家一招,怎样实现泛黄色调的图片。一起来做吧! 先看看效果图: 图1 打开美图秀秀,选择图片。 图2 选择LOMO中的“泛黄暗 ...