筆者在文中介紹了做一款寵物產(chǎn)品的設(shè)計(jì)思路、設(shè)計(jì)規(guī)劃以及具體的頁(yè)面設(shè)計(jì)。

一、介紹

幾個(gè)月前，媽媽問(wèn)我要為她心愛(ài)的寵物找到最好的寵物食品品牌。

在線(xiàn)研究使我得出兩個(gè)結(jié)論：

第一，大多數(shù)加工（即品牌）食品對(duì)寵物具有重大的健康風(fēng)險(xiǎn)。

第二，最健康的選擇是均衡的自制飲食。

二、了解挑戰(zhàn)

加工食品對(duì)寵物有害。成分通常包括人類(lèi)食品工業(yè)的廢品或患病動(dòng)物尸體的剩肉。最重要的是，市場(chǎng)上絕大多數(shù)可商購(gòu)的寵物食品都包含化學(xué)藥品，防腐劑，乳化劑，人造色素，增味劑和額外的脂肪，這些食品使食品對(duì)狗和貓更可口，但也較不健康。

自從引入用于寵物的加工食品以來(lái)，狗和貓的退化性健康問(wèn)題大流行已經(jīng)升級(jí)。飲食不良會(huì)導(dǎo)致寵物不斷遭受腸道滲漏綜合征，炎癥和退行性疾病的困擾。

商業(yè)寵物食品行業(yè)面臨的實(shí)質(zhì)性法規(guī)極少。沒(méi)有組織要求寵物食品具有健康要求的證據(jù)，也沒(méi)有公司投資進(jìn)行廣泛的研究來(lái)確定其產(chǎn)品能否長(zhǎng)期保持動(dòng)物健康。

然而…

提供滿(mǎn)足所有動(dòng)物營(yíng)養(yǎng)要求的自制飲食具有挑戰(zhàn)性。它需要適合寵物個(gè)人需要和主人生活方式的研究，成分，測(cè)量方法和配方。

如果不均衡，則自制飲食對(duì)寵物的危害要大于加工食品。您的寵物可能由于缺乏抗氧化劑，礦物質(zhì)，維生素和脂肪酸而導(dǎo)致?tīng)I(yíng)養(yǎng)不良，這可能會(huì)導(dǎo)致一系列健康問(wèn)題。

市售寵物食品的成分可能質(zhì)量低下，甚至可能與物種不符，但必須提供均衡的營(yíng)養(yǎng)以符合AAFCO（美國(guó)飼料控制協(xié)會(huì)）和FEDIAF（歐洲寵物食品工業(yè)聯(lián)合會(huì)）的標(biāo)準(zhǔn)。

三、研究方法

1. 調(diào)查

我使用Google Forms進(jìn)行了一項(xiàng)調(diào)查，并將其分布在Facebook上的多個(gè)寵物主人群體中。目的是確定準(zhǔn)備自制飲食時(shí)寵物主人的基本“痛點(diǎn)”。了解潛在用戶(hù)的問(wèn)題是啟發(fā)和激勵(lì)自己的好方法。處理現(xiàn)實(shí)世界的數(shù)據(jù)是一個(gè)很好的凝視點(diǎn)，有助于避免猜測(cè)和成見(jiàn)。使用此信息可以更好地發(fā)現(xiàn)問(wèn)題的根源以及如何解決它。

2. 直接從用戶(hù)引用

• “馬克斯非常挑剔，我已經(jīng)嘗試了市場(chǎng)上存在的每個(gè)品牌。”
• “我喜歡為雛菊做飯，但我并不總是確定自己知道自己在做什么?！?/li>
• “我擔(dān)心自制食品過(guò)于昂貴和耗時(shí)?！?/li>
• “我在網(wǎng)上找到的飲食與我的狗的特定需求無(wú)關(guān)，因?yàn)樗鼈兲\統(tǒng)了。”
• “最大的麻煩是弄清楚數(shù)量?！?/li>

3. 用戶(hù)

我的調(diào)查結(jié)果表明，有幾種類(lèi)型的用戶(hù)具有不同的需求。來(lái)自用戶(hù)答案的不同見(jiàn)解和常見(jiàn)模式的積累幫助我創(chuàng)建了三個(gè)角色，這些角色是該數(shù)據(jù)在角色中的體現(xiàn)。其中兩個(gè)角色呈現(xiàn)了極端案例，因?yàn)樗鼈兪腔谀承﹨⑴c者的某些需求。因此，最終我專(zhuān)注于更常見(jiàn)的角色。

專(zhuān)注于特定用戶(hù)有助于記住她的需求，并且在出現(xiàn)新功能或需求的想法時(shí)不會(huì)分心。

4. 用戶(hù)旅程

接下來(lái)，我為角色編寫(xiě)了一個(gè)典型的日常喂養(yǎng)程序。這個(gè)過(guò)程幫助我決定了如何設(shè)計(jì)應(yīng)用程序的用戶(hù)體驗(yàn)以適應(yīng)進(jìn)食程序。

四、要做的工作

我使用的最強(qiáng)大的工具之一是JTBD表單。我不問(wèn)自己是什么問(wèn)題或用戶(hù)想要什么，而是問(wèn)自己為什么他們需要它。通過(guò)了解人們?yōu)槭裁磿?huì)想要這個(gè)應(yīng)用程序，它增加了我制作真正有價(jià)值的產(chǎn)品的機(jī)會(huì)。

1. 用戶(hù)流程圖

到現(xiàn)在為止，我對(duì)應(yīng)用程序的運(yùn)行方式仍不清楚。繪制該應(yīng)用程序的基本流程后，我不得不確定用戶(hù)在整個(gè)解決方案中所走的路徑上的每一步。我首先在紙上畫(huà)草圖，然后以數(shù)字方式對(duì)其進(jìn)行渲染。

2. 草圖

這是幫助我概述應(yīng)用程序并直觀地想象它的第一步。

3. 線(xiàn)框

此視覺(jué)指南表示應(yīng)用程序的骨架框架。當(dāng)我專(zhuān)注于功能而不是外觀時(shí)，它幫助我安排了界面元素。此外，線(xiàn)框的簡(jiǎn)單性使我可以快速測(cè)試想法，而不必深入細(xì)節(jié)。

4. 故事板-使用應(yīng)用程序

我創(chuàng)建了一個(gè)情節(jié)提要，描述了用戶(hù)對(duì)應(yīng)用程序的體驗(yàn)。這是一個(gè)很好的工具，可以探討如何在更大的范圍內(nèi)使用產(chǎn)品，就像它是更大的敘述的一部分一樣。這是一種在現(xiàn)實(shí)世界中捕獲，關(guān)聯(lián)和瀏覽應(yīng)用程序的有效且廉價(jià)的方法。我創(chuàng)建了一個(gè)情節(jié)提要，描述了用戶(hù)對(duì)應(yīng)用程序的體驗(yàn)。這項(xiàng)研究有助于了解應(yīng)用程序的使用環(huán)境和使用范圍。

五、視覺(jué)研究

1. 靈感板

在開(kāi)始視覺(jué)設(shè)計(jì)之前，我先創(chuàng)建一個(gè)靈感板。目的是了解視覺(jué)世界，并從其他寵物和營(yíng)養(yǎng)應(yīng)用程序中收集靈感。

2. 迭代

接下來(lái)，我探索了不同的設(shè)計(jì)可能性：從每次重復(fù)設(shè)計(jì)中，我學(xué)到了一些可用于下一次迭代的知識(shí)。

3. 調(diào)色板

綠色代表自然，生命，健康，青春，春天，希望，更新，成長(zhǎng)，休息和放松。因此，綠色調(diào)色板適合推廣健康和天然寵物食品的應(yīng)用程序。此外，我在文本上使用了灰色，并加入了大量的白色，以使文本顯得平靜而整潔。

4. 版式

Nunito Sans是由Vernon Adams和Jacques Le Bailly設(shè)計(jì)的免費(fèi)Google字體。這是一個(gè)平衡良好的無(wú)襯線(xiàn)字體超家族，似乎可以補(bǔ)充界面。樸素是領(lǐng)導(dǎo)的口頭禪。因此，我決定只使用一個(gè)字體家族。

5. 圖標(biāo)和插圖

插圖和圖標(biāo)是設(shè)計(jì)的重要組成部分。他們傳達(dá)的想法和概念不應(yīng)該，有時(shí)也不能用文字傳達(dá)。此外，它們還可以使視覺(jué)美學(xué)保持一致，從而有助于建立用戶(hù)的信任并產(chǎn)生歡樂(lè)時(shí)刻。

6. 命名和商標(biāo)

選擇Petcy這個(gè)名字的主要原因是實(shí)用的。我想在名稱(chēng)中使用“寵物”一詞，但其他所有組合都已被使用。后綴“ cy”表示“狀態(tài)或條件”。我覺(jué)得這符合應(yīng)用程序的愿景，因此我選擇了Petcy。

我希望徽標(biāo)很簡(jiǎn)單，以反映使用該應(yīng)用程序的輕松程度?；諛?biāo)看起來(lái)像是亂七八糟的東西，很快就用很少的線(xiàn)條組合在一起，就像用Petcy準(zhǔn)備的一餐飯一樣。我最初希望它還表示健康（聽(tīng)診器），對(duì)寵物的愛(ài)（心臟）和寵物本身（貓和狗）。但是，最終我決定保持簡(jiǎn)潔更為重要，因此我選擇了一個(gè)僅是名稱(chēng)的徽標(biāo)。

手繪圖/數(shù)字渲染

7. 微互動(dòng)和動(dòng)畫(huà)

我要做的最后一件事是探索如何在應(yīng)用程序中實(shí)現(xiàn)運(yùn)動(dòng)，從而幫助我在最深層次上掌握應(yīng)用程序的流程和功能。

六、最終設(shè)計(jì)

1. 入職流程

Petcy中的入職流程的目標(biāo)是收集有關(guān)用戶(hù)寵物的信息，以使其真正適合其需求。關(guān)鍵是要讓用戶(hù)回答十個(gè)問(wèn)題而不會(huì)灰心，并關(guān)閉應(yīng)用程序。它需要一個(gè)簡(jiǎn)單而快速的過(guò)程。為問(wèn)題編號(hào)，大的滑動(dòng)卡和進(jìn)度條是我用來(lái)簡(jiǎn)化流程的一些解決方案。

2. 準(zhǔn)備一頓飯

此元素是應(yīng)用程序的核心。入職后，用戶(hù)會(huì)收到適合其寵物需求的食譜。查看食譜時(shí)，可以看到配料表，三個(gè)簡(jiǎn)單的步驟來(lái)說(shuō)明如何準(zhǔn)備餐點(diǎn)，操作視頻和該餐點(diǎn)的營(yíng)養(yǎng)價(jià)值細(xì)分。

3. 獲取成分

為了提供更多便利，我決定為用戶(hù)提供一種獲取所有必需成分的選項(xiàng)。因此，下一個(gè)挑戰(zhàn)是創(chuàng)建一個(gè)流程，該流程包括購(gòu)物清單，挑選供應(yīng)商，比較價(jià)格并將其交付給他們的前門(mén)。此過(guò)程應(yīng)簡(jiǎn)單快捷，以使其與應(yīng)用程序的簡(jiǎn)單界面保持一致。

七、結(jié)論

1. 我學(xué)到了什么？

設(shè)計(jì)應(yīng)用程序是一個(gè)充滿(mǎn)挑戰(zhàn)和收獲的旅程。從一開(kāi)始就很明顯，主要挑戰(zhàn)將是使寵物主人對(duì)與這種習(xí)慣相抗衡的東西產(chǎn)生興趣，并使其易于將一杯干粗磨食物從麻袋轉(zhuǎn)移到寵物的食物容器中。我研究了自制狗糧的飲食需求，食譜和成本。通過(guò)調(diào)查和對(duì)話(huà)，我了解了用戶(hù)的需求。最終，我面臨著從用戶(hù)體驗(yàn)角度和視覺(jué)角度創(chuàng)建引人入勝的應(yīng)用程序的挑戰(zhàn)。

2. 什么是下一個(gè)步驟？

對(duì)特定功能的深入研究

與用戶(hù)一起進(jìn)行原型的可用性測(cè)試

改善用戶(hù)流量

全面的商業(yè)模式

3. 未來(lái)功能

配對(duì)選項(xiàng)：與朋友和其他用戶(hù)配對(duì)購(gòu)買(mǎi)大量配料，以節(jié)省金錢(qián)和時(shí)間。

八、最后的想法

寵物食品是一個(gè)價(jià)值750億美元的行業(yè)，其生產(chǎn)的食品基本上不是狗和貓最健康的飲食選擇，甚至可能損害我們毛茸茸的朋友的健康和長(zhǎng)壽。但是，在我們大多數(shù)人忙碌的日常生活中，使用干食品的便利無(wú)疑是取勝的。

這個(gè)免費(fèi)的移動(dòng)應(yīng)用程序的目標(biāo)是使用戶(hù)能夠以與優(yōu)質(zhì)包裝食品相當(dāng)?shù)某杀?，快速輕松地為自己的寵愛(ài)的寵物制作更健康的食品。Petcy旨在幫助寵物主人為毛茸茸的朋友準(zhǔn)備自制食物。該應(yīng)用程序根據(jù)每個(gè)寵物的營(yíng)養(yǎng)需求提供每日喂養(yǎng)計(jì)劃。該應(yīng)用程序還可以量身定制食物數(shù)量，并可以從本地商店運(yùn)送產(chǎn)品。

我希望這個(gè)應(yīng)用程序?qū)⒌玫綄櫸锸称飞a(chǎn)商或市場(chǎng)商的支持，并理解為寵物主人提供更多，更健康的選擇是社交，善意和貓科動(dòng)物，是一種更負(fù)責(zé)任的經(jīng)營(yíng)方式。

感謝您的閱讀

作者： Guy Shomron來(lái)源：https://uxdesign.cc/ui-ux-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app-d635b911b648

譯者： CANAAN；譯者公眾號(hào)：南設(shè)（ID：shemenglianmeng）

本文由 @CANAAN 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議