本文以如何優(yōu)化 Campanda 搜索引擎為案例，介紹了調(diào)研的過(guò)程和設(shè)計(jì)的流程，也包含了在項(xiàng)目進(jìn)行過(guò)程中的一些思考總結(jié)，供大家學(xué)習(xí)參考。

我們?cè)O(shè)計(jì)的對(duì)象 Campanda 是一個(gè)專注于為旅行者提供房車租賃服務(wù)的網(wǎng)站。他們提供一個(gè)幫助房車愛(ài)好者與待租車主和供應(yīng)商建立聯(lián)系的平臺(tái)。這次案例的主要內(nèi)容是關(guān)于我們?nèi)绾蝺?yōu)化Campanda 搜索引擎的過(guò)程。

現(xiàn)在有越來(lái)越多的探險(xiǎn)者和旅行者選擇用房車開(kāi)啟他們的冒險(xiǎn)旅程。但如果我是他們，在出發(fā)前一定會(huì)考慮很多的問(wèn)題，好奇房車是什么樣的？有哪些需要注意的地方？自己的駕照能不能開(kāi)房車？

許多用戶下意識(shí)的顧慮正是我們主要挑戰(zhàn)之一。同時(shí)，這次項(xiàng)目的目標(biāo)是對(duì)網(wǎng)站的轉(zhuǎn)化進(jìn)行優(yōu)化。接下來(lái)的案例分析將圍繞 Campanda 迭代搜索功能，涵蓋了調(diào)研和設(shè)計(jì)流程，以及我們?cè)陧?xiàng)目中做出的總結(jié)。讓我們開(kāi)始吧！

一、開(kāi)展UX項(xiàng)目

項(xiàng)目范圍

正因客戶希望我們對(duì)網(wǎng)站的搜索引擎優(yōu)化（SEO）進(jìn)行全面的重新設(shè)計(jì)，我們把關(guān)注點(diǎn)主要集中在對(duì)搜索過(guò)濾器和搜索引擎結(jié)果頁(yè)面（SERP）的優(yōu)化上。由于搜索這一行為構(gòu)成了在網(wǎng)頁(yè)上租車的用戶搜索過(guò)程的核心部分，因此他們認(rèn)為有必要重新構(gòu)思搜索功能并且在 UX Studio 的協(xié)助下對(duì)此做出改進(jìn)。

原始版本的首頁(yè)搜索形式

我們的目標(biāo)

• 首先，我們的目標(biāo)是提升用戶的預(yù)定量/詢問(wèn)量，并且更好地了解用戶
• 在設(shè)計(jì)流程中，客戶從第一天起就堅(jiān)持讓我們嚴(yán)格遵循 Material Design 的指南進(jìn)行設(shè)計(jì)
• 與此同時(shí)我們要牢記如何幫助和指導(dǎo)新用戶完成預(yù)定，并給予適當(dāng)激勵(lì)

UX 團(tuán)隊(duì)

Campanda 的 PO 負(fù)責(zé)帶領(lǐng)團(tuán)隊(duì)，我們與他們的 CTO，產(chǎn)品負(fù)責(zé)人以及一位內(nèi)部設(shè)計(jì)師親密合作?？偟恼f(shuō)來(lái)，這支團(tuán)隊(duì)的準(zhǔn)備非常充足。在深入研究的基礎(chǔ)上，他們還提前整理了所有需要的信息，包括競(jìng)品對(duì)手、KPI、評(píng)估、必要元素、術(shù)語(yǔ)表和鏈接等。此外，他們提出一個(gè)清晰明確的價(jià)值取向，這節(jié)省了不少時(shí)間。萬(wàn)事俱備！可以立刻開(kāi)始了。

挑戰(zhàn)和開(kāi)始

除了這種意識(shí)水平，確認(rèn)用戶的真實(shí)需求是一個(gè)不小的挑戰(zhàn)。用戶測(cè)試和數(shù)量能夠幫我們說(shuō)服客戶并且重塑他們的認(rèn)知。

項(xiàng)目開(kāi)始后的第二周，我們飛去了柏林參加了真正意義上的項(xiàng)目啟動(dòng)會(huì)。在愉快地與團(tuán)隊(duì)見(jiàn)面后，我們和工作伙伴和幾個(gè)大型代理商進(jìn)行了一些很棒的股東訪談。

柏林啟動(dòng)會(huì)上，我們的研究員 Mia

二、UX 研究

UX Studio 此前已經(jīng)積累了一套龐大的用戶調(diào)研工具，也正因如此，我們的客戶在明悉調(diào)研目標(biāo)的情況下仍然允許我們自由選擇合適的工具去做調(diào)研。我們隨后開(kāi)展了利益相關(guān)者訪談、小群體用戶測(cè)試以及卡片分類會(huì)議。

股東訪談

有趣的是，市場(chǎng)營(yíng)銷和客戶支持提出了不同的方法。在這里，我們發(fā)現(xiàn)了一個(gè)我們需要研究的假設(shè)——如果我們需要向客戶顯示供應(yīng)商類型。許多用戶發(fā)現(xiàn)這一點(diǎn)很重要，因?yàn)槠渲幸粋€(gè)角色想要建立個(gè)人聯(lián)系，避免與大機(jī)構(gòu)打交道。雖然支持部門表示支持，但如果用戶不了解供應(yīng)商類型，他們會(huì)預(yù)訂更多。從供應(yīng)商的角度來(lái)看，代理商想要他們的專業(yè)知識(shí)來(lái)表明他們作為大公司的地位。通常，這包括一個(gè)國(guó)際網(wǎng)絡(luò)和一個(gè)安全的保險(xiǎn)系統(tǒng)。我們還有其他明確的問(wèn)題需要測(cè)試。

• 誰(shuí)構(gòu)成了我們的用戶?
• 怎樣建立有效的信息篩選機(jī)制？
• 用戶如何探索我們的網(wǎng)站？
• 我們?cè)鯓硬拍軒椭麄兯阉鞯降谝淮卧儐?wèn)呢？例如，用戶需要查詢什么信息或預(yù)訂房車？

立人物角色

我們的啟動(dòng)會(huì)議通常包含一個(gè)角色研討會(huì)，在那里我們創(chuàng)建假設(shè)的角色。查看本文了解我們的角色模板。因?yàn)槲覀兊目蛻粢呀?jīng)有了，而且我們估計(jì)我們的項(xiàng)目將持續(xù)6周，所以我們沒(méi)有時(shí)間發(fā)現(xiàn)所有的用戶類型。我們可以根據(jù)用戶測(cè)試前的小型訪談來(lái)構(gòu)建一個(gè)角色的特征。

卡片分類會(huì)議的用戶訪談

Mia, UX 研究員旨在識(shí)別用戶需求、重構(gòu)篩選機(jī)制并且為人物角色提供一個(gè)強(qiáng)有力的支撐。前面已經(jīng)提到過(guò)，客戶對(duì)預(yù)期的結(jié)果有一個(gè)清晰的愿景。這對(duì)我們幫助很大，為我們指明了前進(jìn)的道路。用戶測(cè)試證明是有用的，并為我們帶來(lái)了額外的信息。我們和用戶測(cè)試的巨大成功來(lái)自于我們優(yōu)化設(shè)計(jì)和使客戶對(duì)產(chǎn)品產(chǎn)生愿景的能力。發(fā)現(xiàn)的一些問(wèn)題:用戶表示，他們希望看到超出過(guò)濾范圍的額外信息(床的類型、車輛的年齡)。

• 用戶希望看到現(xiàn)有篩選條件以外更多的房車信息（比如車內(nèi)床的類型、車齡等）
• 用戶在第一眼難以找到房車的分類和命名?？ㄆ判驎?huì)讓我們重命名和重新排列，直到用戶清楚地理解它們
• 界面上房車的類別和細(xì)節(jié)位置彼此靠攏

我們還測(cè)試了界面上“旅行類型”的布局。在最初的版本上用戶會(huì)把這一欄誤認(rèn)為是廣告而避免點(diǎn)擊，如果將原來(lái)的圖片素材轉(zhuǎn)換成小圖標(biāo)則可以更好地展現(xiàn)旅游的類型。

搜索頁(yè)面改版前后對(duì)比。在原來(lái)的界面上由于用戶將“旅行類型”誤認(rèn)為是廣告而避免點(diǎn)擊，于是我們將這一欄的分類標(biāo)記做了改變并且加上了更有個(gè)性的圖標(biāo)

在檢查篩選時(shí)，我們要求用戶對(duì)給定的類別進(jìn)行分組。在經(jīng)過(guò)幾次會(huì)議之后，我們已經(jīng)對(duì)理想的過(guò)濾層次結(jié)構(gòu)和組有了一個(gè)清晰的概念。我們還要求他們說(shuō)出每個(gè)組的名字。這讓我們對(duì)用戶將使用的單詞類型進(jìn)行構(gòu)思。它還幫助我們用日常語(yǔ)言而不是專業(yè)術(shù)語(yǔ)來(lái)理解它。

片分類中的一個(gè)結(jié)果

三、設(shè)計(jì)階段

首先，我們按照所需的屏幕大小安排模塊

在 UX studio 中，當(dāng)涉及到為多個(gè)平臺(tái)設(shè)計(jì)時(shí)，通常從桌面屏幕開(kāi)始。這種情況發(fā)生時(shí)，要記住它在較小的移動(dòng)屏幕上會(huì)是什么樣子。在完成并測(cè)試了我們?cè)谧烂娴墓ぷ髦螅覀儗⑽覀兊脑O(shè)計(jì)解釋為移動(dòng)屏幕。

這個(gè)項(xiàng)目意味著與 Campanda designer 的內(nèi)部人員進(jìn)行遠(yuǎn)程合作，而不是將我們的工作按平臺(tái)進(jìn)行劃分。我們同意構(gòu)建特定的模塊元素，這樣就不必彼此等待。相反，我們可以同時(shí)構(gòu)建桌面和移動(dòng)屏幕。

在第一次設(shè)置屏幕布局并在每個(gè)平臺(tái)上放置模塊化元素之后，我們就可以使?jié)L動(dòng)區(qū)域和固定區(qū)域保持一致。由于缺乏時(shí)間，我們沒(méi)有處理平板電腦的UI屏幕?？蛻舳丝梢允褂锰峁┑脑剌p松地組合這些屏幕。

桌面擴(kuò)展過(guò)濾器和日期選擇器

隨后我們用 InVision 做出了高保真模型。在 UI 設(shè)計(jì)上，我們享受 Material Theme 插件的優(yōu)勢(shì)，它基本上生成了所有可能需要的東西，此外，我們有遵循材料布局規(guī)則的每個(gè)元素建立了自己的定制卡。

Material 插件生成的 Material 風(fēng)格的元件

移動(dòng)端界面

四、我們最大的挑戰(zhàn)：信息卡片

在大多數(shù)情況下，最大的挑戰(zhàn)是設(shè)置需要滿足的業(yè)務(wù)目標(biāo)。結(jié)果是，我們想要向用戶顯示太多的信息，而不是那些通常不仔細(xì)閱讀的普通用戶。

命中卡在列表頁(yè)面上顯示單個(gè)搜索結(jié)果。為了呈現(xiàn)個(gè)人報(bào)價(jià)(RVs)，我們?cè)O(shè)計(jì)了一個(gè)帶有可滾動(dòng)部分的卡片。這樣，我們的 hit card 可以以一種直觀清晰的方式顯示大量信息，節(jié)省了我們的空間。

早期階段的信息卡片版本

適用于移動(dòng)端和桌面端的信息卡片

首先是畫(huà)廊。我們?cè)谶@里放置了一個(gè)報(bào)價(jià)標(biāo)志和帶有性能圖標(biāo)的供應(yīng)商圖像。這個(gè)元素還鼓勵(lì)提供者進(jìn)行更多的活動(dòng)，使它們?cè)谂琶猩仙?/p>

您還可以在描述和評(píng)論之間滾動(dòng)。我們添加這些部分，是因?yàn)橛脩粝Ｍ趩螕羝渌魏蔚胤街霸诘谝粋€(gè)頁(yè)面上看到它們?？蛻粝Ｍㄆ袥](méi)有多余的副本。但是如果沒(méi)有 CTA，用戶就會(huì)感到困惑。

可以理解的是，人們?cè)陬A(yù)訂前需要更多的信息。因此，我們使車輛標(biāo)題可點(diǎn)擊，并將其鏈接到詳細(xì)信息頁(yè)面。

記住我們的主要業(yè)務(wù)目標(biāo):轉(zhuǎn)換。我們必須創(chuàng)建一個(gè) CTA 的即時(shí)預(yù)訂卡，以避免用戶在搜索完美的房車時(shí)感到困惑。我們從“現(xiàn)在查詢”和“現(xiàn)在預(yù)訂”開(kāi)始，但是人們想在預(yù)訂/查詢之前先獲得更多的信息。這就是為什么我們把 CTA 的措辭改為“細(xì)節(jié)”。

什么樣的圖標(biāo)適用于“路邊援助”和“不限里程”的服務(wù)呢？在信息卡片的最后，我們讓所有的服務(wù)圖標(biāo)可被點(diǎn)擊，并且加上了解釋的工具提示。此外，用戶能分享和點(diǎn)贊自己喜歡的車輛。

過(guò)濾和快速查詢選項(xiàng)視圖

總結(jié)

這次項(xiàng)目帶給我們很多有趣的發(fā)現(xiàn)和結(jié)論，以下是一些主要的方面：

• 如果你要在 Sketch 上和其他人在同一個(gè)文檔或庫(kù)里工作，可以使用 Box 的同步功能去避免互相擾亂進(jìn)度。無(wú)論如何，請(qǐng)?jiān)谑褂弥按_定首選方法，并進(jìn)行測(cè)試。否則你將陷入和我們相同的境況。要留出足夠的時(shí)間來(lái)完成所有設(shè)置并確保它們正常工作
• 這種理想情況絕對(duì)會(huì)幫你省下時(shí)間：從客戶角度說(shuō)，充分準(zhǔn)備，清晰的目標(biāo)以及合理的預(yù)期。如果你了解用戶體驗(yàn)并且能夠正確運(yùn)用這方面的知識(shí)，我們幾乎可以立即開(kāi)始工作
• 此案例中，進(jìn)行用戶訪談能更好地在第一時(shí)間展示客戶對(duì)業(yè)務(wù)目標(biāo)的需求
• 如果你還沒(méi)有的話，我推薦你在 Sketch 上使用 Material 主題編輯器，它能給你帶來(lái)無(wú)窮樂(lè)趣，并讓你的品牌推廣工作更加輕松

原文作者：Anna Máté

原文地址:https://uxstudioteam.com/ux-blog/ux-case-study-rv-rental/

編譯作者：人南小郭，成都/學(xué)生（微信ID：DennisTLee）

編輯整理：三分設(shè)翻譯特工小組（微信ID：sanfen-design）

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

題圖來(lái)自Unsplash，基于CC0協(xié)議