用一個(gè)虛擬項(xiàng)目案例，幫你掌握設(shè)計(jì)全流程！

我在外網(wǎng)上看到一位名叫 Om Arya 的自由職業(yè) UX 設(shè)計(jì)師，分享了他的一個(gè)線上超市 APP 設(shè)計(jì)案例。雖然這是虛擬項(xiàng)目，但是他的設(shè)計(jì)思考不輸真實(shí)項(xiàng)目，而且最終方案的效果也不錯(cuò)。關(guān)鍵是，他做完這個(gè)項(xiàng)目后，居然有一家東南亞的在線購物公司，真的找他來做項(xiàng)目了！

我們來看看，他這個(gè)虛擬項(xiàng)目是怎么做的。

明確目標(biāo)

由于設(shè)計(jì)師所在的地區(qū)——印度，并沒有在線超市購物習(xí)慣，所以這個(gè)項(xiàng)目的目標(biāo)比較簡單，就是方便用戶用在線購買食物和日用品。

1. 項(xiàng)目目標(biāo)

解決線下購物所遇到的問題

2. 用戶目標(biāo)

安心而有效地進(jìn)行線上購物

3. 商業(yè)目標(biāo)

向人們展示在線購物的好處，并增強(qiáng)辨識(shí)度

目標(biāo)人群定位 18-45 歲之間，有超市購物需求，且具備智能手機(jī)操作能力的人。

用戶訪談

雖然收集數(shù)據(jù)很容易，但這位設(shè)計(jì)師認(rèn)為，只有與潛在用戶直接溝通，才能真正了解他們的需求。

找到五位有孩子的父母進(jìn)行交談，從而達(dá)到非直接訪談的目的。從交談中獲取到了一些大概的信息，可能對(duì)產(chǎn)品設(shè)計(jì)有所幫助：

生活狀況：

• 大家的生活方式、目標(biāo)和場(chǎng)景各不相同。
• 有些人喜歡在業(yè)余時(shí)間購物、交友，有些卻忙于工作或個(gè)人問題。
• 他們經(jīng)常從線下市場(chǎng)購買新鮮蔬果，并且能夠得到常客的特別優(yōu)惠。

面臨問題：

• 缺少購物和挑選蔬果的時(shí)間。
• 購物時(shí)尋找商品很耗時(shí)間。
• 一些家庭主婦沒有在線支付，也很難知道正在出售和即將出售的貨品有哪些。
• 線下購物時(shí)不知道購物車?yán)锷唐返目們r(jià)，也經(jīng)常漏買一些東西。

以下是一些訪談?dòng)涗浀恼?/p>

需求分析

訪談中獲取了各種各樣的信息：

需要一定的整理分析，才能了解潛在用戶的需求。

為了確保客觀性，這位設(shè)計(jì)師使用了「親和圖」的信息分類方式：

接著從這些信息中，整理出以下痛點(diǎn)：

• 如果缺乏經(jīng)驗(yàn)，會(huì)購買到質(zhì)量糟糕的蔬果。
• 大家都忙于生活，購物不是一件輕松的事情。
• 有些人在郊區(qū)，購物還得去一趟市中心。
• 超市不會(huì)將商品和優(yōu)惠信息提前通知給顧客。

于是可以分析出，對(duì)于用戶的痛點(diǎn)，線上超市可以有哪些解決方案：

• 最容易解決的是時(shí)間成本，因?yàn)橛脩艨梢院芊奖愕牡夭檎疑唐罚业却拓洝?/li>
• APP 可以更好地將優(yōu)惠信息告知給用戶，幫中產(chǎn)家庭省錢。
• 蔬果的質(zhì)量會(huì)是一個(gè)重要問題，這個(gè)可以通過公開的評(píng)分和評(píng)論系統(tǒng)解決。
• 在線購物時(shí)，購物車的價(jià)格是十分清晰的。為了避免漏買，用戶還可以將商品保存在心愿單中，方便下次購買。

信息導(dǎo)航

將產(chǎn)品需要的頁面或功能模塊，畫出來，做一個(gè)整體的規(guī)劃：

線框圖

將信息導(dǎo)航中的主要頁面，用紙和筆畫出線框草圖，這樣如果發(fā)現(xiàn)問題可以及時(shí)修改：

低保真原型

完成設(shè)計(jì)構(gòu)思后，設(shè)計(jì)師用 Figma 畫出低保真設(shè)計(jì)稿，并制作出可以用來做用戶測(cè)試的可交互原型：

視覺設(shè)計(jì)

由于這個(gè)產(chǎn)品主打在線購買蔬果，所以選擇代表能量和自然的綠色作為主色調(diào)。

選擇了 Front Page News 作為 LOGO 字體，并在首字母上加了一片葉子增添自然氣息。

用戶測(cè)試

設(shè)計(jì)師直接使用前面的低保真稿做成原型，來進(jìn)行可用性測(cè)試，并找到了一些反饋：

1. 結(jié)賬時(shí)增加送貨地址頁

畫低保真的時(shí)候缺了這個(gè)頁面，用戶測(cè)試時(shí)發(fā)現(xiàn)需要補(bǔ)上。

2. 導(dǎo)航欄需要文字說明

雖然純圖標(biāo)的導(dǎo)航欄看起來會(huì)很簡潔，但是文字說明才能幫助用戶快速理解并學(xué)會(huì)使用。

3. 明確優(yōu)惠信息限制條件

雖然優(yōu)惠信息很吸引人，但誰都清楚這些都有限制條件的。

與其于讓用戶產(chǎn)生懷疑，或者進(jìn)一步嘗試后再失敗放棄，還不如一開始就解釋明白。

高保真方案

在低保真階段，把可用性問題都找出來后，就可以放心做高保真方案，而不用擔(dān)心來回修改了。

高保真原型

這位設(shè)計(jì)師最后還做了一個(gè)可交互的高保真原型，可以用于展示或進(jìn)一步的用戶測(cè)試。

總結(jié)

雖然虛擬項(xiàng)目，完成度也是很不錯(cuò)了。據(jù)說一個(gè)很大的東南亞電商平臺(tái)在看到這個(gè)虛擬項(xiàng)目之后，就真的請(qǐng)他來設(shè)計(jì)產(chǎn)品了！而且他接到的這個(gè)項(xiàng)目，也把設(shè)計(jì)過程分享出來了…

之后會(huì)發(fā)整理出來給大家看看～

歡迎關(guān)注作者的微信公眾號(hào)：「體驗(yàn)進(jìn)階」