原文链接：https://uxdesign.cc/ui-ux-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app-d635b911b648

背景

几个月前，我妈叫我给她的爱宠查一查最好的宠物食品品牌是什么。在网上搜索了一番之后，我得到了以下结论：大多数加工食品会对宠物的健康产生极大风险，自己烹饪营养均衡的食物才是最健康的选择。

Lolek，Gezer和Donatello的嬉戏时光

发现挑战

加工食品的原料中往往含有人类食品工业中的废料或者病死动物的肉，这对宠物来说是不健康的。除此之外，绝大部分在市场上流通的宠物食品都含有化学成分、防腐剂、乳化剂、人工色素、甜味剂和多余的脂肪，这虽然会让狗子和猫咪觉得这些食物更好吃，对健康却是无益的。

自从宠物加工食品被引入市场，退化性的健康问题在猫狗中越来越流行。正是由于不健康的饮食，宠物不断受到肠漏症、炎症以及退行性疾病的困扰。

商业宠物食品这一产业缺乏行业监管。没有机构负责检查宠物食品健康性的证明，也没有公司对所生产的食品是否可以长期保证宠物的健康投入大量的研究。

不管怎样……

提供一份可以满足所有动物营养需要的自制食谱是非常具有挑战性的。它蕴含诸多方面，包括相关的调研、原料的选择、评估，还有既能满足宠物需求，又符合饲主生活习惯的食谱。

如果营养不均衡，自制食物会比加工食品更加有害。你的宠物很可能会因为缺乏抗氧化剂、矿物质、维他命和脂肪酸这种可以引起大量健康问题的元素而引起营养不良。

市场上可以买到的宠物食品虽然可能含有低劣或者宠物不宜的原料，但是它却可以提供符合AAFCO（美国饲料控制委员会）和FEDIAF（欧洲宠物食品行业协会）标准的均衡的营养。

研究方法

问卷调查

我用Google Forms制作了一份调查问卷，然后在Facebook上的饲主群体中进行了分发。问卷的目的在于找到饲主们在自制饲料过程中所遇到的“痛点”。了解潜在用户的问题可以帮助我们受到启发和激励，从真实数据着手有助于避免猜测和偏见。这些信息帮助我找到了根本问题以及解决方法。

用户访谈节选

“Max是一个非常挑剔的小家伙，我已经把市场上所有能买到的所有牌子都试过一遍了。”

“我喜欢给Daisy做吃的，但我不是总能确定我到底在做什么...”

“我担心自制食物很贵，或者压根就是在浪费时间。”

“我在网上找到的食谱非常大众化，没法满足我的狗狗的特殊需求。”

“最头疼的问题是到底做多少。”

用户画像

问卷调查的结果显示，用户们分为不同的类型，需求也不尽相同。根据这些用户的异同，我创建了三个不同的用户画像，分别归纳了不同类型用户的信息。其中两个较为极端，是根据某些参与者的特殊要求归纳而成的。因此，最终我决定聚焦更典型的用户画像。

关注一个特定的用户画像有助于聚焦这一用户群的需求，当新的特征或者需求出现的时候不会被分散注意力。

用户旅行地图

接下来，我为我的用户画像撰写了一个典型的日常饲养流程，这个环节帮助我确定了应该怎样设计应用中的用户体验流程。

Jobs To Be Done (JTBD)

JTBD表格是我用过的最有效的工具之一。我不再仅仅关注现下所有解决的问题是什么，或者用户想要什么，我会去思考用户为什么需要这个功能。理解这一点有助于设计出真正有用的产品。

用户使用流程图

到现在为止，我对于这个应用要实现的功能已经有了一个模糊的想法。规划应用的基本流程迫使我去思考用户在整个解决方案中所要经历的每一个步骤。我先将流程图画在了纸上，然后在电脑上进行了加工。

草图

这是我对应用进行构想并将它可视化的第一步。

线框图

线框图展现了这个应用的骨架，有一定的指导作用。它可以在我更关注功能而不是表现形式的时候帮助我对视觉元素进行排版。此外，由于线框图十分简洁，可以帮助我快速测试自己的想法，而不至于沉溺于细节。

故事板

我创建了一个故事板来描述这个应用的用户体验，这种方法非常适合探索产品在更广阔的语境下的表现，就好像它是一个庞大故事的一部分一样。通过这种高效又低成本的方式，可以捕捉并探索应用和真实的世界如何产生关联。我创建的这个故事板有助于理解应用实际使用的场景和语境。

视觉研究

灵感板

在开始视觉设计之前，我创建了一个灵感板，用来探索视觉方面的可能性，以及从其它宠物和营养类应用中寻找灵感。

迭代

接下来，我探索了不同设计的可能性：从几个不同版本的设计中，我各学到了一些可以在下一次迭代中使用的东西。

色板

绿色，会让人联想到自然、生命、健康、青春、春天、希望、复兴、成长、休闲和放松。因此，绿色系很适合这种提倡健康和天然宠物饲料的应用。另外，我使用了灰色的字体以及大量的留白来营造一种平缓和安静的氛围。

字体

Nunito Sans是由Vernon Adams和Jacques Le Bailly共同设计的一款Google免费字体。它是一款十分匀称的无衬线字体，很适合用于界面设计。由于简洁是我设计的第一原则；因此，我决定只使用一种字体。

图标和插图

图标和插图是设计中十分重要的组成部分。他们可以传达文字难以表述清楚的概念和想法。此外，它们可以营造出统一的视觉美学，建立起用户的信任，并带给他们愉悦的感受。

命名和商标

我选择Petcy作为应用名称的原因非常实际，是因为我希望名字中包含“pet（宠物）”，但是所有其它的搭配都被注册过了。后缀“cy”的意思是“...的状态”或者“...的条件”。我认为这很符合应用的定位，所以最终选择了“Petcy”这个名字。

我希望logo简单一点，可以映射出使用这个应用是多么简单的一件事。最终版本的logo看起来像是几条线潦草的拼凑在一起，就像用Petcy准备的一顿饭一样。我最开始想让这个logo隐喻健康（听诊器），对宠物的爱（心型），或者宠物本身（猫和狗）。然而最终我决定让它保持简洁，所以我选择将应用的名字做成logo。

微交互和动效

我所做的最后一件事，是探索应该怎样设计应用中的动效，这也有助于我深层次理解应用的流程和功能。

最终设计

新用户流程

在Petcy这个应用中，新用户流程的目的是收集用户宠物的信息，让接下来的内容可以为它们量身定制。其中最重要的环节是让用户回答十个问题，并且不会感到厌烦，离开应用。这个环节需要简单快捷，我选择将问题编号，滑动卡片切换问题，加入进度条等设计来让这一步骤变得更容易操作。

准备餐食

这个功能是应用的核心。在完成新用户流程之后，用户会收到为爱宠量身定制的食谱。每个食谱都将制作流程拆解成了三个简单的步骤，除此之外，用户还可以查看食材列表、讲解视频，以及各项营养指标。

采购食材

为了让整个制作过程更加方便，我决定让用户可以直接采购到所有必须的食材。因此，接下来要做的事情是完成采购流程，包括生成购物清单、选择供应商、比价，以及送货上门。这一流程务必同样简单快捷，才能跟应用的整体原则相匹配。

总结

我学到了什么？

设计这个应用的过程非常具有挑战性，也富于成就感。从一开始我就清楚的意识到，最大的挑战就在于如何让宠物主人对全新的饲养习惯产生兴趣，这意味着他们要摆脱从麻袋里盛出一小碗饲料的喂养方式，亲手制作饲料。我从饮食需求、食谱，家庭自制狗狗饲料的开销几个方面展开了调研。然后通过问卷调查和访谈的方式了解了饲主的需求。最后，我从用户体验和视觉效果两方面入手，设计出了一个具有吸引力的应用。

接下来要做什么？

- 对特殊功能进行更进一步的研究

- 针对原型进行可用性测试

- 优化使用流程

- 一个全面的商业模型

未来的功能

配对选项：用户可以与朋友或其他人拼团，一起购买食材。批量购买将会为用户节省更多的时间和金钱。

最后的思考

宠物食品是一个价值750亿的庞大产业，大量的宠物饲料被加工生产，却并非是宠物最健康的选择，甚至可能会对这些毛茸茸的小家伙产生健康和寿命上的损伤。然而对于我们大多数人的忙碌生活来讲，使用方便的包装食品显然利大于弊。

这个免费手机应用可以帮助用户为他们的爱宠做出更健康的食物，这不仅方便快捷，成本相较于包装饲料来说也很有竞争力。Petcy会基于每一只宠物的日常营养需求，为它们提供个性化的饮食计划，同时也会考虑食物的分量并支持从当地的商店进行采购。

我希望这个应用可以获得宠物饲料生产商或销售商的支持，毕竟为宠物主提供更加健康的饲料是更有责任感的经营选择。

特别鸣谢Sagi Shrieber以及在这个项目上支持和帮助过我的每一个人。