響應式網頁
線框稿
使用流程
設計系統
高擬真度原型
敏捷開發
國際開源專案
Nanum App
開源電影資訊平台的響應式設計

團隊

前端工程師:Sukyung Kim, Chinh Do, Miho, Nick

專案角色

UI / UX 設計師

時程

2022 年 10 月 至 2022 年 11 月

工作內容

使用者研究、線框稿、使用流程、設計系統、高擬真度原型

概覽

參與 Chingu 社群的過程中,我與來自韓國、日本、澳洲的夥伴在六週的時間內共同發展這個專案。過程中討論了許多點子,最後決定投入一個為指引使用者電影資訊的平台。我們藉由這個開源專案精進網站知識、累積跨國/跨領域合作經驗及實踐敏捷開發的流程。最後,我透過研究、設計系統、設計規範和原型等將設計整合進開發流程中,面對人手不足的情況下順利協助平台準時上線。

人們熱愛看電影,無論是在家觀賞、進入電影院,我們都會上網搜尋電影相關資訊。而當今也有許多電影網站提供各式各樣的服務。Nanum 是一款為猶豫者們提供三大推薦模式的電影資訊網站,也設計了讓使用者輸入關鍵字搜尋及加入最愛的功能,在瀏覽的同時收藏有興趣的電影資訊。

我們想解決的是

視覺化抽象的概念,綜合團隊共識

團隊簡報概覽

構思專案構想的初期,我做了基礎的使用者調查和競品分析簡報。這份報告在敏捷開發中幫助了夥伴們了解網站的潛在使用者行為,並在第二週順利構思出 MVP 的架構。

competitive' feature comparison
競品網站功能比較

由於團隊希望前期先快速開發出 MVP,在有限的時間下我們從親友們的電影資訊搜尋經驗中,轉化出三種電影資訊網站的使用族群,並透過競品網站分析主流的網站架構及功能;這也啟發夥伴們對產品開發更多的想法,聚焦出符合夥伴心目中的目標使用者在「猶豫者」這個類型。同時,我們也梳理出了專案願景及服務開發的方向,開始著手 Product Backlog 中值得優先關注的使用者需求進行優先排序。

👻
猶豫者POV:我需要合適的指引幫助我做出選擇,因為電影資訊豐富,我沒辦法在短時間內了解那麼多部電影。對於電影資訊不甚了解,需要透過額外的資訊更深入了解電影細節、外部人士/工具等來協助選擇觀賞內容。• 推薦內容:有助於決定的選項或是簡潔明瞭的行動步驟。
• 目標指引:獲得能夠分類電影資訊的提示。

設計挑戰

從競品研究中,我們發掘現有服務提供使用者指引的主要功能特徵,釐清各個功能的 JTBD(Jobs-to-be-done):

  1. 瀏覽推薦內容:查看吸引目光的電影內容/主題;選擇受歡迎的/搭上近期趨勢的電影。
  2. 使用篩選機制:回答偏好問題;使用篩選器選擇、過濾結果。
  3. 參考評論:查看最新/獨特的/相關的/最高/最低等的其他使用者回饋,幫助自己做出決定。
  4. 做出決定:尋找有價值/有幫助的電影資訊;搜尋/獲得專業觀影建議。

凝聚專案共識

綜合上述考量,我們一起訂定符合團隊的開發目標:

  1. 響應式網站:透過可多裝置使用的網站規劃,讓平台內容可以隨時啟發使用者。
  2. 透過推薦、查詢功能鼓舞使用者找到合適的觀影選擇。
  3. 藉由儲存最愛的方式,協助使用者縮小資訊範圍。

經過團隊討論後,相較於提供簡易挑選器的直覺型網站,我們決議將平台設計成提供讓使用者進入後資訊較豐富的類型。最後,我們透過三大區塊來提供使用者作出觀影選擇:

  1. 本日精選電影(Movie of the Day)
  2. 近期趨勢(Trending)
  3. 情緒標籤(What are you in the mood for?)

除了必須迅速確認資訊架構、互動流程、品牌識別等,專案後期有兩位工程師不便繼續參與,團隊也保持僅有的動能,重新排序專案目標優先順序,彼此彈性配合進度完成專案。我也在專案的最後兩周衝刺協助測試、整體設計品管。

設計

Design process
設計進程

工程團隊決議採用 The Movie Database (TMDB) API 作為抓取電影資訊的來源。面對堆積如山的 backlogs,我使用 Notion 整理給工程師們參考設計端的預計時程,與團隊溝通後調整、分配任務的優先順序,也和夥伴分頭進行各自的任務。

wireflow
Wireflow

使用 Material UI 進行設計

MUI 是透過 React 實踐 Google Material Design 規範的元件庫,團隊有四位工程師,短時間內我在 Figma 中建立符合團隊使用的設計系統和元件,以作出符合大家認知的操作流程和高擬真的原型。

在設計上,由於官方釋出的免費版本可用的元件內容有限,我以快速產出 wireflow 及原型的方式來逐一確認整體平台的架構/建置/檢查各個畫面,一邊在每次的調整中修正並更新元件庫,最後完成了一套平台的設計系統和設計規格交付文件整合在 Figma 檔案中。

design handoff
設計交付

設計系統

Figma setting

除了將 Figma 圖層設計成容易瀏覽的階層,我也製作了不同的 Components,雖然在一開始會花費較多時間,但在後期更動設計或是討論上都能讓我更有效率的產出。過程中整理了四種品牌風格組合,最後團隊決定採用第一種 Neon 24/7 的提案;色彩的部分選擇霓虹藍及霓虹紅作為主副色搭配灰色調的深色模式,

另外,我們採用 Nanum Myeongjo & Lato 字型,而 Nanum Myeongjo 是源自韓國的字體,具有分享的意思,和我們建置專案的初衷-「透過電影資訊的呈現,讓使用者使用平台後做出合適的觀影決策」不謀而合,因此也成為平台的命名。

visual exploration

專案成果

before & after UI
初版與上線版本的對照

您可以進入網站探索看看這個電影資訊平台:https://movie-app-geckos-18.netlify.app/

Nanum app homepage

專案回顧

首次跨國平台專案

這次國際專案的經驗讓我學習到敏捷開發的步調是很緊湊卻富有彈性的。團隊間的溝通大多在 Discord 頻道上完成,遠距協作需要很多文件或是視覺化圖像溝通以幫助達成團隊共識。

在合適的時候追求設計細節

我從夥伴的回饋中了解到發散和收斂思考平衡的重要性,當討論累積到一定程度就必須先有定案,才能迅速地朝目標前進。在必要且團隊量能許可的時候,恰當的設計細節是每個成員都很注重的,也是能讓體驗更加完備的關鍵。不論是多小的任務,與夥伴們一起完成時心裡都是很雀躍及踏實的。