參與 Chingu 社群的過程中,我與來自韓國、日本、澳洲的夥伴在六週的時間內共同發展這個專案。過程中討論了許多點子,最後決定投入一個為指引使用者電影資訊的平台。我們藉由這個開源專案精進網站知識、累積跨國/跨領域合作經驗及實踐敏捷開發的流程。最後,我透過研究、設計系統、設計規範和原型等將設計整合進開發流程中,面對人手不足的情況下順利協助平台準時上線。
人們熱愛看電影,無論是在家觀賞、進入電影院,我們都會上網搜尋電影相關資訊。而當今也有許多電影網站提供各式各樣的服務。Nanum 是一款為猶豫者們提供三大推薦模式的電影資訊網站,也設計了讓使用者輸入關鍵字搜尋及加入最愛的功能,在瀏覽的同時收藏有興趣的電影資訊。
構思專案構想的初期,我做了基礎的使用者調查和競品分析簡報。這份報告在敏捷開發中幫助了夥伴們了解網站的潛在使用者行為,並在第二週順利構思出 MVP 的架構。
由於團隊希望前期先快速開發出 MVP,在有限的時間下我們從親友們的電影資訊搜尋經驗中,轉化出三種電影資訊網站的使用族群,並透過競品網站分析主流的網站架構及功能;這也啟發夥伴們對產品開發更多的想法,聚焦出符合夥伴心目中的目標使用者在「猶豫者」這個類型。同時,我們也梳理出了專案願景及服務開發的方向,開始著手 Product Backlog 中值得優先關注的使用者需求進行優先排序。
從競品研究中,我們發掘現有服務提供使用者指引的主要功能特徵,釐清各個功能的 JTBD(Jobs-to-be-done):
綜合上述考量,我們一起訂定符合團隊的開發目標:
經過團隊討論後,相較於提供簡易挑選器的直覺型網站,我們決議將平台設計成提供讓使用者進入後資訊較豐富的類型。最後,我們透過三大區塊來提供使用者作出觀影選擇:
除了必須迅速確認資訊架構、互動流程、品牌識別等,專案後期有兩位工程師不便繼續參與,團隊也保持僅有的動能,重新排序專案目標優先順序,彼此彈性配合進度完成專案。我也在專案的最後兩周衝刺協助測試、整體設計品管。
工程團隊決議採用 The Movie Database (TMDB) API 作為抓取電影資訊的來源。面對堆積如山的 backlogs,我使用 Notion 整理給工程師們參考設計端的預計時程,與團隊溝通後調整、分配任務的優先順序,也和夥伴分頭進行各自的任務。
MUI 是透過 React 實踐 Google Material Design 規範的元件庫,團隊有四位工程師,短時間內我在 Figma 中建立符合團隊使用的設計系統和元件,以作出符合大家認知的操作流程和高擬真的原型。
在設計上,由於官方釋出的免費版本可用的元件內容有限,我以快速產出 wireflow 及原型的方式來逐一確認整體平台的架構/建置/檢查各個畫面,一邊在每次的調整中修正並更新元件庫,最後完成了一套平台的設計系統和設計規格交付文件整合在 Figma 檔案中。
除了將 Figma 圖層設計成容易瀏覽的階層,我也製作了不同的 Components,雖然在一開始會花費較多時間,但在後期更動設計或是討論上都能讓我更有效率的產出。過程中整理了四種品牌風格組合,最後團隊決定採用第一種 Neon 24/7 的提案;色彩的部分選擇霓虹藍及霓虹紅作為主副色搭配灰色調的深色模式,
另外,我們採用 Nanum Myeongjo & Lato 字型,而 Nanum Myeongjo 是源自韓國的字體,具有分享的意思,和我們建置專案的初衷-「透過電影資訊的呈現,讓使用者使用平台後做出合適的觀影決策」不謀而合,因此也成為平台的命名。