導(dǎo)語：我們所接觸的事物都由不同顆粒的更小物質(zhì)組成，所有細(xì)節(jié)總和構(gòu)成了所看的樣子。作者運(yùn)用斯坦福設(shè)計(jì)思維中常用的 UX 設(shè)計(jì)方法，通過對(duì) Spotify 社交功能的設(shè)計(jì)分析，向我們展示了設(shè)計(jì)語境、衡量標(biāo)準(zhǔn)、理解用戶在用戶研究及優(yōu)化迭代方面的重要意義。

文章從用戶調(diào)研、設(shè)計(jì)策略、原型設(shè)計(jì)、可視化設(shè)計(jì)、可用性測(cè)試和品牌推廣等方面闡述了項(xiàng)目流程，揭示了新功能從無到有的全過程，并運(yùn)用大量的設(shè)計(jì)工具及研究方法，產(chǎn)出了細(xì)致精美的分析圖表。

最后，作者抽絲剝繭，對(duì)自身收獲和成長進(jìn)行了復(fù)盤總結(jié)，強(qiáng)調(diào)了組件化對(duì)于設(shè)計(jì)成本和設(shè)計(jì)師的價(jià)值所在。

一個(gè)全新的 Spotify

一、一石二鳥

還記得自己在各個(gè) APP 之間不斷切換嗎？

例如在多個(gè)社交媒體上分享歌曲或內(nèi)容；同時(shí)打開多個(gè)應(yīng)用查詢信息；從未得到過偶像的回復(fù)，卻依舊熱衷于評(píng)論和打榜；通過社交軟件尋找興趣相同的音樂好友……所有這些除了加載等候，還需要冗長的操作流程，我們?cè)诨ヂ?lián)網(wǎng)上投入如此多的精力，到底是為了什么呢？

試想，你可以在一款產(chǎn)品上完成這些事，不必多平臺(tái)切換，會(huì)是怎樣的體驗(yàn)？如果可以一邊聽音樂一邊做這些所有的事情，不必來回切換，會(huì)是怎樣的體驗(yàn)？如果為 Spotify 提供社交功能來提升產(chǎn)品體驗(yàn)，會(huì)是怎樣的效果呢？

以下是我在 Purwadhika Startup & Coding School 設(shè)計(jì)課程中，為 Spotify 創(chuàng)建的社交功能的項(xiàng)目流程。希望通過提供多樣化的音樂服務(wù)，滿足全球大多數(shù)用戶的需求。

1. 設(shè)計(jì)背景及目標(biāo)

Spotify 作為流媒體音樂行業(yè)的領(lǐng)跑者之一，試圖通過延伸社交能力來提升產(chǎn)品的參與度和留存率。

產(chǎn)品已經(jīng)建立了一些核心功能，例如關(guān)注藝術(shù)家或朋友、宣傳音樂活動(dòng)等基本社交活動(dòng)，但除此之外，Spotify 還有很多事情可以做。我們的任務(wù)是制定一個(gè)最佳方案，確保新功能可以無縫銜接到 APP 中。

2. 分工及時(shí)間規(guī)劃

用戶界面及體驗(yàn)設(shè)計(jì)師需要在精益用戶體驗(yàn)框架（within a Lean UX framework）內(nèi)，完成用戶調(diào)研、設(shè)計(jì)策略、原型設(shè)計(jì)、可視化設(shè)計(jì)、可用性測(cè)試和品牌推廣等工作，最后一個(gè)環(huán)節(jié)，預(yù)計(jì)在 4 周內(nèi)完成。

3. 我的設(shè)計(jì)流程

設(shè)計(jì)思維流程圖

二、理解用戶

在這個(gè)階段，我的目標(biāo)是充分理解整個(gè)業(yè)務(wù)，并了解 Spotify 的用戶群體，與目標(biāo)群體產(chǎn)生共情，從而理解用戶需求。為了實(shí)現(xiàn)這一目標(biāo)，我先后進(jìn)行了競(jìng)品分析、啟發(fā)式評(píng)估、用戶體驗(yàn)研究等作業(yè)。

1. 競(jìng)品分析

首先，我對(duì)二手資料進(jìn)行了快速研究，花費(fèi)幾個(gè)小時(shí)來了解 Spotify 在流媒體音樂中的定位，并收集了足夠的信息來幫助確定我的研究重點(diǎn)和范圍，我收集了競(jìng)爭(zhēng)對(duì)手的信息并分析了優(yōu)劣勢(shì)，以幫助 Spotify 通過新的社交功能實(shí)現(xiàn)差異化，從而找到了讓 Spotify 的社交功能脫穎而出的機(jī)會(huì)。

競(jìng)品分析（2020）

2. 啟發(fā)式評(píng)估

在進(jìn)行了競(jìng)品分析后，我想通過執(zhí)行啟發(fā)式評(píng)估來熟悉 Spotify。

即使我對(duì)移動(dòng)端 APP 非常熟悉，但我認(rèn)為在設(shè)計(jì)新功能之前，首先要建立結(jié)構(gòu)性認(rèn)知。啟發(fā)式評(píng)估是一個(gè)很有效的應(yīng)用走查方法，可以用來評(píng)定 Spotify 的可用性，深入了解產(chǎn)品框架、結(jié)構(gòu)和內(nèi)容。

Spotify 應(yīng)用程序走查分析（2020）

3. 用戶體驗(yàn)研究

在熟悉產(chǎn)品結(jié)構(gòu)之后，我進(jìn)一步挖掘了 Spotify 的用戶需求，這有助于為后續(xù)設(shè)計(jì)注入真實(shí)的聲音，從而為用戶提供最佳的解決方案。

1）研究方法

研究采用 定量 和 定性 兩種方式。定量作為初步研究，采用在線方式，目的是獲得用戶行為及模式的量化數(shù)據(jù)。這些數(shù)據(jù)可以幫助我們識(shí)別 Spotify 用戶群體存在的某種現(xiàn)象，以更具體的方式推動(dòng)研究。

然而，僅依靠定量數(shù)據(jù)并不能揭示用戶更深層次的見解，我們還需要借助定性研究，通過 1v1 的用戶訪談，進(jìn)一步挖掘用戶行為的動(dòng)因。

2）用戶訪談

為了確保研究順利進(jìn)行，我創(chuàng)建了一個(gè) 開放式訪談指南，來驗(yàn)證設(shè)計(jì)是否達(dá)成初始目標(biāo)。了解受訪者聽音樂、內(nèi)容分享、社交互動(dòng)的使用習(xí)慣，以及他們是如何收集信息的。

3）招募要求

為了獲得更全面的用戶信息，這次訪談需要涵蓋 Spotify 中藝術(shù)家和非藝術(shù)家群體。同時(shí)，我借助了人口統(tǒng)計(jì)學(xué)的方法，收集了更多來自普通用戶的聲音。此外，還需要對(duì)比其他社交媒體，了解 Spotify 的用戶在其他平臺(tái)上的社交行為。

基于這些假設(shè)，招募的受訪者需符合以下特征：

• 藝術(shù)家 2 名 / 播客 2 名 / 非藝術(shù)家用戶 4 名
• 22 – 34 歲的用戶
• 每天在 Spotify 上花費(fèi) 2 小時(shí)以上的用戶
• 每天在社交媒體上花費(fèi) 2 小時(shí)以上的用戶

4. 研究綜述

根據(jù)用戶訪談內(nèi)容，我整理了一份文檔，將陳述和觀察到的信息組織在便簽上，歸類相似信息，再定義各自的主題，以便發(fā)現(xiàn)和確定用戶需求。其中包含了一些重復(fù)的答案，描述了用戶如何思考、感受、表達(dá)和傾聽。

用戶訪談?wù)?/p>

5. 用戶洞察

• 隨機(jī)調(diào)研 Spotify 用戶創(chuàng)建的歌單，發(fā)現(xiàn)大家音樂喜好相似；
• 協(xié)作共享播放列表通常用作歌曲參考或純分享；
• 分享歌曲或播客是一種自我意識(shí)的表達(dá)；
• 用戶傾向于在 Spotify 上尋找志同道合的人進(jìn)行交流和分享；
• 藝術(shù)家和粉絲之間的互動(dòng)深入且有趣，尤其是現(xiàn)場(chǎng)問答環(huán)節(jié)。

6. 用戶需求

• 用戶需要一種有效的方式找到志趣相投的人；
• 藝術(shù)家需要一個(gè)和粉絲親密互動(dòng)的空間；
• 用戶需要一個(gè)分享和接收信息的空間。

7. 創(chuàng)建人物畫像

為了創(chuàng)建更準(zhǔn)確的人物畫像，我重新審視了訪談中有關(guān)用戶看法、需求和痛點(diǎn)的內(nèi)容 —— 這些代表了關(guān)鍵用戶群體的核心需求。最后，從人物背景、特點(diǎn)、需求、痛點(diǎn)、常用功能等方面進(jìn)行了人物刻畫。

三、定義問題

1. 定義問題

人物畫像建立后，我試著 將用戶的見解和需求轉(zhuǎn)化為明確的觀點(diǎn)陳述（POV：Point of View Statements），嘗試回答 “我們?nèi)绾巫觥保℉MW：How Might We Questions）。通過定義設(shè)計(jì)挑戰(zhàn)和設(shè)計(jì)問題，為一系列創(chuàng)新方案鋪平了道路。

2. 理解業(yè)務(wù)與用戶目標(biāo)

在尋找解決方案之前，需要確定業(yè)務(wù)目標(biāo)和用戶目標(biāo)的優(yōu)先級(jí)。通過對(duì)業(yè)務(wù)目標(biāo)、用戶目標(biāo)和技術(shù)因素的拆解，將三個(gè)維度的重疊區(qū)域設(shè)定為項(xiàng)目目標(biāo)。

3. 定義功能并確定優(yōu)先級(jí)

基于業(yè)務(wù)目標(biāo)和用戶目標(biāo)，以及頭腦風(fēng)暴提出的想法，確定了哪些構(gòu)想可以進(jìn)一步發(fā)展為社交功能。

Spotify 論壇希望為 用戶提供一個(gè)隨意且親密的交流空間，以問答發(fā)帖的形式進(jìn)行互動(dòng)。在這里，允許用戶尋找趣味相同的人，更深層次地連接藝術(shù)家和粉絲，通過激發(fā)他們的社交驅(qū)動(dòng)力，從而提升產(chǎn)品的參與度和留存率。

4. 信息架構(gòu)

之后，我搭建了 Spotify 的信息架構(gòu)，展示了新功能與當(dāng)前架構(gòu)的融合方式。

四、繪制原型

1. 繪制流程圖

新功能融入產(chǎn)品體系后，我開始 梳理產(chǎn)品的任務(wù)流，用來描述用戶需要經(jīng)過哪些步驟來完成關(guān)鍵任務(wù)。

接下來，我需要對(duì)任務(wù)流進(jìn)行詳細(xì)的說明，梳理出與新功能交互時(shí)可能存在的所有必要關(guān)鍵點(diǎn)。我通過兩個(gè)場(chǎng)景假設(shè)（粉絲交流 & 成員問答）創(chuàng)建用戶流程圖，展示用戶與新功能交互的兩條路徑。

2. 低保真原型圖

在繪制了一系列低保真原型圖后，我輸出了第一個(gè)高保真原型圖，可以用于第一次可用性測(cè)試。

社交信息流 / 詢問卡片 / 收件箱 / 回答頁

五、測(cè)試階段

1. 可用性測(cè)試

該測(cè)試的目的是 對(duì)功能可用性、接口設(shè)計(jì)、信息流及信息架構(gòu)進(jìn)行評(píng)估。為了確保測(cè)試結(jié)果的穩(wěn)定，我設(shè)置了適度和非適度兩種測(cè)試場(chǎng)景，分兩期進(jìn)行，共 46 名參與者。

適度可用性測(cè)試 –主持人將直接與測(cè)試參與者合作，指導(dǎo)他們完成研究，如果參與者在完成任務(wù)時(shí)遇到任何挑戰(zhàn)，主持人會(huì)幫助指導(dǎo)回答問題。適度可用性測(cè)試中研究人員可以遠(yuǎn)程或親自進(jìn)行。

非適度可用性測(cè)試 — 它 沒有受到監(jiān)控或指導(dǎo)，因此在研究期間除了參與者外，沒有其他人在場(chǎng)。參與者按照自己的節(jié)奏、時(shí)間、地點(diǎn)完成任何任務(wù)并回答問題。

由于新冠疫情的大規(guī)模爆發(fā)，測(cè)試選擇線上開展。

非適度可用性測(cè)試將在 Maze 網(wǎng)站進(jìn)行；而適度可用性測(cè)試由管理者主持在線會(huì)議，向參與者提供一系列任務(wù)和問題，然后記錄下他們的導(dǎo)航選擇、測(cè)試完成率、評(píng)論、總體滿意度、問題和反饋。

每個(gè)非適度可用性測(cè)試大約需要兩天，適度可用性測(cè)試則需要花費(fèi)參與者 1 個(gè)小時(shí)左右。

總的來說，通過可用性測(cè)試的會(huì)議可以驗(yàn)證某項(xiàng)功能的目的和意義，以便參與者可以很快理解并使用。根據(jù)會(huì)議中出現(xiàn)的幾個(gè)關(guān)鍵問題，將成功、模式、評(píng)論、收獲四個(gè)內(nèi)容，劃分為觀察/反饋、用戶洞察、建議三個(gè)維度。

2. 關(guān)鍵反饋

盡管測(cè)試存在許多問題，但也 收獲了關(guān)鍵的正向信息。或許是因?yàn)槿蝿?wù)流足夠簡(jiǎn)捷，用戶能夠快速獲得信息，幾乎所有的參與者都認(rèn)為產(chǎn)品非常容易使用。

有趣的是，一些正面評(píng)價(jià)與負(fù)面評(píng)價(jià)出現(xiàn)了重疊，雖然看似可以達(dá)成某種平衡，但事實(shí)并非如此。這些現(xiàn)象恰恰 指出了該功能的作用需要更加明確，盡管其概念已經(jīng)存在，但仍然需要被更好的執(zhí)行。

六、重新繪制

1. 迭代改變了什么？

根據(jù)第一次測(cè)試結(jié)果，我做了重要的優(yōu)化設(shè)計(jì)，并再次邀請(qǐng) 5 名受訪者參與測(cè)試。受訪者都認(rèn)為與先前版本有很大不同，并表示這是一個(gè)正向的變化：功能更加清晰；整體的隱私性提升；任務(wù)流程也更加順暢。

1）社交信息流

• 修改前：信息層級(jí)不清晰；視覺壓抑；藝術(shù)家個(gè)人論壇層級(jí)較深且不明確；
• 修改后：功能融合算法推薦；提供清晰導(dǎo)航介紹；突出論壇入口，更容易找到志趣相投的人；弱化交流空間；提供更多的交流機(jī)會(huì)；輕松訪問個(gè)人主頁；簡(jiǎn)化論壇的驗(yàn)證流程。

社交動(dòng)態(tài)的迭代

2）詢問卡

• 修改前：詢問流程不清晰；用戶對(duì)向誰詢問以及選擇的原因感到困惑；按鈕功能不清晰；
• 修改后：用戶清楚向誰提問；更好的對(duì)比問詢對(duì)象；按鈕的功能指向性更明確。

重復(fù)詢問卡片

3）收件箱

• 修改前 — 與社交信息流布局太相似；不支持內(nèi)容篩選。
• 修改后 –布局優(yōu)化；更新入口和信息層級(jí)；支持關(guān)鍵詞搜索以及問題排序。

收件箱頁面的迭代

2. 品牌識(shí)別

遵循 Spotify 品牌設(shè)計(jì)原則，在現(xiàn)有色板、字體、圖形的基礎(chǔ)上，我創(chuàng)建了視覺規(guī)范文檔（這也是設(shè)計(jì)靈感收集的方式），其中包含 Spotify 論壇迭代后的設(shè)計(jì)元素?；陧?xiàng)目背景和用戶調(diào)研，我首先定義了品牌調(diào)性。

3. 更新低保真原型圖

在考慮了一些建議后，我將優(yōu)先級(jí)更高的問題分離出來，重新繪制了低保真原型圖，并用相關(guān)軟件渲染出高保真原型圖。其中社交頁、收件箱、詢問卡、答疑流程是優(yōu)化的重點(diǎn)。

七、總結(jié)

1. 語境限制

在 Spotify 項(xiàng)目中，我成長了很多，最重要的是培養(yǎng)了自信心：相信這是一個(gè)合適的解決方案。根據(jù)項(xiàng)目的設(shè)計(jì)語境，優(yōu)先考慮哪些是必要的，哪些是多余的，并以此設(shè)定目標(biāo)。這些都促使我不斷評(píng)估自己的期望，努力去創(chuàng)造一個(gè)允許所有因素存在的體驗(yàn)，并且堅(jiān)信它是 “值得的”。

另外，設(shè)定一個(gè)預(yù)期成果，有助于我們審視設(shè)計(jì)過程以及有計(jì)劃的規(guī)劃時(shí)間節(jié)點(diǎn)，使自己變得更加靈活且具備項(xiàng)目管理意識(shí)。所以，我始終堅(jiān)信，實(shí)際項(xiàng)目的限定語境，能夠幫助我們根據(jù)實(shí)際情況明確關(guān)鍵的設(shè)計(jì)要點(diǎn)。

2. 明確衡量標(biāo)準(zhǔn)

另一個(gè)收獲是，定義清晰的衡量標(biāo)準(zhǔn)。這有助于更好地分析研究結(jié)果，找到最佳的前進(jìn)方向。無論是共情分析，還是可用性測(cè)試，指標(biāo)都是推動(dòng)優(yōu)化的關(guān)鍵，同時(shí)有助于我們關(guān)注更重要的東西。

3. 多維視角（共情力）

通常在穿越馬路前，我們需要看下路的每一邊，這一點(diǎn)也適用于設(shè)計(jì)流程。在設(shè)計(jì)一款產(chǎn)品時(shí)，會(huì)有多方參與共創(chuàng)，當(dāng)然也會(huì)產(chǎn)生多種 “應(yīng)該被滿足” 的需求。

在 Spotify 項(xiàng)目中，我切實(shí)體會(huì)到了共情力在設(shè)計(jì)中的意義，設(shè)計(jì)師不僅要從用戶的角度進(jìn)行思考，理解業(yè)務(wù)同樣是找到最佳方案的關(guān)鍵。

4. 冰山一角

設(shè)計(jì)過程高于設(shè)計(jì)內(nèi)容。設(shè)計(jì)師的價(jià)值不僅在于圖稿的輸出，美學(xué)只是冰山一角，更重要是的思考、組織以及共情力，為產(chǎn)品找到最佳的戰(zhàn)略方向和解決方案，這才是令人興奮的時(shí)刻。

八、反思

1. “完美” 參數(shù)

研究過程中，我們需要提供準(zhǔn)確的平均值，識(shí)別那些引起數(shù)據(jù)偏離的異常值，并設(shè)定一個(gè)較小的誤差范圍。為了做到這一點(diǎn)，我們需要更大的樣本量，來假設(shè)那個(gè)更準(zhǔn)確或更具代表性的結(jié)果。

這也是該項(xiàng)目中可以被優(yōu)化的部分。盡管有時(shí)情況并非如此，大量的樣本只會(huì)增加更多成本，并沒有改善結(jié)果，但我相信，找到樣本量與成本的平衡點(diǎn)，是共情設(shè)計(jì)的關(guān)鍵環(huán)節(jié)。

2. 所有細(xì)節(jié)的總和

人類由細(xì)胞構(gòu)成，細(xì)胞則是由更小的事物組成，更小的事物中還存在更細(xì)微的成分。數(shù)字產(chǎn)品亦是這樣，不同顆粒和層級(jí)構(gòu)成了我們最終看到的東西。

通過本次 Spotify 的項(xiàng)目，讓我認(rèn)識(shí)到了組件的重要性，它們不僅決定了設(shè)計(jì)的一致性，還可以減少迭代成本，使設(shè)計(jì)過程變得簡(jiǎn)單、高效。這也是我成為優(yōu)秀設(shè)計(jì)師的必備技能，希望在未來的工作中，能夠?qū)⒆⒁饬Ψ旁诟匾牟糠帧?/p>

作者作者：Faisal R Wargadinata

原文鏈接：https://uxplanet.org/unleashing-spotifys-social-capabilities-a-ui-ix-case-study-2ac44ed012cc

譯者：張小璽；審核：徐曼鷺、張聿彤；編輯：徐小淇

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自?Unsplash，基于 CC0 協(xié)議