FinStep

side project

FinStep 理財鬧鐘

FinStep 的命名是由「Fintech」與「Step by Step」組合而成,設計目的是為了解決小資上班族,時常想要關注感興趣的理財項目,卻礙於上班時間、沒有理專等原因,無法時時查看價格現況,因此FinStep設計出給小資上班族使用的個人化、直覺設定的理財鬧鐘,幫助追蹤即時價格。

img

資訊科技業
男生 28歲

“ 每個人狀況不太一樣需要個人化分析 “

img

資訊科技業
女生 29歲

“ 希望有個平台或工具可以把我自己想看的投資資訊集合在一起 “

img

服務業
女生 31歲

“ 理財工具條款文字有時過於複雜,需要更白話 “

我的角色

> 問題洞察與發想解決方案
> 定義使用者需求
> 規劃功能的操作流程、wireframe
> 定義產品設計規範
> Mock up 設計 (進行中)
> Prototype概念原型 (待進行)

設計方法

> 問卷調查
> 人物誌Persona
> 問題困境/需求List
> 解決方案
> WireFlow - 操作流程、Wireflow
> 定義產品設計規範
> Mock up (進行中)

問卷調查

調查人數 22
女生 12 / 男生 10

img

年齡

眾數 28

平均數 32.73

中位數數 30

第一四分位數 27

第三四分位數 36

img

目前理財的總資金區間

五萬以下 31.8 %

五萬至十萬 27.2 %


目前或曾經嘗試的理財方式

主要:股票、基金、外幣

次要:期指、黃金、債券、保險、ETF

img

關注理財資訊或操作時,有過的困擾

No.1:怕賠錢

No.2:不知道什麼時候買進/賣出

No.3:無法隨時關注、不確定怎麼分配、渴望建議

img


我們把客群定義在25~35的小資上班族,並將三大痛點進行歸類,決定MVP的目標放在解決 "無法隨時關注" 上。

而怕賠錢、買進/賣出建議、理財分配建議等,因為需要更完整的數據分析,歸入後面階段調查後再進行。

定義使用者 / 客群特性

img

User Story


可以個人化自己感興趣的理財項目

需要能夠自動追蹤投資現況並即時提醒

使用者可以自己決定要不要投資

使用者需求

目標使用者

想自由投資的小資族

功能關鍵字

操作簡單、懶得思考


使用者目標

快速關注自己的理財

關注不同類型的理財

隨時新增、刪除理財項目

可以自訂進出場時機標準

自動的進出場時機提醒

功能關鍵字

快速關注自己的理財

統合股票、期貨指數、外匯、黃金的理財項目

分類及關鍵字搜尋、管理提醒

每一項目的進/出場時機設定

自動追蹤、到價提醒


使用場景

上下班、開會路上

早晨出門上班前

收到提醒時

功能關鍵字

分類清晰、方便切換、連線穩定

綜合資訊、快速瀏覽

重點項目資訊、一目了然

解決方法

自動追蹤投資項目的理財鬧鐘,簡單白話、清新、個人化

img整合理財項目

鬧鐘分為股票、期指、外匯、黃金四種類型,可以在類型下建立多個的鬧鐘

img設定提醒時機

每個理財鬧鐘都可以設定指標條件,由系統自動追蹤,達到條件時提醒使用者

img鬧鐘開關

不想收到提醒時可以關閉鬧鐘響鈴,進入App仍然可查看即時價格、但沒有到價提醒

img即時/手動更新

每次開啟App更新即時價格,也可按更新按鈕更新狀態

img

UI 設計原則

FinStep 以「簡潔的展示資訊」、「讓理財略帶有趣」為設計理念,因此所有介面元件及字串皆需符合以下原則:

1. 資訊及設計必須沈穩、簡潔,以清晰為最高原則,不可因追求絢麗、動態而降低清晰度
2. 盡可能以淺顯易懂、詳細的說明引導使用者,降低對理財不熟悉的焦慮感
3. 介面適時輔以插畫,以趣味平衡理財數字的正經乏味

img


色系識別

沈穩+有趣+簡潔

#3057D5

#3C6DF0

#FDBF5E

#FFE197

#EAEAEA

#313131

UI 展示

img
img

1. 依理財類別分類,清晰的呈現鬧鐘項目
2. 保持類別擴充性

img img

1. 以顏色、順序區分鬧鐘開啟及關閉狀態
2. 上漲下跌趨勢輔以顏色快速辨識

img

img

1. 選擇理財項目後,顯示趨勢資訊
2. 未選擇前明確提示狀態
3. 趨勢卡片與列表卡片一致,保持相同瀏覽方式

img img

1. 明確分類頁面欄位、並給予提示,降低上手成本

img
img

img

利用插畫搭配文字來引導步驟或說明,能提升理解力、同時也能讓使用者在情緒上更為耐心

img

其他設計過程

同理心地圖:了解使用者困境與心理
使用工具:Keynote

img

Flow:使用者操作流程
使用工具:XMind

img

WireFlow:規劃FinStep功能的操作流程 Flow、各頁面 Wireframe 及邏輯規範
使用工具:Adobe XD

img