用Zara的優化案例，教你學會把「設計思維」運用到實戰過程中！

沒看錯，就是你們熟悉的那個服裝品牌 Zara，這篇文章作者 William Ng 運用了「設計思維 」的模式，分析了 Zara 手機應用的可用性，并提出了改進建議。算是對設計思維的具體案例運用。

Zara 是我最愛的服裝品牌之一。但每次使用他們的軟件，我都感覺有各種問題。所以我做了一個 Zara 的可用性測試與分析，來看看是不是別的用戶也和我一樣有同樣的煩惱。結果我發現了許多用戶痛點，并提出了一些提升用戶體驗的方案。

共情

用戶畫像

第一步，我對 Zara 的用戶進行了在線調查。然后我創建了一組預估的用戶畫像，并包含了假設的最大一組用戶群：20 - 30 歲左右的中產收入工作者。

△ ?工作故事

除了用戶畫像以外，我也花了一些時間了解用戶使用應用的場景，從而更深入探究他們的動機和期待的結果。

可用性測試

對用戶有了一點了解之后，我去商場找了一個逛街的人進行可用性突擊測試。我在給用戶做測試之前，保證了用戶至少是頻繁的在線購物消費者。最終，我測試了七個用戶。

每個用戶都被問到想象自己在一個場景里面，進行以下任務：

• 最近天氣很冷，你在給自己找一件冬大衣，你會怎么做？
• 你看到了一件你可能會喜歡的大衣，可以跟我重現一下你會怎么決定這是不是你要的那件大衣？
• 你把大衣放進了購物車，但發現尺碼錯了，你會怎么做？

定義和分析

親和圖

我瀏覽了所有測試，并仔細地把每個用戶遇到的問題和抱怨都列了出來。接下來，我通過分類把這些痛點進行了分類和歸組。

2 * 2 分析

為了排定這些信息的優先級，我創建了一個 2*2 的圖表，以對商業重要性作為 X 軸，對用戶的重要性作為 Y 軸來排列這些信息。假設最重要的商業模板是增加應用的收入，那么在購物車里編輯條目就成為了對商業和用戶都是最重要的一點。所以這也成為我重新設計的著眼點。

定義問題

我仔細分析了用戶與購物車有關的行為和模式，以便找到更好的解決方案。

當他們試圖在購物車里編輯商品的時候：

• 只有 1/7 的人沒有遇到問題
• 7人中 6 人都點了該商品條目，但只跳出來一個圖片
• 7 人中 4 人選擇了向左滑動商品，卻沒有出現預期的編輯選項
• 7 人中 2 人不小心刪除了他們的商品

其他問題：

• 不能在購物車里直接編輯商品的顏色和尺寸，也就是說用戶必須再瀏覽一遍商品來修改商品信息
• 在購物車里用戶只能看到商品的單張圖片

方案和改造

低保真手繪

在研究了用戶的購物車使用過程中遇到的問題之后，我列出了一些針對痛點的潛在解決方案，并使用手繪的低保真原型來表達。

△ ?高保真原型

在把低保真手繪轉為高保真原型之前，我讓一些在線購物用戶走了一遍我的流程來驗證想法，并收到了一些建設性意見，我把這些意見融入了最終的設計里。

以下是我的一些建議：

新的編輯按鈕替換了舊的「之后再買 」; 但這是個有意的選擇. 最開始，當用戶想把一個商品保存以供以后查看的時候, 他們只能先把商品放進購物車.所以我會在瀏覽頁面加一個「收藏 」功能，這樣用戶想收藏的時候不用先把商品放進購物車。

在購物車頁面添加了垂直的圖片組，這樣用戶可以查看商品的多張圖片。在最開始的用戶測試中，用戶傾向于水平滑動去瀏覽更多的商品圖片。所以，我增加了更多的元素來引導用戶進行正確的操作。

原型

想像一下你已經把商品選好放進了購物車，這時候才發現需要修改尺寸......

試試我做的原型吧。

驗證

我把自己設計的原型拿給七個用戶進行測試，目標也是讓他們在購物車里進行商品尺寸和數量的修改。所有用戶都順利地完成了任務。

作為重新設計的結果，用戶在購物車里修改商品信息的成功率提升了 30%。

總結

通過用戶可用性的突擊測試，我了解到用戶對于修改已放入購物車的商品信息存在很大困難。另外，一般的購物應用都會有的功能（比如查看商品更多圖片或是修改商品尺寸）在 Zara 應用內缺失。我的設計讓用戶可以在結賬的時候更加方便地修改信息。增強用戶體驗意味著減少用戶摩擦，也就意味著帶來銷量上的提升。

感謝閱讀！

歡迎關注譯者的個人專欄：盒子以外，產品設計和科技的深度學習。

「用一個案例教你學東西系列」

1. 智能對象丨《用一個實戰教程，讓你學會智能對象》
2. 直方圖丨《用一個后期教程，幫你學會利用直方圖破解圖像的方法》
3. 圖層樣式丨《做一個實戰教程，讓你學會圖層樣式9大技能》
4. 設計流程丨《用一個實戰案例，幫你認識完整的設計流程》
5. 總監思考方式丨《用一個簡單的體重記錄功能，揭秘UI設計總監的思考過程》
6. 交互思考方式《用一個文本框，讓你學到交互設計師的邏輯思考方法》
7. 交互面試題丨《用一個框架，幫你學會這個最常見的交互面試題》
8. 數據驗證交互丨《用一個實戰案例，幫你學會用數據驗證產品設計》
9. 復雜界面設計丨《用一個實戰案例，教你學會復雜界面的布局設計》
10. 視覺改版方法丨《用一個實戰案例，教你學會視覺改版的方法》
11. 用戶體驗研究丨《用一個實戰案例，帶你從零開始做用戶體驗研究》
12. 設計沖刺法丨《用一個實戰案例，幫你快速學會現在最火的設計沖刺法！》
13. 交互思考方式丨《用一個實戰案例，帶你學習交互設計師的思考方式》
14. 重設計思路丨《用一個實戰案例，幫你學會講述重設計作品的思路》

原文地址：Zara

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com