App|Japan Go開發過程 (上)

Josie
Jul 11, 2021

--

開發背景

“ 讓想去日本玩又在意開銷的台灣人,在緊湊的旅行過程內,也能輕鬆控管旅遊時的花費。 “

有次和朋友去日本旅行時,發現在購物時,常會不知不覺花過多時間在價格換算與記帳上,進而壓縮到其他行程。
因此我們想要開發一款能夠結合台日貨幣換算與記帳的 APP,讓與我們一樣喜歡去日本又在意CP值的小資族能夠縮短購物時間,並輕鬆控管旅行的花費。

開發團隊與設計流程

開發團隊共兩人,我負責 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 商店得到的使用者回饋,與身邊朋友的使用習慣調查,整理出影響評分高低的標準,進而研究出最常見的用戶需求,便於發想對應功能,與各功能間的重要程度排序。

針對使用者需求,列出相對應的功能
IA資訊架構 / APP SiteMap

總結用戶的評論並加上我們從人物誌中列出的客群痛點,我們列出了幾個必要功能,並製作 Functional Map。

使用 Whimsical 製作的 Functional Map

4. 擬定User Flow

依據功能列點,規劃初步的 User Flow。 值得一提的是,流程圖是會持續迭代變化的,在畫面設計與實際開發時,都會發現多種突發狀況需要新增或刪改流程。

一部分的 User Flow 與 UI 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) 在設計中添加插畫元素 — 在產品中加入風格一致的插畫與品牌人物,增添使用者體驗上的愉悅感與一致性

頁面一覽

更多詳細介面介紹請看: App|Japan Go 開發過程(下)

--

--