語音房 @ PlayOne
聲音直播功能，不露臉也可以成為最閃耀的社群焦點
專案期間
1年 (2021年11月～2022年10月)
1年 (2021年11月～2022年10月)
擔任角色
產品設計師 ( App & Web )
產品設計師 ( App & Web )
負責項目
功能流程規劃、設計完稿、工程交付
功能流程規劃、設計完稿、工程交付
01 | 專案背景
以提升 DAU 到 10000 為長期目標，增強平台內社群功能以及增加實質的娛樂內容並弱化陪玩交易行為的權重，降低新用戶進入平台時的參與門檻，不需要一定要消費才能好好體驗 PlayOne，藉由隨意的進入語音直播間便能與其他用戶輕鬆互動。
02 | 角色與產出
在這個專案中，我同時負責 App 端以及 Web 端的產品設計工作，因為原先我只負責 App 端設計，此次需接手 Web 設計工作，最大的挑戰便是需要讓三端的設計同步率一致，對於 Web 端各項交戶行為的重新設計以及減少網頁跳出過多彈窗便是我為自己設下的目標，也要讓用戶可以在 App 與 Web 端使用時可以完全無縫接軌不必付出重新學習的成本輕鬆地進行裝置自由切換。
本次與 2 位產品經理以及 10 位以上的工程師密切合作。工作流程由產品經理先規劃需求，最終交付視覺設計成果給工程團隊。
03 | 專案成果與影響
從語音房上線半年後，DAU 成長了80%，用戶儲值在平台上也直接翻倍成長。不論在介面設計、工程維護一直都還在持續的優化，也還在擴增功能，開始取代陪玩媒合服務，漸漸轉為整個產品的主線，行銷團隊也與許多 VTuber 合作簽約，努力增加 PlayOne 的內容創作力以及娛樂性。
wireframe
wireframes created by Gwen Sui
App 與 Web 端畫面由圈圈功能作為模板進行設計，文字訊息格式將會與圈圈同步，將會重複使用已建立之元件，但也因為減少要工程負擔，許多增加的功能需要用心思考如何在現有框架下進行收納並維持易用性。
設計產出
語音房的App入口位置？
一開始設計時是將語音訪入口設置在首頁，將首頁切分為遊戲以及語音，既不影響原有的 Navigation bar 設計，也足以顯示語音功能的重要性。
而在與營運團隊開會討論之後，這項設計卻被駁回，營運夥伴認為這個入口位置不夠明顯，希望將語音功能放置在 Navigation bar 的中央位置（原位置為圈圈功能）
而在經過內部決議之後，最後採用了語音與圈圈調換入口位置的方法來重新設計。
一開始設計時是將語音訪入口設置在首頁，將首頁切分為遊戲以及語音，既不影響原有的 Navigation bar 設計，也足以顯示語音功能的重要性。
而在與營運團隊開會討論之後，這項設計卻被駁回，營運夥伴認為這個入口位置不夠明顯，希望將語音功能放置在 Navigation bar 的中央位置（原位置為圈圈功能）
而在經過內部決議之後，最後採用了語音與圈圈調換入口位置的方法來重新設計。
語音房 or 找陪玩
為了提升用戶留存率以及增加產品停留時間，將用戶一進入 App 時出現的頁面改為轉跳至語音，希望藉由低門檻的語音直播間讓用戶能駐足於此
而在原本的首頁（遊戲）上也新增了特殊的語音房卡片，卡片上會展示當前房間內的聊天文字訊息，並加上精緻的聲波動畫來吸引用戶點擊卡片進入房間與其他用戶一起同樂。
為了提升用戶留存率以及增加產品停留時間，將用戶一進入 App 時出現的頁面改為轉跳至語音，希望藉由低門檻的語音直播間讓用戶能駐足於此
而在原本的首頁（遊戲）上也新增了特殊的語音房卡片，卡片上會展示當前房間內的聊天文字訊息，並加上精緻的聲波動畫來吸引用戶點擊卡片進入房間與其他用戶一起同樂。
語音房於首頁推薦的卡片動態
語音房抽獎寶箱
需求目的：
- 刺激用戶投注貨幣，提高流水。
- 提高聲播間互動留存。
在聲播間進行互動中可以同時參與抽獎在獲得獎品同時也累積聲播間人氣。
用戶在寶箱抽獎時能夠獲得在一般禮物中無法獲得且無法用平台內流通貨幣購買到的特殊禮物。寶箱推出後許多用戶為了得到特殊禮物，發展出了平台內交換或販售特殊禮物的市場，這樣的結果與需求目的相呼應，產品也收穫滿滿增加實質收益。
語音房內寶箱抽獎prototyping
語音房管理員設定
需求目的：
- 語音房建立之後，房主可以離開房間，因此無主可管時，房間內就會需要管理員協助房主管理。
礙於進行語音房的設計時需要使用圈圈的框架，必須想辦法在既有的版面內加入所需的多項功能。
因為 App 在使用上本就常會有多頁轉跳的流程，但在 Web 端的設計上卻讓我碰到了不小的難題。
我也為自己設下幾個 Web Design 目標：
01 | 在房內便可即時編輯房間資訊
原本的圈圈房間設定並不直觀，無法在圈圈內畫面進行設定，需要點開 Header 上的個人頭像 > 個人中心 > 建立圈圈 > 完成編輯 ，所以使用者無法在自己編輯完的當下就能看到自己把房間改成什麼樣子了。
在設計語音房時，我便在左上的房間資訊卡片放置了一顆與 App 同款的「設定」icon，按下這顆小螺絲之後便會跳出可以直接編輯房間資訊的彈窗
因為 App 在使用上本就常會有多頁轉跳的流程，但在 Web 端的設計上卻讓我碰到了不小的難題。
我也為自己設下幾個 Web Design 目標：
- 讓用戶在使用 App 或網頁版時都能無痛輕鬆切換
- 重新設計 Web 端各項交戶行為，不會在使用時產生疑惑
- 減少網頁跳出過多彈窗
- 優化圈圈的房間設定行為
01 | 在房內便可即時編輯房間資訊
原本的圈圈房間設定並不直觀，無法在圈圈內畫面進行設定，需要點開 Header 上的個人頭像 > 個人中心 > 建立圈圈 > 完成編輯 ，所以使用者無法在自己編輯完的當下就能看到自己把房間改成什麼樣子了。
在設計語音房時，我便在左上的房間資訊卡片放置了一顆與 App 同款的「設定」icon，按下這顆小螺絲之後便會跳出可以直接編輯房間資訊的彈窗
Web語音房內的房間設定
02 | 管理員設定
原本想參考 App 在房間設定頁放置管理員設定的功能，但因為已經將房間設定用彈窗來設計，想盡量減少用戶在彈窗內可操作的行為，但管理員設定有許多繁雜的行為如：搜尋、解除...這些並非單一動作即儲存。
因此我將 Web 版的管理員設定從房間設定拆開來，最後選擇在左下的房間成員小視窗內來作為此功能的歸屬地，一來是管理員設定與 Default 顯示的成員名單所使用的 list 元件相仿，差別只在於在管理員設定時後方會多出一顆按鈕，而這個小視窗的空間也能讓用戶進行原地不跳轉的搜尋作業來輕鬆設定管理員。
點擊 目前管理員人數 3/10 > 跳出彈窗，此彈窗很簡單，只能夠：
原本想參考 App 在房間設定頁放置管理員設定的功能，但因為已經將房間設定用彈窗來設計，想盡量減少用戶在彈窗內可操作的行為，但管理員設定有許多繁雜的行為如：搜尋、解除...這些並非單一動作即儲存。
因此我將 Web 版的管理員設定從房間設定拆開來，最後選擇在左下的房間成員小視窗內來作為此功能的歸屬地，一來是管理員設定與 Default 顯示的成員名單所使用的 list 元件相仿，差別只在於在管理員設定時後方會多出一顆按鈕，而這個小視窗的空間也能讓用戶進行原地不跳轉的搜尋作業來輕鬆設定管理員。
點擊 目前管理員人數 3/10 > 跳出彈窗，此彈窗很簡單，只能夠：
- 顯示當前已設定的管理員清單
- 解除清單上的管理員資格
Web語音房管理員設定
Web語音房列表頁RWD
因為原先的 PlayOne Web Design 並非由我負責，因此接手檔案時才發現 PlayOne 的網站是沒有製作 RWD 的響應式設計，設計稿中幾乎都是以製作 1440 的螢幕尺寸為主。
向 Web 前端團隊詢問之後，工程師們表示要做 RWD 是沒有問題的，所以我在這次的列表頁面便做了簡單的卡片排列變化。
因為原先的 PlayOne Web Design 並非由我負責，因此接手檔案時才發現 PlayOne 的網站是沒有製作 RWD 的響應式設計，設計稿中幾乎都是以製作 1440 的螢幕尺寸為主。
向 Web 前端團隊詢問之後，工程師們表示要做 RWD 是沒有問題的，所以我在這次的列表頁面便做了簡單的卡片排列變化。
專案成果
語音房功能是源自於PlayOne前身暴龍陪玩時期便營運過的功能，有許多資深陪玩師也都懷念當時能夠與許多用戶能夠輕鬆交流互動的場景。
語音房透過用戶之間的送禮打賞行為來表示對麥上的直播主表示支持，而且收到禮物不盡能獲得一項在平台上的實質紀錄也能獲得錢財，藉此彰顯自己的獨特，而產品方也獲得了實質收益，這將是能突破陪玩市場侷限的好解法，目前行銷團隊也與許多Vtuber、簽約主播合作，將持續在平台內產出優質內容藉以留住用戶。
期許未來在PlayOne上能夠有更多更好玩的行為發生！
語音房功能是源自於PlayOne前身暴龍陪玩時期便營運過的功能，有許多資深陪玩師也都懷念當時能夠與許多用戶能夠輕鬆交流互動的場景。
語音房透過用戶之間的送禮打賞行為來表示對麥上的直播主表示支持，而且收到禮物不盡能獲得一項在平台上的實質紀錄也能獲得錢財，藉此彰顯自己的獨特，而產品方也獲得了實質收益，這將是能突破陪玩市場侷限的好解法，目前行銷團隊也與許多Vtuber、簽約主播合作，將持續在平台內產出優質內容藉以留住用戶。
期許未來在PlayOne上能夠有更多更好玩的行為發生！
© WanChen Lin 2024
