虛擬校園產品的用戶體驗升級

3 評論 3547 瀏覽 22 收藏 29 分鐘

編輯導語:針對不同的用戶人群和使用場景,設計師需要作出對應考量,以提升用戶體驗,更好地契合用戶需求。本篇文章里,作者就對如何提升虛擬校園產品的用戶體驗案例做了分析解讀,一起來看看吧。

一個關于我如何讓大學生的虛擬校園生活體驗更有趣、真實的小故事。

免責聲明:這是由 Hallparty 提供的畢業設計個人項目。

虛擬校園產品的用戶體驗升級

一、Hallparty 是什么?

盡管大學時光有限,但校園的社交媒體平臺仍蓬勃發展。前所未有的疫情導致了社交媒體轉向虛擬互動模式。

像以往的其他大學社交媒體應用程序一樣,Hallparty 匯集了 Facebook、Instagram 和 Clubhouse 等社交平臺的元素,意在捕捉大學生活的精髓。

Hallparty 是一款專門針對大學校園的社交媒體應用——囊括校園里的所有事務。想象你在校園里會做的任何事情,從參加有趣的俱樂部到與朋友在食堂聊天,它們都包含在這個應用程序中。這簡直就是“口袋里的校園”。

二、問題所在

Hallparty 目標是提供一個虛擬的大學的社交平臺,包含在語音室里聊天、設立有趣的俱樂部、提供創新機會等。但由于種種因素,應用程序仍未能包含大學生活的精華部分,某種意義上來說,它無法吸引用戶。

因此,我決定重新設計用戶體驗以滿足用戶的需求。

雖然這款應用程序無法連接現實和虛擬,但也許并不影響實現目標。

三、我是如何得出這個結論的呢?

我對 Hallparty 的使用者進行了調研,并對正在上大學的人進行了一些采訪。之后,我開始觀察一些問題,比如:

  • 是什么讓用戶跳過了登錄頁面?
  • 為什么用戶沒有像使用其他社交媒體那樣頻繁使用 Hallparty?
  • 用戶最喜歡使用 Hallparty 的什么功能?
  • 是否有一些功能用戶根本就不知道它們是什么?
  • 在用戶旅程中的種種痛點是什么?

等等……

我從研究中收集了所有的信息,并將其繪制成用戶旅程圖,以了解用戶。因此我明白了用戶在整個體驗旅程中所思考的各種問題。比如說:

  • 我在這里應該做什么?
  • Hallparty 與 Facebook、Instagram、Clubhouse 或 Discord 等應用有什么不同?
  • 我為什么要填寫所有這些關于我自己的細節信息?
  • 它有什么作用?
  • 它的功能是什么?
  • 這些按鈕大多是做什么用的?
  • 為什么讓我看到一些空白屏幕?那是什么意思?

等等……

四、缺少什么?

一旦我得到了用戶在整個體驗旅程中經歷的各種痛點,我就開始集思廣益,尋找缺少的東西。之后,我提出了以下需要解決的問題:

  • Hallparty 需要傳達的目標。
  • 界面能與用戶產生共鳴。
  • 引導用戶了解 Hallparty 功能是很重要的,根據研究,功能并不明顯。
  • 最重要的是,Hallparty 必須推銷 “虛擬校園生活” 的概念。

五、設計范圍

在觀察了用戶的想法和行為后,我確定了需要解決的關鍵點,即:

1. 最初的新用戶引導體驗

新用戶引導是將用戶轉化為付費客戶的最關鍵環節之一。第一印象即是最終印象,事實確實如此。在這種情況下,新用戶引導有著巨大的改進和創新的空間。

2. 應用內體驗

這會是一個需要探索的廣闊空間,但我決定集中于兩個核心的主題,即:填寫個人資料和漸進式用戶引導。

我觀察了各類社交媒體平臺,發覺出“填寫個人資料”是如何在挖掘信息方面為用戶帶來好處。雖然 Hallparty 有一個編輯個人資料的選項,并要求用戶在初次使用時填寫一些信息,但這還不夠。它需要強調個人資料的重要性。因此,我決定提出一個解決方案。

漸進式用戶引導比初始用戶引導使用更廣泛一些,因為它在用戶逐步瀏覽應用程序時向他們展示新的信息。指引提示會呈現在用戶所在頁面上,就像一個實時演練。用戶不是預先得到提示,而是在探索應用程序的同時進行學習。Hallparty 有幾個功能需要一些漸進式引導。

3. 空狀態體驗

這是一個很好的機會,可以與用戶建立關系,并傳達產品的個性。由于目前 Hallparty 沒有為“空狀態”提供解決方案,我認為 “空狀態” 有很大的潛力值得我們去發掘,讓用戶高興,在關鍵時刻留住用戶。

當我為 Hallparty 設計體驗時,需要牢記他們的設計語言,他們使用的字體類型,他們使用的調色板,布局,間距,以及其他元素。因此在開始設計之前,我花了一些時間了解 Hallparty 的設計系統。

六、初始用戶引導

經過一些研究,我發現到 Hallparty 用戶體驗不是很好,缺少氛圍感。用戶應該能夠一目了然地了解 Hallparty 的目的,而這一點是缺乏的。實際上 Hallparty 提供了很多很酷的功能,比如:

  • 專門為大學提供的私人空間。
  • 虛擬房間,與朋友一起聊天。
  • 虛擬社區將志同道合的人聯系起來。
  • 有機會發揮創意,建立用戶自己的主頁。
  • 存放用戶想法。
  • 消息功能,這不用說,非常有用。

但是,上述的大部分功能只是擺放在那里,甚至無法被用戶發現。這時我意識到這些功能需要一些介紹。

隨著我們的進一步深入,我們分析了改版前的新用戶引導體驗。

1. 現有流程

虛擬校園產品的用戶體驗升級

正如你所看到的,這些屏幕缺乏大學校園的精華部分。當我開始設計新用戶引導時,我必須重點思考我如何能夠直接提高用戶體驗。

因此,我決定從現實生活中尋找一些靈感。我想象著它在現實世界中是如何運作的。迎新會活動是怎樣的?

2. 故事線

所以,讓我們從一個小故事開始。

很久以前,有一個叫 Alex 的男孩,他考上了一所大學。今天是他在大學的第一天???!那是他的大學。

虛擬校園產品的用戶體驗升級

由于 Hallparty 的想法是針對每個學院單獨推出。所以,我想為什么不利用這個機會,給用戶一些個性化的體驗。

3. 迭代過程

現在,這是用戶會遇到的第一個界面,我需要確保它能吸引用戶的注意。因此,我在文案和視覺上做了一些迭代。

虛擬校園產品的用戶體驗升級

4. 最終流程

先前的登錄過程很簡單,我不想讓它復雜化。通過詢問大學的郵件 ID 來登錄很好用。我想給用戶一種興奮的感覺,所以我決定繼續使用用戶大學的插圖,這將給用戶一個個性化的體驗,以及一些 Hallparty 的描述,以便用戶感受到 Hallparty 的氛圍。

虛擬校園產品的用戶體驗升級

虛擬校園產品的用戶體驗升級

故事繼續……注冊成功后,亞歷克斯前往校園。他看著美麗的校園和周圍的學生。讓我們來看看他接下來做了什么。

虛擬校園產品的用戶體驗升級

??他交了新朋友!

場景 1:連接好友

1)迭代過程

就像現實世界一樣,我想捕捉當孩子們第一次進入大學時的新鮮感受。他們在一個完全陌生的地方看到了很多新面孔,他們想做的就是給自己找一個朋友來交談,分享那些共同的感受。

有了這個想法,我繼續設計,在一些有趣的插圖的幫助下,我試圖展示出校園中同學們來來往往,以提示用戶找一個新朋友。

虛擬校園產品的用戶體驗升級

2)最終版本

使用一種更適合 Z 世代的語言是非常重要的,這樣他們就能與產品產生共鳴。下一個界面顯示了他們大學學生的用戶名單,這些人已經注冊登陸了,可以直接關注他們。

虛擬校園產品的用戶體驗升級

虛擬校園產品的用戶體驗升級

如果亞歷克斯是第一個進入學校的人呢?

想不到吧!我也有辦法解決這個問題

特殊情況:第一批用戶加入時。

1)迭代過程

這是一個專門為邊緣情況,即第一批用戶制作的界面。我不希望用戶感到孤獨,因此借助插圖和文字,我試圖為用戶打造成就感,使他們高興。

虛擬校園產品的用戶體驗升級

2)最終版本

虛擬校園產品的用戶體驗升級

在與一些新生聊天后,Alex 繼續前進,發現很多不同的人群在興奮地談論著。讓我們來看看他們在做什么?

虛擬校園產品的用戶體驗升級

場景 2:連接社群

和大學迎新一樣,新生了解并加入有趣的俱樂部和社群。同樣,Hallparty 也提供了各種有趣的社群和俱樂部。

更棒的是,Hallparty 不僅提供這些社群,用戶也可以創建新的社群。Hallparty 通過詢問用戶的興趣,只展示用戶感興趣的內容,使得選擇和加入更為簡單。

這不是很酷嗎?

虛擬校園產品的用戶體驗升級

虛擬校園產品的用戶體驗升級

最終版本

使用 Hallparty 的設計語言,我最終制作了以下的界面,用彎曲的形狀,俏皮的文本和歡快的顏色,與現實世界相連。

虛擬校園產品的用戶體驗升級

虛擬校園產品的用戶體驗升級

如果到現在為止還沒有俱樂部滿足亞歷克斯的興趣呢?

當然,我為此提出了一個解決方案

特殊情況 :沒有符合用戶興趣的社群時。

新生不一定會找到符合他們興趣的俱樂部,也許他們會自己建立一個。但他們不想在搜索后看到空白的界面。我的解決方案如下:

虛擬校園產品的用戶體驗升級

亞歷克斯現在幾乎都準備好了。哦,等等!那是什么?

虛擬校園產品的用戶體驗升級

正如你們所知,大學生活繁重,信息量巨大,學生很容易錯過一些重要信息。在與一群大學生交談后,我注意到他們有時會錯過校園里發生的事情,例如系里的辯論賽或一些體育活動。

我想到了校園推送機器人(Campus Bot)。但等等,我不會把所有內容呈現出來,讓用戶在Hallparty中探索一下。(欲知詳情,請看后文)。

場景 3:連接信息

1)迭代過程

插圖輔助我表現出信息量爆炸時的困惑感受。

虛擬校園產品的用戶體驗升級

2)最終版本

Hallparty 初始引導的最終環節是一個小小的慶祝。因為初始引導很有趣,很刺激,但也有一點累,所以我想讓用戶有成就感。

虛擬校園產品的用戶體驗升級

虛擬校園產品的用戶體驗升級

七、漸進式引導

1. 讓用戶更容易被發現

1)用戶填寫個人信息優化

在一個大約有 5-7 千名學生的學校中,不了解學生詳細信息,就很難為用戶發掘新的朋友。但有什么好方法既能要求用戶填寫詳細個人的信息資料,又不會讓用戶感覺像是在枯燥的工作呢。

進入頁面,以下是用戶填寫詳細個人信息的方式:

現有的面

Hallparty 在新用戶登陸時,要求用戶填寫的個人信息,然而信息維度相當有限,且沒有什么意義。

虛擬校園產品的用戶體驗升級

優化方案的目標:通過巧妙地方式讓用戶填寫詳細信息,而不是在用戶剛進入程序,因為這個過程感覺像是一個任務,枯燥無味,從而帶給用戶一些反感。

我的解決方案:線框圖

我不想把完成個人資料強加給用戶,但同時,能提醒他們應該去填滿信息。

虛擬校園產品的用戶體驗升級

迭代過程

我嘗試了很多方案,確定了界面上可見的每一個元素,尺寸、位置、顏色、間距、層次,所有的一切。

下面是我對解決方案的思考過程:

虛擬校園產品的用戶體驗升級

最終界面

這是最終呈現給用戶的界面,在沒有引起用戶過多注意的情況下,卡片和圓環起到了提醒和解釋的作用(進度提示)。這一點對于用戶而言至關重要,因為用戶知道如何填寫他們的詳細信息和操作進度,實質上可以給用戶掌控感。

虛擬校園產品的用戶體驗升級

一旦用戶完成了個人資料的填寫,卡片和圓環就消失了。

這就是整體界面的樣子:

虛擬校園產品的用戶體驗升級

2. 讓用戶更接近真實體驗的功能

我意識到,應用程序中的功能并不都是那么容易被用戶發現的,因此,我決定挑選幾個重要的功能,只在應用程序里給予用戶指引。

我不在初始引導中介紹這些重要功能的原因如下:

  • 讓我們把它與現實世界中的場景相比較,孩子們會在入校時徹底了解校園嗎?不。但他們最終會在入校后逐一發現。
  • 我不想一下子展示所有的功能,而是留下一些驚喜,讓用戶以后去發現。
  • 此外,使初始引導變得冗長,除了激怒用戶之外沒有任何作用。因此用戶傾向于跳過它。而這是我絕對不希望發生的。

出于上述原因,我決定挑選重要的功能,稍后介紹。以下是我選取的兩個功能。

1)校園推送機器人

WALLIE,可愛的校園推送機器人,他將帶來校園里所有的八卦。開個玩笑,但是Wallie 會自動推送校園里的所有重要消息,確保你不會錯過任何事情。這是不是很酷?

校園推送機器人是用戶的朋友,他不會讓用戶疑惑校園里發生什么而感到 FOMO。

注釋:FOMO “錯過恐懼”指的是一種感覺或看法,即別人比你更快樂,生活得更好,或經歷的事情比你更好。它涉及到一種深深的嫉妒感,并影響自尊。Instagram 和 Facebook 等社交媒體網站往往會加劇這種情況。

迭代過程

校園推送機器人的功能很酷,但用戶如何找到它?說實話,它并不明顯。但我有個好主意。 我為它引入一個工具使用提示,因為我們得讓用戶看到它最酷的實體。

虛擬校園產品的用戶體驗升級

接下來的操作呢?我不能在這里再放一個工具提示。你知道這意味著什么嗎?是的,是時候先睹為快了。

我需要給用戶一個理由去點擊 “校園”,因此我向他們展示了一個帶有互動的機器人動效。

虛擬校園產品的用戶體驗升級

介紹頁的優化方案。思路如下:

虛擬校園產品的用戶體驗升級

最終版本

這就是最終樣式,簡單而又有趣。任務完成了!!

虛擬校園產品的用戶體驗升級

虛擬校園產品的用戶體驗升級

我需要弄清楚哪些功能是最受歡迎的,而且要確保它們是容易被發現的。因此,我開展了調查,向現有用戶提出一個問題:“他們最喜歡的功能是什么?”我得到的最普遍答案是語音室。

另外我注意到,語音室這個功能并未真正的傳達它的作用,它需要一些介紹。

2)語音室

將其與現實世界的場景相比較,語音室正如校園里和朋友一起閑逛的地方。當你思考時,會發現語音室有無數的可能性、無數可以做的事情。例如,在食堂里休息發呆,和朋友們聚會,或者約會(Hallparty也提供私人房間),或者練習公開演講,或者主持播客。語音室有無窮的可能性。

語音室也有同樣的目的,它基本上是虛擬空間,你可以和你的朋友一起玩,玩游戲,聽歌,分享屏幕,以及更多活動。

虛擬校園產品的用戶體驗升級

現有界面

虛擬校園產品的用戶體驗升級

之前是沒有關于語音室的介紹。Hallparty 沒有展示出語音室是一個多么驚喜的功能,而介紹能充分展示了語音室的完整功能,使虛擬時間變得更加令人興奮。

迭代過程

由于需要維持之前使用的設計語言,我決定只使用彈出式來引導用戶語音室所提供的廣泛可能性。我更多地強調了視覺,以抓住用戶的注意,使他們有更好的體驗,并意識到虛擬互動可以是多么有趣。

虛擬校園產品的用戶體驗升級

最終版本

這就是最終界面。從發光的工具提示開始,以語音室的介紹頁面結束。

虛擬校園產品的用戶體驗升級

虛擬校園產品的用戶體驗升級

八、空狀態

空狀態是指用戶使用產品過程中,沒有任何東西可以顯示的時刻。

雖然空狀態對用戶體驗很重要,但卻經常被忽視。了解它們是什么,如何使用它們,并對它們應用最佳體驗方案,可以產生巨大的收益。盡管空狀態不是典型狀態,但它們應該被妥善設計以防止混淆。

用戶從注冊登陸到功能操作交互,有很多的場景會使用空狀態。在這種情況下,我將展示針對那些用戶仍不熟悉,并且大部分界面沒有任何信息顯示的場景。這些可以被稱為漸進式引導拓展 / 產品走查。

1. 個人

1)迭代過程

虛擬校園產品的用戶體驗升級

2)最終版本

虛擬校園產品的用戶體驗升級

2. 信息流

1)迭代過程

虛擬校園產品的用戶體驗升級

2)最終版本

虛擬校園產品的用戶體驗升級

3. 探索部分

1)迭代過程

虛擬校園產品的用戶體驗升級

1)最終版本

虛擬校園產品的用戶體驗升級

4. 收件箱

1)迭代過程

虛擬校園產品的用戶體驗升級

2)最終版本

虛擬校園產品的用戶體驗升級

5. 通知

最終版本

虛擬校園產品的用戶體驗升級

就這樣結束了!

如果你們閱讀至此,非常感謝你們留下來,這對我來說真的很重要(假裝你們很喜歡)。總的來說,這是一次有趣的設計旅程,我學到了很多東西,希望你們在閱讀中感受到樂趣。

九、思考和收獲

整個設計對我的設計成長很有幫助,我探索了很多以前沒有做過的新東西,也學習了一些新的技能。以下是我在整個過程中面臨的挑戰和學到的東西。

  • 項目的開始和發展猶如一條巨大的學習曲線。我學會了質疑我的每一個決定,我的推導決策能力得到了極大的提高。
  • 設計時最重要的事情之一是移情。對設計師而言,真正理解用戶的需求和期望是必要的。移情幫助我更深入地了解背景,幫助我思考和提出解決方案。
  • 我學會了如何在數字產品和現實世界之間進行場景比對,從而看到清晰的產品愿景,更有創造力。
  • 保持應用程序的原有設計語言是一個挑戰,也是一個限制。
  • 最后,迭代是我最大的老師。不滿足于自己做的初設計。最初迭代是有點挑戰性的,但隨著進一步發展,我開始質疑自己的設計決策,最終設計也隨之變得更好

十、未來的改進

  • 本次設計中的插圖伴隨著動效,提升初始時校園虛擬之旅的真實感。
  • 校園推送機器人不僅能推送重要信息,還能回答學生的提問。

本文已獲得作者正式授權,截圖如下:

虛擬校園產品的用戶體驗升級

 

原文作者:Roopal Agarwal

原文地址:https://medium.muz.li/hallparty-design-revamping-the-virtual-campus-experience-178cfcef8c20

譯者:曹競羽;微信公眾號:三分設(ID:SFun-Share);用戶體驗設計師成長社區

本文由@三分設 翻譯發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 很有幫助的分析,我也很喜歡語音室,和朋友見不到面在語音室各種玩可有意思了

    來自廣西 回復
  2. Hallparty 是一款專門針對大學校園的社交媒體應用——囊括校園里的所有事務。想象你在校園里會做的任何事情,從參加有趣的俱樂部到與朋友在食堂聊天,它們都包含在這個應用程序中。這簡直就是“口袋里的校園”。

    來自吉林 回復
  3. 我喜歡那個漸進式引導,說真的,每次在開新軟件就要填寫個人信息的時候超級煩燥和不安,如果可以慢慢來的話,確實會給人一種是自己在掌握的感覺,不安全感也消除了很多。

    來自廣東 回復