開發團隊與設計流程
開發團隊共兩人,我負責 Product Designer 的角色,負責使用者研究、介面設計、主視覺設計。而朋友則是負責程式開發(使用 React Native 框架)
設計流程: User research, Competitive analyze, Persona, IA, User Flow, Wireframe, Design System, Mockup, Illustration, Prototype, App Store Screenshots, User Test
1. 使用者調查
根據質化訪談,使用 Persona 整理 User 的背景/目標/痛點,簡列解決對策。
2. 競品分析
主要參考記帳與匯率類的APP功能與UI設計,根據已有競品的用戶評價,可得知用戶最看重的已有功能、期待增加的新功能、期待改善的流程等,可做為UX研究重要依據。
整理用戶評價後,發現大家看重的部分主要為以下幾項:
快速鍵、匯率即時更新/可編輯、操作簡單、可回復的計算紀錄
3. 歸納需求,製作IA/sitemap與Functional Map
從競品在 Play 商店得到的使用者回饋,與身邊朋友的使用習慣調查,整理出影響評分高低的標準,進而研究出最常見的用戶需求,便於發想對應功能,與各功能間的重要程度排序。
總結用戶的評論並加上我們從人物誌中列出的客群痛點,我們列出了幾個必要功能,並製作 Functional Map。
4. 擬定User Flow
依據功能列點,規劃初步的 User Flow。 值得一提的是,流程圖是會持續迭代變化的,在畫面設計與實際開發時,都會發現多種突發狀況需要新增或刪改流程。
5. Wireframe
使用 Figma 製作 wireframe, 並先進行初步的 Lofi-prototype。
6. Design System
(1) App icon — 結合日本富士山意象與貨幣圖示,參考年輕人喜好風格進行設計。
(2)Color & State — 定義主色與輔色,與點擊狀態
(3) 遵守 Material Design Guideline — 以8為倍數的間距、卡片式設計
(4)考量文字易讀性
字號基本16,小標籤為14,最小不低於12,且底色與文字對比度要高。
因為人們通常是在旅程中使用此款APP, 情境多半是在移動或在搭乘電車的途中,因此文字是否易於閱讀很重要。
(5) 在設計中添加插畫元素 — 在產品中加入風格一致的插畫與品牌人物,增添使用者體驗上的愉悅感與一致性。