Stock Product for App / Web Devices

專案名稱：Stock Product for App / Web Devices

執行時間

• 2023

個人負責項目

• UI / UX 設計師

產品影響力

• 獲得A輪募資

• 使用者約為70萬人

• 除了看股也能發展以股票為出發的社群交流

專案成員

UI / UX 設計師 x ２

PM x 1

前端工程師 x 1

後端工程師 x 1

Persona

根據抽樣2,000份問卷訪談，擬定出目前客群／淺在客群訂定出產品Persona分別為

1.有一年以上投資經驗，有初步投資方法及策略，願意且有需求自學相關知識

2.有五年以上投資經驗，並有明確的投資策略，對於投資工作效率/協助彙整資訊工具有強烈需求

解決問題及功能設計

解決問題-優化關注清單頁面

頁面介紹：據GA顯示，使用者停留在此功能頁面較其他頁面多出40%，訪談中使用者最常用到的功能也是關注清單，因此首要任務著重為優化此頁面。

發現問題：進行訪談後使用者最在意的股檔清單要素為“即時性” 和“便利性”，按鈕“更新選股清單”，原為使用者使用頻率最高的按鈕，而如果使用者要移除選股條件，必須先點擊“設定/編輯”按鈕，進到內層才能操作，路徑不符合操作認知。

解決策略：設計策略決定將“更新清單”按鈕移出框外，顏色改為主要按鈕顏色，並新增時間資訊，將“設定/編輯”按鈕合併為編輯條件，加上“移除條件”按鈕，使編輯和移除為同一層級。

關注清單頁面原版＆新版

解決問題-優化選股頁面

頁面介紹：為關注清單中的內層，提供使用者按照網站策略，或想觀看的層面選擇類股，

設定完條件，得到篩選結果後可以儲存為自己的清單，隨時觀看其中個股的變化，也可以設定為公開，供其他人追蹤此清單。

發現問題：選股條件中，每種類股的標籤數量為3x9個，在desktop＆tablet版選擇標籤後無法即時看到已選取的類股，需要手動往下滑才能看到頁面即時變化，經易用性測試發現此行為延長了使用者於此階段的操作時間，甚至導致使用者困惑而離開。

選股條件原版

解決策略1：將類股的標籤數量改為3x4個，並將已選取的標籤改為同色，避免過多顏色視覺失焦，在點選標籤後狀態為active，調整為再點擊一次回到default，不用再到已選取區域按x刪除，增強使用者的操作直覺性。

以及將“更新清單”按鈕移出框外，顏色改為主要按鈕顏色，並加上使用者在意的新增時間資訊，並將“設定/編輯”按鈕收斂為編輯條件，以及新增“移除條件”按鈕

選股條件改版1

解決策略2：另外將“建立選股清單”按鈕從結果最底部拉出到結果的上方，並和表頭一起固定，並增加篩選中的動畫(至多三秒適用)，讓使用者即使篩選類股結果過多，也不用拉到最底部才能建立為清單，降低過程的離開率，增強使用者體驗。

選股條件改版2

關注清單-新增股票至自選清單

功能設計：欲“使單一個股”(可複選)和“整張選股清單”都能加入至自選清單，原加入方式皆為下拉選單。

設計與決策：將“單一個股”和“整張選股清單”的加入都改為modal內以核取框選取動作，讓使用者動作一致化，降低學習成本。

關注清單頁面原版

關注清單改版

學院頁面

頁面介紹：綜合所有使用者的觀點，以及達人的課程及活動，讓使用者在研究室之外也能額外取得其他資訊，也希望藉由追蹤模式來打造一般使用者與達人之間的互動閉環，並讓一般使用者藉由分享自己的股票策略，也能登上追蹤排行榜，獲得特別的標籤。

設計與決策：綜合部落格和幣安金融清單等追蹤以及收藏模式，篩選出必要元素，以卡片式方式收納單一使用者最多資訊，可使用 Tag 篩選出想看的資訊，進一步追蹤後，對方若有更新文章或清單會在系統內通知使用者，RWD 除參考競品外，更需因應金融產品的使用者習慣，設計完快速地做測試，產出因應不同裝置的頁面再進研發階段。

學習與發現：卡片類型的設計雖然常使用到，在能讓使用者自行上傳資訊的前提，除了考慮圖片一致性外，首次設計金融產品，訂定文字的最極限化狀態。身為UI/UX設計師的我，須從產品定義出發，不斷和PM及企劃討論，除決定基本資訊外還有如何讓一般使用者也想發佈自己的資訊，增強黏著度的操作模式也很重要。