很多人說看過很多設計道理卻依然做不好設計，還不如直接看設計案例來的簡單粗暴。今天為大家找到一篇實戰好文，一個人，3天時間，打造一款APP全流程設計，學起來吧！

幾周前，我接到一個設計需求是為食品行業設計一套解決方案，甲方給出的時間是必須在3天內完成。乍一聽，可能會覺得這幾乎是不可能的，但是如果你熟悉“GV Design Sprint ”（譯者注：GV Design Sprint就是一個專業的設計流程方案，想了解的朋友請見https：//designsprintkit。withgoogle。com/introduction/overview），那麼就會明白，這實際上是可以做到的。

我發現這是一個非常好的機會，可以在這麼短的時間內實踐一套設計方法。在這篇文章中，我將逐一向大家分解我的設計過程和每天的設計進展。

專案背景

Common Food是一個使用社群支援農業（CSA）出售水果蔬菜的農場。人們需要在年初提前預定農場一年的收成，然後在生長季節裡，社群成員每週都會收到一箱食品。

（譯者注：CSA的運作過程通常由認同相同理念的社群支持者（個人或單位）採用共同購買的模式，預先支付一筆費用給當地的小農戶預約一季或一年的收成，農民收成後，再根據實際產出的多寡分配給會員，如此達到結合社群力量支援在地農民採用有機農耕的積極意義。——百度百科）

設計挑戰

設計一款應用，幫助普通農場每週能向會員們賣出更多的農副產品。幫助他們個性化的推薦食品方案，以滿足會員們不同的知識水平，興趣和飲食限制。

第一天：資料收集

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 原創釋出於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議