使用者體驗設計
重新設計
PC 遊戲平台
個人作品
8 週 (2022/4-2022/6)
Figma、Xmind
使用者研究、UX 設計、UI 設計、原型製作
「Steam Mobile」是由電腦遊戲平台 Steam 開發的行動端應用程式，用戶可以使用手機瀏覽、購買遊戲，並在社群裡和好友聊天互動。但 APP 架構雜亂、流程不順，導致使用者體驗不佳。
Steam Mobile 涵蓋了 Steam 上的大部分功能， 包含「商店」、「好友聊天」、「社群」等，如何讓使用者快速理解各功能的使用方式，並順利抵達目標頁面，是這個專案的一大挑戰。
Steam 品牌色調較深，以深色模式設計 APP 會比較符合品牌形象。因此除了使設計符合 Steam 的品牌風格，也需考慮介面的易讀性和顏色對比度，才能讓使用者順暢地瀏覽介面。
透過「分析商店評論」和「訪談用戶」蒐集使用者回饋，了解 APP 現況和其使用者的需求。
將訪談結果轉化成 Persona，並用 KJ 法整理使用者痛點，以聚焦目標客群和需要解決的問題。
重新調整 APP 的資訊架構，並繪製 Wireframe 測試整體流程是否順暢。
建置符合品牌形象的設計系統，包含配色、字型、元件庫等，以便節省設計時間並避免重工。
製作 Mockup 和 Protoytpe，反覆測試修改後，確認最終的使用者介面。
觀察並歸納 APP Store 的低星評價，彙整出三個主要的使用者痛點：
採用視訊訪談的方式，邀請五位 Steam Mobile 用戶分享親身經驗和看法，以獲取更多角度的回饋。
· 是什麼原因讓你開始使用 Steam Mobile？
· 對於整體介面的感受為何？對於資訊的呈現方式有什麼想法？
· 最近一次使用 Steam Mobile 是什麼時候？當時為什麼會使用呢？
· 最主要使用的功能有哪些？使用過程中是否有遇到困難？
· 你瀏覽商店的習慣為何？是偏好自己探索還是跟隨推薦內容？
· 是否曾在 Steam Mobile 上購買過商品？能否分享當時的購買經驗？
· 你對 Steam 和 Steam Mobile 各自的感受為何？
結合訪談資料和自己的延伸想像，建立三種不同使用習慣、性格的人物誌，幫助自己解讀目標用戶的行為和感受，以更好地訂定設計決策，並確認需要解決的問題有哪些。
點擊圖片放大觀看
點擊圖片放大觀看
點擊圖片放大觀看
藉由便利貼紀錄從商店評論和訪談資料裡蒐集到的使用者回饋，加以分類後製成親和圖，以更深入地發掘使用者痛點和各功能的優劣處。
點擊圖片放大觀看
仔細檢視目前的 Steam Mobile，針對各個頁面，標示出介面設計不佳、流程不順的部分，以便進行後續的優化設計。
將功能劃分為「驗證」、「聊天」、「社群」、「商店」、「我的」五大類別，藉由簡化分類、調整層級，讓使用者能更好的找到方向並完成目標。
.png)
點擊圖片放大觀看
透過 Wireframe 繪製介面雛型，確認元件配置是否完整妥當，並測試功能流程的順暢度。
·整合搜尋和篩選器，只需一個步驟即可完成操作。
·用戶可以利用標籤，查找或排除特定類型的商品，更精準地縮小搜尋範圍。
·收納「檢舉」、「忽略」等次要功能，協助使用者聚焦內容。
·Scrollable Tabs 分類資訊，改善瀑布流帶來的資訊疲勞，並提升瀏覽體驗。
·評價採用卡片型設計，閱覽更簡單清晰。
·能將願望清單裡的商品批次加入購物車，方便使用者一次性選購大量商品。
·分開呈現官方新聞和遊戲新聞，資訊不再雜亂無章。
·收藏喜愛的新聞，方便多次查閱，再也不怕錯過資訊。
·增加分類標籤，閱讀前就能了解該新聞的類型。
·沿用代碼登入，並新增 QR 碼掃描登入，驗證更安全、方便。
·行動代碼標示明確的刷新時間，使用者更好判斷代碼的使用效期。
·改為手動刷新代碼，避免行動驗證器在後台不停運行。
在設計驗證頁面時，我想了幾個不同的做法，包含生物辨識登入、驗證簡訊 / 信件等方式，最後我選擇保留原先的代碼驗證，並新增 QR 碼掃描登入來處理這一塊。QR 碼和行動代碼都會定期刷新，讓使用者不用跳出 Steam Mobile 就能快速、安全的完成登入。
這次的專案雖以優化介面和流程為主，但實際在業界工作時，除了考慮整體美觀和使用者需求，也需加入商業面和開發面的考量，才能做出可以被實現，且有利於團隊和公司的產品。
回頂端
