赞助商
立即赞助

设计师如何做改版练习才是有效的?来看这个案例!

产品经验3年前 (2021)发布 流光
2.8K 0 0

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

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

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

一、项目介绍

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

设计师如何做改版练习才是有效的?来看这个案例!

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

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

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

二、问题与假设

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

设计师如何做改版练习才是有效的?来看这个案例!

△ Foursquare的桌面端

研究指导 Foursquare 念,议户列,划并存。相目标假致。

设计师如何做改版练习才是有效的?来看这个案例!

△  App Store Foursquare 应截图— iTunes (201711月)

三、用户画像

首先,创基研究潜户身使款应户画。既 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 在「列表」菜单中提供了专题列表,但新用户没有注意到「列表」菜单。 所以我将现场列表移到了主页,以便让更多用户使用该功能。
  • 我把标签名「搜索」改为「探索」。「探索」在字面上的意思是指发现一个新的地方,在首页上它会比「搜索」更让人兴奋。(译者注:功能文案,这个细节很多人经常会遗漏)

结:54浏览页并击目。

搜索流程

在旅行之前寻找目的地是研究参与者的主要痛点。 我回顾了搜索流程和修改后的 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)

欢迎关注译者的微信公众号:「 彩云译设计」

设计师如何做改版练习才是有效的?来看这个案例!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

现在 UI市场越来越完善,在以前 dribbble 等不敢想象的风格都逐渐出现在产品中。那么在现在的市场什么样的「设计」是好的设计...
实战案例
对于移动端APP 而言,图标始终还是最重要的「门面」,它直接关联着产品的品牌价值,图标是否具备良好的可用性,将会直接影响...
App图标
网易UEDC – 张书超 : 在过去一年多的时间里,我有幸参与了电视端大屏幕的项目。在不断的尝试、探索和设计中,也收获了一些关...
交互设计
前言 大部分用研的小伙伴,每一次做可用性测试都需要邀请参与者在现场完成任务,观察并注意他们的行为,然后总结得出结论。没...
可用性测试
一般而言,杰作的诞生不是花更多的时间和资源去解决问题本身,而是少说废话多做事。 过去我认为随着技术的进步,我们的工作...
Eugen Eşanu
关于用户画像的讨论已经很多了,对于用户角色的多样性,复杂性,以及它的实用性等等。不可否认的是,用户画像在很多时候都发...
Eugen Eşanu
在提高可用性的建议中,如何优雅、清楚的告知用户哪里出错了是非常重要的。当然,如果能够一开始就避免他们犯错是最好的。 ...
交互设计
@菜心设计铺 :前几天做了《暴风影音 App 重设计》,不过还没做完,所以今天主要讲讲我寻找改版切入点的方法——品牌探索。 到...
ICON