几周前,我接到一个设计需求是为食品行业设计一套办理方案,甲方给出的韶光是必须在3天内完成。
乍一听,可能会以为这险些是不可能的,但是如果你熟习“GV Design Sprint ”(译者注:GV Design Sprint便是一个专业的设计流程方案,想理解的朋友请见https://designsprintkit.withgoogle.com/introduction/overview),那么就会明白,这实际上是可以做到的。

我创造这是一个非常好的机会,可以在这么短的韶光内实践一套设计方法。
在这篇文章中,我将逐一向大家分解我的设计过程和每天的设计进展。

项目背景

Common Food是一个利用社区支持农业(CSA)出售水果蔬菜的农场。
人们须要在年初提前预定农场一年的收成,然后在成长时令里,社区成员每周都会收到一箱食品。

(译者注:CSA的运作过程常日由认同相同理念的社区支持者(个人或单位)采取共同购买的模式,预先支付一笔用度给当地的小庄家预约一季或一年的收成,农人收成后,再根据实际产出的多寡分配给会员,如此达到结合社区力量支持在地农人采取有机农耕的积极意义。
——百度百科)

一套完整设计案例若安在3天内设计出一款APP

设计寻衅

设计一款运用,帮助普通农场每周能向会员们卖出更多的农副产品。
帮助他们个性化的推举食品方案,以知足会员们不同的知识水平,兴趣和饮食限定。

第一天:资料网络1. 研究方法

研究阶段每每会占用一些韶光,以是尽可能的利用手头现有信息是节省韶光的好办法。
市场环境二手资料,竞争对手,用户调研或者直接去App Store中网络用户评论,我须要尽早理解清楚用户的思维模式。

2. 用户调研

Common Food 公司会在每个季度对会员们进行回访,以便能更好的理解他们的喜好,以下是今年的一些反馈:

“我喜好烹饪和做罐头。
我可以多买一些西红柿吗?”“大头菜我不喜好吃,我把它都扔掉了,不过生菜确实很好吃。
”“我儿子对花椰菜过敏,以是我们从不吃花椰菜。
其余我喜好吃蒜蓉,但不知道怎么做。
”“我希望我能有更多的大头菜,然后用来做泡菜。
”“ 我以为我们该当须要更多的CSAs,连续扩大农场的规模。
我现在看到了很多转基因的怪物农作物,希望有渠道能及时发布最新。
”“我们能不能弄到更多的甜菜?”“我从来没听过白菜,它看起来很俊秀,但是我不知道怎么做这道菜。

一份来自Field Agent的最新报告创造,不管是在操持内还是操持外购物的网购者来说,农产品都是一个很受欢迎的种别。
65%的受访消费者表示,他们购买的是新鲜农产品,与冷冻乳制品并列第一。
31%的人说他们一时冲动买了新鲜水果和蔬菜,超过了零食(23%)和糖果(14%)。
然而,39%的网购者并不会在网上购买新鲜农产品,由于他们更喜好去菜市场。

3. 市场调研

市场研究公司Mintel创造:只管消费者越来越多的转向网上购物,但只有十分之一的美国人会通过电商购买新鲜的农产品,肉类,家禽和鱼类。
该研究建议:为了打消消费者的顾虑,提高发卖额,零售商该当多提倡节约本钱,并供应更全面的产品信息,以建立信赖,提升代价吸引力。

研究表明:亚马逊的“购物车和收藏”等功能对付劳碌的消费者来说也是一个很有吸引力的点,特殊是女性(48%)比男性(37%)更有可能在线购买,做好功能体验很主要。

4. 头脑风暴

脑暴出的问题

我们如何网络用户需求数据来减少摧残浪费蹂躏和分配食品?我们如何通过时令性食品和匆匆销活动来增加发卖古迹?我们如何帮助会员根据他们的饮食偏好发掘额外的食品需求?

5. 用户画像

用户调查的结果供应了足够的信息来创建用户画像,我选择创建与年事和性别都无关的角色,以便能够将更加聚焦在如何平等的实现用户目标上。

用户画像

6. 竞品剖析

当我准备进入草图阶段时,我将会研究在干系行业或竞争对手那里类似的问题和解决方案,以确定最佳方案。

(1)盒子大小和内容分类

FarmBox Direct和Farm Fresh to you两款产品分别供应不同的盒子大小和产品选项。
(译者注:为什么会定义盒子大小,这是由于他们每周会发放给会员的食品因此盒子来计量的。

(2)自定义盒子装的食品种类

FarmFresh to You让你定制你的盒子,添加或删除农产品和设置数量。
但你必须充会员才能定制它,与此同时,你也可以为打消项创建项目列表。

FarmFresh to You

(3)真实的食品照片

Farmstead 许可添加任意数量的购物清单,你可以添加,删除和浏览,都没问题之后再来结账。
Farmstead供应真实新鲜的产品照片,不像其他竞争对手利用库存的照片。

7. 方案思考

我的办理方案是设计一个APP,从会员那里网络数据,比如家庭规模、饮食偏好等等,让会员们可以轻松定制时令性食谱。
利用人工智能理解会员的饮食习气,供应食谱,饮食建媾和运营一些有针对性的匆匆销活动,取得双方共赢。

这些数据可以帮助我们从会员那里得到反馈,然后就可以知道他们在哪个时令可能会重新订购哪种类型的产品或组合,以及他们实际上最喜好什么产品。

第二天:草图和设计

我喜好在自己觉得“明白了”之后开始画草图,我会把自己的想法都画出来,然后再把自己以为不好的想法剔除掉,保留自己以为最好的效果。
我会通过绘制用户旅程舆图来定义用户任务和目标。

1. 用户旅程舆图

办理了用户角色,竞品剖析和草图方案,接下来,我就开始为注册了这些做事的会员们设计流程。
一旦他们通过APP首次下单,我们的数据库中就有了用户的日程安排、发货和账单信息。
一旦确认了这些流程信息,我就准备开始画线框图。

2. 线框图

线框图是APP的骨架,这让我在开始做视觉设计之前,能够专注于关键功能、元素和交互。
我选择了高保真线框图,这样我只须要在一些色彩,配图,和图标上进一步思考视觉呈现。

3. 风格板

在画好线框图之后,我会找相同行业内的APP视觉做一个风格板来作为设计参考。

4. 配色方案

我选择了鲜赤色作为主色。
鲜艳的颜色会让人胃口大开,赤色也会引发购物希望(匆匆销、清仓、热闹等氛围)。

5. 字体选择

6. 图标设计

当说到图标和节省韶光这个话题时,我不建议把它们都画出来。
只管我很喜好自己画图标,但是这次韶光上并不许可。
我推举一些图标库,比如:Material Design icons (https://material.io/tools/icons/),或者我这个运用用到的一个图标库The Noun Project (https://thenounproject.com/#)。

在利用这些图标库时,请把稳购买版权,如果不想付费,也必须注明图标来源,定稿后有韶光再来重新画。

7. Logo设计

我期望这个APP能有一个清晰易懂的名字,同时也希望能有一个与名字非常匹配的Logo。
在思考了很多名字之后,我以为“FameCrate(农场条板箱)”这个名字非常的适宜,通过不断迭代,优化,终极得到了下面这个Logo。

8. 视觉设计

我喜好考试测验不同的风格和设计变革,我对第一稿不满意,由于缺少整体上的同等性,然后不断优化,直到终极全局页面都能做到统一折衷并符合自己的设计预期为止。

第三天:交互原型

到了第三天,我完成了末了的视觉设计,便开始做可交互原型。
我等到这个阶段才开始做这事,紧张是由于如果在线框阶段就开始做原型的话,只管它们是高保真的(我常常这么做),但会花很多韶光在交互界面上。
对付这个项目,我在设计完成后再来添加交互动作,实在是为了节省韶光。

1. 终极设计

2. 自动动画

我会用Adobe XD的自动动画(https://helpx.adobe.com/xd/help/create-prototypes-using-auto-animate.html)功能来做原型设计,这是节省交互动画制作韶光的好办法,而不是在After Effects上花费几个小时来做这种效果。

下一步

可用性测试:找一些真实用户来做这项测试。
我个人最喜好用Maze.Design(https://maze.design/)这款工具来记录测试结果,它易于利用,并能供应有关原型的全面数据剖析。

不断迭代:通过可用性测试的一些结论,在设计上进行迭代,改进用户流程。

总结

在有限的韶光内,你绝对不能让自己分心,必须专注于这个项目并管理好自己的韶光。
我会给自己进行计时,并在每一个步骤上给自己设定时间限定。
我试着让APP用起来尽可能的大略,从草图和用户旅程舆图就要开始思考,末了这统统才能迎刃而解。

感悟

永久相信你的直觉,不症结怕设计修正。
如果你把我的线框图和终极的设计效果图进行比较,会创造我做了很多的选择来改进终极的设计。
其余,也可以利用你自己熟习的软件,或者你自己知道的更快速的方法,而不要太花费韶光来确定是不是跟我完备一样。

原文:https://uxdesign.cc/ux-ui-case-study-designing-a-food-app-in-3-days-1e2856680205

作者:Paola Ascanio

译者:彩云Sky,"大众年夜众号:彩云译设计

本文由 @彩云Sky 原创发布于大家都是产品经理。
未经容许,禁止转载

题图来自Unsplash,基于CC0协议