凱基投信官網
提供更方便快捷之數位金融服務
Duration
8 Months
Rule
UI/UX Designer,Interaction Designer
Scope
功能規劃討論、設計完稿
Team
Infopower
InfoPower Corp
┃Backgroud
近年來投資理財風氣盛行，網路理財的便利性也受到大眾的重視，因此希望透過網站改版讓使用者更便利的瀏覽投資產品，同時能獲得正確的理財知識。
┃Challenges and Objectives
-
需針對不同客戶分群提供個人化之內容。
-
除了一般網頁之樹狀結構配置外，為了讓流程更直覺順暢。特別思考在主要功能頁面之間的橫向串聯。
-
跳脫常見專業投資理財平台給人的設計印象，更平易近人好上手。
┃Website Design Trends
開始規劃設計前瀏覽多家投信銀行網站，蒐集分析設計元素風格、動態互動設計、網站動線規劃等，整理出共通性及特別處。
┃Competitive Comparison
蒐集比較國外投信銀行網站後，範圍縮小至國內多家網站更細部的功能，分析比較介面呈現及操作方式。
國內投信網站比較-設計面
國內投信網站比較-分類面＆功能面
┃Survey Results Analysis
透過問卷調查，針對投信銀行網站使用者的操作習慣 、使用動機等做調查，以下擷取六張主要作為介面設計參考依據之結果分析圖表。
1. 您平均多久至投信/投顧網站 ?
2. 您使用網路銀行的主要因素是什麼？（請選擇3項因素）
-
不使用
-
每月至少一次
-
每周至少一次
-
獲悉基金相關資訊
-
進行基金申購
-
能即時得知基金績效 / 能即時查詢庫存
3. 您最常使用的投信/投顧官網功能有以下哪些（至多選5項） ?
4. 您透過哪些管道得知基金投資相關訊息（複選）？
-
投資資訊網站
-
理財專員
-
銀行網站 / 親友
5. 投資基金管道 ?
-
銀行
-
投信顧問公司
-
證券公司
6. 您期待您往來的投信/投顧服務應增加（複選）？
-
績效優異基金通知
-
績效重大漲跌幅
-
快速登入 / 提供分析圖表
分析結果 :
-
56% 的人使用官網的主要原因為查詢基金相關資訊，37% 的人使用官網的主要原因為進行基金申購、贖回與轉換 → 合計 93% ，比例集中於基金交易相關，所以其他部分 (例如 : 基金投資教學 、投資目標試算等等) 的瀏覽率仍有很大發展空間。
-
56% 的人透過投信、銀行官網、資訊網站得知基金相關訊息 → 網站仍是主要投資資訊來源。
-
從期待增加的服務項目 (績效優異基金通知 / 績效重大漲跌幅 / 提供分析圖表) 中再次顯示出使用者對績效相關資訊的重視 → 在網站上包含績效資訊的各功能頁面，思考更好的介面視覺呈現與完善的操作流程。
┃Persona Study
網站目前主要使用者分群為約 50 歲以上已開戶客戶及已開戶法人窗口，加上希望開發之年輕潛力族群共分為三類
依據這三種類別建構的人物誌角色分析。
┃User Journey Map
由年輕潛在客戶和 50+已開戶客戶這兩組分群發展出使用者旅程地圖，配合使用者的動機、行為和心情，將使用者的痛點和接觸點流程化的呈現出來，透過更清晰的使用情境，思考如何透過網站內容的規劃設計，改善體驗不佳的節點。
┃Site Map
重新調整網站資訊架構，第一層分為七大入口分別對應其主要使用分群，
依據：1.問卷調查結果 (56% 的人使用官網的主要原因為查詢基金相關資訊) 2. 欲開發之年輕潛在客戶
將基金中心、ETF 專區、投資大哉問、服務中心入口連結配置在導覽列中間，其餘向兩側延伸。會員專區連結則和登入按鈕配置在畫面右側，滑鼠熱點區塊。
┃Landing Page Design Decision
首頁的設計規畫由兩個版本分別擷取優點融合，再加上可個人化設定排序的區塊及訂閱電子報 CTA。
V1 : 可以維持原有網站首頁資訊量，多利用點擊做切換使版面較集中
V2 : 將資訊量精簡，大區塊分類排列，透過點擊進入內頁獲取更多資訊
V1
V2
Final
-
年輕潛在客戶優先區塊為投資的知識觀點介紹及投資前需了解和準備的資料，按鈕連結至投資大哉問頁面，在投資前做好更完善的評估。
-
50+已開戶客戶優先區塊為基金的淨值列表和行事曆，按鈕連結至基金總覽可透過珍藏的基金類別，快速掌握投資表現。
-
已開戶法人窗口優先區塊為公告和投資觀點，按鈕連結至投資觀點，讓法人方便追蹤變革和投資策略方向。
個人化設定排序區塊
不同分群的使用者進入首頁後，可選擇身分角色，首頁排序會將相對應的內容區塊移至最上方，也可以透過按鈕直接進入主要使用頁面，不用再透過導覽列做尋找。
┃Wireflow
一、 2.1 基金總覽 → 2.2 基金詳情 → 2.4 基金比較
主要使用者 :
Design Features
基金總覽 :
-
欄位選項依照資訊類型分組，有效整理複雜資訊讓使用者快速切換瀏覽。
-
檢視選項加入我的收藏和最近瀏覽，提供個人化的篩選機制。
基金詳情 :
-
利用 Banner 區塊摘要基金的資訊，讓使用者快速掌握該基金績效重點。
-
Banner 區塊的搜尋框和下拉選單可快速搜尋其他基金或切換基金級別。
-
除用一般表格列出投資明細外，也利用圖表讓使用者更快速理解投資標的。
基金比較 :
-
透過分類列表自由加入欲比較的基金。
-
透過按鈕可進一步查看選入的基金詳情，並方便做標的的移除或加入。
-
提供投資金額及投資區間快選按鈕。
-
卡片模式有別於一般表格，提供視覺化圖表，讓使用者快速檢視單一基金在一段時間內的發展過程。
Web 版
Phone 版
二、 4.1.1 基金投資大哉問 → 4.1.2 人生目標試算 → 4.1.3 投資屬性評估 → 4.1.4 基金投資試算
Design Features
基金投資大哉問 :
-
把常見問題列表依照投資階段、投資角色、投資目標做分類，讓使用者更容易找出符合投資狀態及投資經驗的問題。
-
了解問題後提供快速連結至投資前會需要的人生目標試算 (清楚投資的目標)，和投資屬性評估 (了解風險承擔程度)。
人生目標試算 :
-
從人生階段和目標開始，先用較容易選擇的問題一步步帶入投資目標試算的設定。
-
提供投資金額、投資年限及報酬率快選按鈕。
-
完成試算後提供快速連結至投資屬性評估 (了解風險承擔程度)，替開始投資做好準備。
投資屬性評估 :
-
利用問答形式及浮動動畫，增加填寫的互動性和趣味。
-
在評估的結果頁下方呈現風險等級，並對應可投資的基金列表。
-
透過列表得知可投資的基金資訊後，提供快速連結至基金投資試算，進一步透過試算檢視欲投資之基金是否符合目標規劃。
基金投資試算 :
-
針對單一特定基金試算報酬率，提供投資金額、投資期間快選按鈕。
-
透過目標金額試算，更清楚需要投入多少資產，幫助規劃投資計畫。
-
單一特定基金試算結果頁提供快速連結至該基金的詳情頁，更全面的了解該基金。
-
目標金額試算結果頁會依據報酬率給予投資屬性建議，並提供快速連結至精選基金頁，讓使用者有初步投資方向。
主要使用者 :
Web 版
Phone 版
┃High-fidelity Prototype
一、 2.1 基金總覽 → 2.2 基金詳情 → 2.4 基金比較
這部分流程著重在大量文字或數據資訊的呈現，所以較多表格的樣式變化，列表和卡片模式的切換。在配置版面時需思考資訊的分類重組讓流程更順暢。
主要使用者 :
二、 4.1.1 基金投資大哉問 → 4.1.2 人生目標試算 → 4.1.3 投資屬性評估 → 4.1.4 基金投資試算
這部分流程將問答、評估、試算串連在一起，透過統一風格的微動畫及畫面轉場，步驟化的引導讓使用者一步步完成自我的評估，訂定更明確的投資目標。已開戶使用者也可個別進入這些頁面進行評估試算。
主要使用者 :
┃UI Kit
-
以企業色藍色為重點主色運用在文字、標題等，橘綠為重點標示色運用在按鈕啟用、hover 狀態。
-
由藍橘淡化的淺主色，運用在表格及區塊背景分色。
-
多使用圓角按鈕，營造較年輕活潑、友善好上手的形象。
┃Mockup
┃Reflection
-
這次專案內容為自己較不熟悉的基金金融商品領域，因為缺乏相關經驗，所以設計前期做了許多資料蒐集、案例分析。也學習透過人物誌、使用者旅程地圖、訪問周遭使用者等方法分析整理，再加上問卷的量化調查，讓自己有較完整的了解，進而歸納出 Insight 並透過設計嘗試解決問題。比較可惜沒有包含基金購買流程及後續追蹤的部份，是聚焦在前期的資訊獲取階段。
-
設計過程中思考的除了基本的易用性原則，整體操作順暢外，更希望創造超出使用者期待的驚喜瞬間，像是預期下一步操作配置按鈕連結，提供可能會感興趣的相關資訊推薦等。
-
在視覺元素的呈現上，希望有別於專業金融平台給人沉穩專業但較無趣的印象。色彩上除了品牌主色外，利用頁面的 Banner 圖片營造貼近生活的情境意象。也因為自己是定位在年輕潛在客戶，所以在許多部分 (投資大哉問、新手理財相關) 使用較多微動畫呈現手法，讓探索過程更活潑容易操作。
