一套完整設(shè)計(jì)案例,如何在3天內(nèi)設(shè)計(jì)出一款A(yù)PP?
很多人說看過很多設(shè)計(jì)道理卻依然做不好設(shè)計(jì),還不如直接看設(shè)計(jì)案例來的簡單粗暴。今天為大家找到一篇實(shí)戰(zhàn)好文,一個(gè)人,3天時(shí)間,打造一款A(yù)PP全流程設(shè)計(jì),學(xué)起來吧!
幾周前,我接到一個(gè)設(shè)計(jì)需求是為食品行業(yè)設(shè)計(jì)一套解決方案,甲方給出的時(shí)間是必須在3天內(nèi)完成。乍一聽,可能會覺得這幾乎是不可能的,但是如果你熟悉“GV Design Sprint ”(譯者注:GV Design Sprint就是一個(gè)專業(yè)的設(shè)計(jì)流程方案,想了解的朋友請見https://designsprintkit.withgoogle.com/introduction/overview),那么就會明白,這實(shí)際上是可以做到的。
我發(fā)現(xiàn)這是一個(gè)非常好的機(jī)會,可以在這么短的時(shí)間內(nèi)實(shí)踐一套設(shè)計(jì)方法。在這篇文章中,我將逐一向大家分解我的設(shè)計(jì)過程和每天的設(shè)計(jì)進(jìn)展。
項(xiàng)目背景
Common Food是一個(gè)使用社區(qū)支持農(nóng)業(yè)(CSA)出售水果蔬菜的農(nóng)場。人們需要在年初提前預(yù)定農(nóng)場一年的收成,然后在生長季節(jié)里,社區(qū)成員每周都會收到一箱食品。
(譯者注:CSA的運(yùn)作過程通常由認(rèn)同相同理念的社區(qū)支持者(個(gè)人或單位)采用共同購買的模式,預(yù)先支付一筆費(fèi)用給當(dāng)?shù)氐男∞r(nóng)戶預(yù)約一季或一年的收成,農(nóng)民收成后,再根據(jù)實(shí)際產(chǎn)出的多寡分配給會員,如此達(dá)到結(jié)合社區(qū)力量支持在地農(nóng)民采用有機(jī)農(nóng)耕的積極意義?!俣劝倏疲?/p>
設(shè)計(jì)挑戰(zhàn)
設(shè)計(jì)一款應(yīng)用,幫助普通農(nóng)場每周能向會員們賣出更多的農(nóng)副產(chǎn)品。幫助他們個(gè)性化的推薦食品方案,以滿足會員們不同的知識水平,興趣和飲食限制。
第一天:資料收集
1. 研究方法
研究階段往往會占用一些時(shí)間,所以盡可能的利用手頭現(xiàn)有信息是節(jié)省時(shí)間的好辦法。市場環(huán)境二手資料,競爭對手,用戶調(diào)研或者直接去App Store中收集用戶評論,我需要盡早了解清楚用戶的思維模式。
2. 用戶調(diào)研
Common Food 公司會在每個(gè)季度對會員們進(jìn)行回訪,以便能更好的了解他們的喜好,以下是今年的一些反饋:
- “我喜歡烹飪和做罐頭。我可以多買一些西紅柿嗎?”
- “大頭菜我不喜歡吃,我把它都扔掉了,不過生菜確實(shí)很好吃?!?/li>
- “我兒子對花椰菜過敏,所以我們從不吃花椰菜。另外我喜歡吃蒜蓉,但不知道怎么做?!?/li>
- “我希望我能有更多的大頭菜,然后用來做泡菜。”
- “ 我覺得我們應(yīng)該需要更多的CSAs,繼續(xù)擴(kuò)大農(nóng)場的規(guī)模。我現(xiàn)在看到了很多轉(zhuǎn)基因的怪物農(nóng)作物,希望有渠道能及時(shí)發(fā)布最新消息?!?/li>
- “我們能不能弄到更多的甜菜?”
- “我從來沒聽過白菜,它看起來很漂亮,但是我不知道怎么做這道菜?!?/li>
一份來自Field Agent的最新報(bào)告發(fā)現(xiàn),不管是在計(jì)劃內(nèi)還是計(jì)劃外購物的網(wǎng)購者來說,農(nóng)產(chǎn)品都是一個(gè)很受歡迎的類別。65%的受訪消費(fèi)者表示,他們購買的是新鮮農(nóng)產(chǎn)品,與冷凍乳制品并列第一。31%的人說他們一時(shí)沖動(dòng)買了新鮮水果和蔬菜,超過了零食(23%)和糖果(14%)。然而,39%的網(wǎng)購者并不會在網(wǎng)上購買新鮮農(nóng)產(chǎn)品,因?yàn)樗麄兏矚g去菜市場。
3. 市場調(diào)研
市場研究公司Mintel發(fā)現(xiàn):盡管消費(fèi)者越來越多的轉(zhuǎn)向網(wǎng)上購物,但只有十分之一的美國人會通過電商購買新鮮的農(nóng)產(chǎn)品,肉類,家禽和魚類。該研究建議:為了打消消費(fèi)者的顧慮,提高銷售額,零售商應(yīng)該多提倡節(jié)約成本,并提供更全面的產(chǎn)品信息,以建立信任,提升價(jià)值吸引力。
研究表明:亞馬遜的“購物車和收藏”等功能對于忙碌的消費(fèi)者來說也是一個(gè)很有吸引力的點(diǎn),特別是女性(48%)比男性(37%)更有可能在線購買,做好功能體驗(yàn)很重要。
4. 頭腦風(fēng)暴
腦暴出的問題
- 我們?nèi)绾问占脩粜枨髷?shù)據(jù)來減少浪費(fèi)和分配食品?
- 我們?nèi)绾瓮ㄟ^季節(jié)性食物和促銷活動(dòng)來增加銷售業(yè)績?
- 我們?nèi)绾螏椭鷷T根據(jù)他們的飲食偏好發(fā)掘額外的食物需求?
5. 用戶畫像
用戶調(diào)查的結(jié)果提供了足夠的信息來創(chuàng)建用戶畫像,我選擇創(chuàng)建與年齡和性別都無關(guān)的角色,以便能夠?qū)⒏泳劢乖谌绾纹降鹊膶?shí)現(xiàn)用戶目標(biāo)上。
用戶畫像
6. 競品分析
當(dāng)我準(zhǔn)備進(jìn)入草圖階段時(shí),我將會研究在相關(guān)行業(yè)或競爭對手那里類似的問題和解決方案,以確定最佳方案。
(1)盒子大小和內(nèi)容分類
FarmBox Direct和Farm Fresh to you兩款產(chǎn)品分別提供不同的盒子大小和產(chǎn)品選項(xiàng)。(譯者注:為什么會定義盒子大小,這是因?yàn)樗麄兠恐軙l(fā)放給會員的食品是以盒子來計(jì)量的。)
(2)自定義盒子裝的食品種類
FarmFresh to You讓你定制你的盒子,添加或刪除農(nóng)產(chǎn)品和設(shè)置數(shù)量。但你必須充會員才能定制它,與此同時(shí),你也可以為排除項(xiàng)創(chuàng)建項(xiàng)目列表。
FarmFresh to You
(3)真實(shí)的食品照片
Farmstead 允許添加任意數(shù)量的購物清單,你可以添加,刪除和瀏覽,都沒問題之后再來結(jié)賬。Farmstead提供真實(shí)新鮮的產(chǎn)品照片,不像其他競爭對手使用庫存的照片。
7. 方案思考
我的解決方案是設(shè)計(jì)一個(gè)APP,從會員那里收集數(shù)據(jù),比如家庭規(guī)模、飲食偏好等等,讓會員們可以輕松定制季節(jié)性食譜。利用人工智能了解會員的飲食習(xí)慣,提供食譜,飲食建議和運(yùn)營一些有針對性的促銷活動(dòng),取得雙方共贏。
這些數(shù)據(jù)可以幫助我們從會員那里得到反饋,然后就可以知道他們在哪個(gè)季節(jié)可能會重新訂購哪種類型的產(chǎn)品或組合,以及他們實(shí)際上最喜歡什么產(chǎn)品。
第二天:草圖和設(shè)計(jì)
我喜歡在自己感覺“明白了”之后開始畫草圖,我會把自己的想法都畫出來,然后再把自己覺得不好的想法剔除掉,保留自己覺得最好的效果。我會通過繪制用戶旅程地圖來定義用戶任務(wù)和目標(biāo)。
1. 用戶旅程地圖
解決了用戶角色,競品分析和草圖方案,接下來,我就開始為注冊了這些服務(wù)的會員們設(shè)計(jì)流程。一旦他們通過APP首次下單,我們的數(shù)據(jù)庫中就有了用戶的日程安排、發(fā)貨和賬單信息。一旦確認(rèn)了這些流程信息,我就準(zhǔn)備開始畫線框圖。
2. 線框圖
線框圖是APP的骨架,這讓我在開始做視覺設(shè)計(jì)之前,能夠?qū)W⒂陉P(guān)鍵功能、元素和交互。我選擇了高保真線框圖,這樣我只需要在一些色彩,配圖,和圖標(biāo)上進(jìn)一步思考視覺呈現(xiàn)。
3. 風(fēng)格板
在畫好線框圖之后,我會找相同行業(yè)內(nèi)的APP視覺做一個(gè)風(fēng)格板來作為設(shè)計(jì)參考。
4. 配色方案
我選擇了鮮紅色作為主色。鮮艷的顏色會讓人胃口大開,紅色也會引發(fā)購物欲望(促銷、清倉、熱鬧等氛圍)。
5. 字體選擇
6. 圖標(biāo)設(shè)計(jì)
當(dāng)說到圖標(biāo)和節(jié)省時(shí)間這個(gè)話題時(shí),我不建議把它們都畫出來。盡管我很喜歡自己畫圖標(biāo),但是這次時(shí)間上并不允許。我推薦一些圖標(biāo)庫,比如:Material Design icons (https://material.io/tools/icons/),或者我這個(gè)應(yīng)用用到的一個(gè)圖標(biāo)庫The Noun Project (https://thenounproject.com/#)。
在利用這些圖標(biāo)庫時(shí),請注意購買版權(quán),如果不想付費(fèi),也必須注明圖標(biāo)來源,定稿后有時(shí)間再來重新畫。
7. Logo設(shè)計(jì)
我期望這個(gè)APP能有一個(gè)清晰易懂的名字,同時(shí)也希望能有一個(gè)與名字非常匹配的Logo。在思考了很多名字之后,我覺得“FameCrate(農(nóng)場條板箱)”這個(gè)名字非常的適合,通過不斷迭代,優(yōu)化,最終得到了下面這個(gè)Logo。
8. 視覺設(shè)計(jì)
我喜歡嘗試不同的風(fēng)格和設(shè)計(jì)變化,我對第一稿不滿意,因?yàn)槿狈φw上的一致性,然后不斷優(yōu)化,直到最終全局頁面都能做到統(tǒng)一協(xié)調(diào)并符合自己的設(shè)計(jì)預(yù)期為止。
第三天:交互原型
到了第三天,我完成了最后的視覺設(shè)計(jì),便開始做可交互原型。我等到這個(gè)階段才開始做這事,主要是因?yàn)槿绻诰€框階段就開始做原型的話,盡管它們是高保真的(我經(jīng)常這么做),但會花很多時(shí)間在交互界面上。對于這個(gè)項(xiàng)目,我在設(shè)計(jì)完成后再來添加交互動(dòng)作,其實(shí)是為了節(jié)省時(shí)間。
1. 最終設(shè)計(jì)
2. 自動(dòng)動(dòng)畫
我會用Adobe XD的自動(dòng)動(dòng)畫(https://helpx.adobe.com/xd/help/create-prototypes-using-auto-animate.html)功能來做原型設(shè)計(jì),這是節(jié)省交互動(dòng)畫制作時(shí)間的好辦法,而不是在After Effects上花費(fèi)幾個(gè)小時(shí)來做這種效果。
下一步
可用性測試:找一些真實(shí)用戶來做這項(xiàng)測試。我個(gè)人最喜歡用Maze.Design(https://maze.design/)這款工具來記錄測試結(jié)果,它易于使用,并能提供有關(guān)原型的全面數(shù)據(jù)分析。
不斷迭代:通過可用性測試的一些結(jié)論,在設(shè)計(jì)上進(jìn)行迭代,改進(jìn)用戶流程。
總結(jié)
在有限的時(shí)間內(nèi),你絕對不能讓自己分心,必須專注于這個(gè)項(xiàng)目并管理好自己的時(shí)間。我會給自己進(jìn)行計(jì)時(shí),并在每一個(gè)步驟上給自己設(shè)定時(shí)間限制。我試著讓APP用起來盡可能的簡單,從草圖和用戶旅程地圖就要開始思考,最后這一切才能水到渠成。
感悟
永遠(yuǎn)相信你的直覺,不要害怕設(shè)計(jì)修改。如果你把我的線框圖和最終的設(shè)計(jì)效果圖進(jìn)行比較,會發(fā)現(xiàn)我做了很多的選擇來改進(jìn)最終的設(shè)計(jì)。另外,也可以使用你自己熟悉的軟件,或者你自己知道的更快速的方法,而不要太花費(fèi)時(shí)間來確定是不是跟我完全一樣。
原文:https://uxdesign.cc/ux-ui-case-study-designing-a-food-app-in-3-days-1e2856680205
作者:Paola Ascanio
譯者:彩云Sky,公眾號:彩云譯設(shè)計(jì)
本文由 @彩云Sky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
怎么不能顯示完整呢?
非常nice,學(xué)習(xí)學(xué)習(xí)
全鏈路設(shè)計(jì)師呀,厲害 ??
你很優(yōu)秀,很明顯,你搶了好多人飯碗 ?
3天…