案例研究|重新設(shè)計(jì)WhatsApp

▲ 點(diǎn)擊 " TCC翻譯情報(bào)局 "  關(guān)注 ，回復(fù) " 社群 " 加入我們

本文共 3106  字，預(yù)計(jì)閱讀 8 分鐘 TCC 情報(bào)局的  第 230 篇  干貨分享 2024 年的  第 10 篇

TCC 推薦：大家好，這里是 TCC 翻譯情報(bào)局，我是 李澤慧 。 WhatsApp 是一種廣泛使用的消息應(yīng)用程序。 然而，由于用戶很難使用一些必要功能，有很多用戶不再使用。 作者以及他的團(tuán)隊(duì)發(fā)現(xiàn)其所在問(wèn)題并且思考重新設(shè)計(jì)方案。 來(lái)和作者一起探索整個(gè)設(shè)計(jì)流程，并且學(xué)習(xí)更多的設(shè)計(jì)方法吧！

UI/UX案例研究

1. 介紹 1. Introduction

你好！我叫 Nerissa Arviana Sukmananda，一名 UI/UX 愛(ài)好者。我目前正在參加 由Zenius領(lǐng)導(dǎo)的UI/UX 產(chǎn)品設(shè)計(jì)。我希望這篇文章能夠描述我的團(tuán)隊(duì)和我在解決應(yīng)用程序中的問(wèn)題時(shí)的工作流程。希望你喜歡這個(gè)項(xiàng)目！

2. 背景 2. Background

WhatsApp的標(biāo)志設(shè)計(jì)

3. 關(guān)于WhatsApp 3. About WhatsApp

WhatsApp 是一款用于發(fā)送文本、語(yǔ)音消息、進(jìn)行語(yǔ)音和視頻通話、共享圖片、文檔和其他媒體的應(yīng)用程序。180 多個(gè)國(guó)家/地區(qū)，超過(guò) 20 億人使用 WhatsApp去隨時(shí)隨地與朋友和家人保持聯(lián)系。目前，WhatsApp 在 Google Play 商店的下載量約為 50 億次，評(píng)論量約為 1.72 億條，與同類應(yīng)用程序相比會(huì)更多。

4. 問(wèn)題
4. Problems

WhatsApp 是一種廣泛使用的消息應(yīng)用程序。然而，由于用戶難以使用某些功能，評(píng)級(jí)有所下降。用戶很難固定不能超過(guò) 3 條的消息。然后用戶還必須手動(dòng)搜索消息或輸入關(guān)鍵字。最后，用戶發(fā)現(xiàn)很難將重要消息從 WhatsApp 復(fù)制到其他筆記應(yīng)用程序?？紤]到這些問(wèn)題，我的重點(diǎn)是通過(guò)重新設(shè)計(jì)用戶界面并融入新功能來(lái)改善 WhatsApp 的用戶體驗(yàn)。

5. 目標(biāo) 5. Goals

基于以上問(wèn)題，WhatsApp重新設(shè)計(jì)的目的如下：

• 了解用戶使用 Whatsapp 的需求

• 了解在使用 WhatsApp時(shí)遇到困難的用戶行為

• 了解用戶在使用 WhatsApp時(shí)想要的舒適度

6. 在團(tuán)隊(duì)中的角色

6. Role in the team

在 WhatsApp 重新設(shè)計(jì)過(guò)程中，我與其他 4 名團(tuán)隊(duì)成員合作，他們是：

1. Asif Mahardhika Ramadan

2. Lisa Agustina

3. Siti Latifah

4. Putri Zalsabila.K

在創(chuàng)建設(shè)計(jì)解決方案時(shí)，我們與用戶體驗(yàn)研究人員具有相同的責(zé)任，例如：

• 做用戶研究，

• 生成解決方案概念，

• 執(zhí)行可用性測(cè)試，

不過(guò)，我負(fù)責(zé) UI 設(shè)計(jì)工作，例如創(chuàng)建用戶流程、線框、用戶界面（高保真設(shè)計(jì)）和原型設(shè)計(jì)。之前，每個(gè)團(tuán)隊(duì)成員都是需要自己做UI設(shè)計(jì)工作，但最終我的設(shè)計(jì)被選中。

7. 設(shè)計(jì)過(guò)程

7. Design Process

在這個(gè)項(xiàng)目中，我們使用設(shè)計(jì)思維方法來(lái)解決現(xiàn)有的問(wèn)題。使用這種方法可以幫助我們更好地了解用戶的需求。以下是設(shè)計(jì)思維過(guò)程中采取的步驟：

設(shè)計(jì)想法

1）共情

這個(gè)初始過(guò)程是發(fā)現(xiàn) WhatsApp 問(wèn)題的階段。以下是 WhatsApp 的目標(biāo)用戶：

• WhatsApp 應(yīng)用程序的活躍用戶

• 16-40歲

• 每天使用 WhatsApp 在線時(shí)間超過(guò) 4 小時(shí)

• 經(jīng)常使用WhatsApp發(fā)送消息

探索并了解使用 WhatsApp 時(shí)的用戶體驗(yàn)。此外，收集與用戶在使用 WhatsApp 應(yīng)用程序時(shí)遇到的限制或問(wèn)題相關(guān)的數(shù)據(jù)。收集的數(shù)據(jù)類型是通過(guò)對(duì)受訪者進(jìn)行在線調(diào)查獲得的定性數(shù)據(jù)。

用戶畫(huà)像

2）定義

定義階段是我通過(guò)制作親和圖和用戶旅程圖進(jìn)行觀察，以尋找可以應(yīng)用于產(chǎn)品的機(jī)會(huì)。

從上述結(jié)果中獲得的見(jiàn)解會(huì)使用親和圖進(jìn)行表示。使用親和圖技術(shù)可以幫助我們通過(guò)對(duì)信息進(jìn)行排序和分組來(lái)發(fā)現(xiàn)嵌入的思維模式。

親和圖

親和圖

獲得之前的一些信息后，下一步就是創(chuàng)建用戶旅程地圖模型。用戶旅程地圖是用戶到達(dá)目的地所經(jīng)歷的過(guò)程的可視化。

用戶旅程圖

問(wèn)題定義

根據(jù)親和圖和用戶旅程圖的分析結(jié)果，發(fā)現(xiàn)了用戶面臨的3個(gè)主要問(wèn)題。3個(gè)主要問(wèn)題是：

1. 由于超過(guò) 3 個(gè)無(wú)法固定的聊天信息，用戶難以固定消息。

2. 用戶很難根據(jù)消息的日期找到消息，因此他們必須手動(dòng)搜索或滾動(dòng)消息。

3. 用戶感覺(jué)不舒服并且很難在聊天室中保存筆記。

3)構(gòu)思

在這個(gè)階段，我創(chuàng)建用戶流程、信息架構(gòu)和線框圖。

用戶流程圖

我創(chuàng)建了一個(gè)用戶流程來(lái)描述用戶在按日期搜索消息、創(chuàng)建新筆記和使用固定聊天時(shí)必須完成的旅程。

用戶流程圖

信息架構(gòu)

創(chuàng)建用戶流程后，下一步是創(chuàng)建信息架構(gòu)以使流程更加清晰。

信息構(gòu)造

線框圖

我開(kāi)始創(chuàng)建從低保真度到高保真度設(shè)計(jì)的線框流程。我將概念可視化為線框圖，但準(zhǔn)確性較低。低保真布局是一種可以幫助設(shè)計(jì)者在界面中呈現(xiàn)信息的布局。

線框圖

設(shè)計(jì)系統(tǒng)

在將其開(kāi)發(fā)為 UI 設(shè)計(jì)之前，我首先決定了顏色、版式、圖標(biāo)，并制作了重要的組件，例如按鈕和卡片及其各自的變體。設(shè)計(jì)系統(tǒng)將隨著用戶界面設(shè)計(jì)過(guò)程不斷發(fā)展。

設(shè)計(jì)系統(tǒng)

設(shè)計(jì)系統(tǒng)

設(shè)計(jì)系統(tǒng)

高保真

這是我根據(jù)之前的線框圖創(chuàng)建的高保真圖。

高保真

4）原型圖

在這個(gè)階段，我們將已制作成更具交互性的界面的想法付諸實(shí)踐。目的是了解產(chǎn)品如何按照預(yù)期流程運(yùn)行。

5）測(cè)試

在此階段，我們對(duì) 5 名受訪者進(jìn)行了可用性測(cè)試。我們通過(guò)深度訪談的方式來(lái)探索如何更深入地了解用戶反饋。進(jìn)行此方法是為了評(píng)估按日期搜索消息、做筆記和無(wú)限 固定聊天的新設(shè)計(jì)。

參與者

參與者

總體評(píng)估

總體來(lái)說(shuō)，用戶覺(jué)得新增的功能還是比較方便和實(shí)用的，只是應(yīng)用程序還需要更多的適配。

總體評(píng)估

設(shè)計(jì)反饋

設(shè)計(jì)反饋

設(shè)計(jì)反饋

設(shè)計(jì)反饋

根據(jù)上面的測(cè)試結(jié)果，我必須做出一些改進(jìn)。但由于時(shí)間有限，之后會(huì)進(jìn)行改進(jìn)。

8.結(jié)論

8.Conclusion

在該項(xiàng)目的工作過(guò)程中，可以得出以下結(jié)論：

1. 所有參與者每天都經(jīng)常使用 WhatsApp 應(yīng)用程序發(fā)送消息、撥打電話和發(fā)送文件。

2. 與其他應(yīng)用程序（例如 telegram 和 Twitter）相比使用 WhatsApp 的原因是因?yàn)?WhatsApp 上的功能更加多樣化，并且根據(jù)需要且易于訪問(wèn)。

3. 有用戶表示，根據(jù)日期進(jìn)行消息搜索功能不太重要，因?yàn)槿藗兺ǔ?huì)自動(dòng)忘記聊天的日期。

4. 有一位用戶在做筆記時(shí)不明白底部線路按鈕的意圖和用途。

5. 一般參與者表示，場(chǎng)景1-3 開(kāi)發(fā)的所有功能對(duì)于用戶來(lái)說(shuō)都非常重要和必要。

6. 平均而言，所有參與者都為每個(gè)場(chǎng)景打分，即 6-7 分。

9.最后

9.Closing

這就是這個(gè)項(xiàng)目的結(jié)束。這個(gè) APP 設(shè)計(jì)解決方案離完美還很遠(yuǎn)。在這個(gè)研究過(guò)程中，我從用戶那里學(xué)到了很多東西。感謝團(tuán)隊(duì)的共同努力。對(duì)于讀者，我還要感謝您閱讀我的文章。希望這能讓大家受益。我對(duì)任何反饋都持開(kāi)放態(tài)度。謝謝你！

原文：https://medium.com/@nerissaarvnas30/whatsapp-re-design-ui-ux-case-study-3d44febe25 作者： Nerissa Arviana
譯者：孫淑雅 審核：李澤慧 編輯：陳美辰 本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

往期精選文章：

十個(gè)技巧幫助你設(shè)計(jì)一款在線學(xué)習(xí) APP

這些 色彩心理學(xué)知識(shí)教你如何傳遞信息

案例研究｜康奈爾大學(xué)副業(yè)社區(qū)網(wǎng)站設(shè)計(jì)

Web Vitals —— 谷歌的新一代 Web 性能體驗(yàn)和質(zhì)量指標(biāo)

網(wǎng)頁(yè)設(shè)計(jì)師能從日式美學(xué)中學(xué)到什么？

案例研究｜一款為你帶來(lái)難忘體驗(yàn)的美食 APP

如何制作打動(dòng)面試官的作品集，這里有一份完整的指導(dǎo)手冊(cè)

如何做好用戶體驗(yàn)項(xiàng)目？從一個(gè)好計(jì)劃開(kāi)始

如何建立設(shè)計(jì)系統(tǒng)

如何把握不同層級(jí)用戶的需求：回歸本質(zhì)，打磨信息架構(gòu)

TCC 視野｜2021 年用戶體驗(yàn)設(shè)計(jì)趨勢(shì)分析

- 設(shè)計(jì)師自習(xí)社區(qū) - TCC 情報(bào)局歡迎小伙伴加入，一起交流設(shè)計(jì)知識(shí)，了解全球設(shè)計(jì)資訊，鍛煉英文能力，發(fā)掘更多可能性～
添加小助手微信，備注 「社群」 ，即可加入讀者群。