【永豐銀行】永豐員工投資退休平台|永豐多元信託 X 攜手企業成長
股票信託
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/04fa4abce0234d6a492b7440.png)
01
OVERVIEW
案例背景:勞雇雙贏,用畫面經營
此網頁是為永豐銀行的股票信託服務製作,股票信託是讓公司用以激勵員工表現的一種信託服務,共分二種,一是公司股票上市前員工認股,二是限制型股票,像是業績獎金,獎金本身是以公司的股票為單位。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/a5af033d05a915d4eb719705.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/78a0d0d842987eff2b31d830.png)
開發重點
本專案TA為是公司的HR、財務、雇主,網站需以插畫包裝複雜的股票信託概念,並強調股票信託「與員工共同儲蓄、投資能為公司帶來好處」的特點。
1. 故事性插畫風格
2. 使用者情境切換
3. 小動畫增加畫面豐富度
02
FEATURES
主題規劃
股票信託中的「限制型股票」其概念猶如與公司共同簽訂對賭協議,因此在股票信託的頁面設計時,我們的設計師將「合作構築」的比例降低,更多的是呈現「共同探索」,雇主與員工一同開發陌生領域,於是構成了「外太空」的主題概念,共同探索、開採各種星球上豐富的資源。打造出兩位主人公「共同付出,共同獲得」的美好結局。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/dbe14c8a47d15b59fc1ab401.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/f860d1091ffc281e334ee368.png)
資訊結合主題呈現
股票信託又分兩種,一種是公司股票上市前開放員工認股的機制,另一種則是「限制型股票」,像是業績獎金。我們將這兩種方案比喻成兩艘不同功能的太空船,巧妙地把商品資訊融入外太空的主題中。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/01/04/9f403d014a45a506c61831ad.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/01/04/4782974fae66854e1307c044.png)
視覺線條延伸引導
在網頁的每個區塊間以虛線作為連結,不僅暗示著網站動線,更暗示著旅途尚未結束,讓使用者閱讀不間斷。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/01/04/d4c6e8da7af5f21773f068a6.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2024/06/17/ba270fac3b19cdcf9d1c3538.png)
卡片細節設計
我們針對網頁中重複出現的卡片元素做不一樣的細節調整,包含卡片角落的副標、知名品牌角色星球化等,讓整個網站更有一體感。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/01/04/a5e1e7d97ee39f619788d13b.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/2cdc0bd7bcd6a4a544b5df4d.png)
03
DESIGN
設計規範 UI GUIDE
色彩計畫
設計團隊將本次行銷主視覺設定為「外太空」,因此,網站中大量使用帶有神秘色彩的深藍色、藍色,並以永豐銀行的標準紅色作為點綴色。
在不同使用者主題方面,採用較為清爽的淺紫色與黃色作為對比搭配,除了可以區分不同主題外,也增加整體網頁的清爽感,讓使用者可以閱讀時可以更加輕鬆。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/01/04/b1eaa456c622e62b78f59d91.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/01/04/6f5a22d26d474fa5ebd800dd.png)
字體計畫
網站中的標題字體採用justfont明黑融合的金萱字型,明體的優雅與黑體的剛硬融合,恰好適合結合插畫與企業資訊的網站調性。網站內文則是常見的思源黑體,保留資訊的易讀性。
本網站目標族群多以關鍵字著陸為主要來源,因此,開發上我們使用串接API的方式在網站上呈現特殊字體,讓特殊字體也可以被搜尋引擎快速爬取,把握SEO流量。
介面元素
結合網站主題的 Icon 設計
輔助資訊呈現的icon,我們選擇使用太空人、火箭、星球等元素,讓充滿心思的小細節也緊扣主題。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/01/04/41c092298ff9b798b059daa9.png)
04
Illustration
插畫設計結合小動畫
此專案中我們將插畫效果最大化運用,簡單動畫讓整體網頁更加活潑,為嚴肅的投資理財增加不一樣的氛圍。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/10/00e17e15f23594e134e246cb.gif)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/10/88a3385a5b8b9b5c175ba64d.gif)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/10/c9e7542c61d09cff9132609c.gif)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/10/b979687a545ad37e8e11b4ad.gif)
05
REVIEW
更多頁面
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2024/06/17/268997351d4bca7d7b892448.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2024/06/17/f311590cafc5895b4a847135.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2024/06/17/6b5b29dc5e4a92d41c942429.png)