Home

About

Work

找工作頁改版

線上客服工具

職缺曝光版位設計

AI 自傳助手

518 熊班介面翻新

求職轉職潮活動

518 熊班介面翻新：年輕化的人力招聘平台

專案背景

518 人力銀行過去十年為無數大眾求職與企業媒合適才適所的工作日常，因應 00 世代將步入職場，我們希望更貼近市場，開啟品牌年輕化的序章。

定義問題

• Business： 產品介面較老舊，連帶影響品牌印象為較傳統與嚴肅的人力招聘平台，重新定義視覺風格展開品牌年輕化的翻新，更貼近市場。
• User’s pain points: 資訊樣式使用不當，有過多的顏色應用，造成操作引導有誤。

團隊目標

強化 518 熊班與產品介面的品牌關聯性，透過色彩、LOGO、IP 的綜合運用，提升辨識度，並追求翻新完整度，讓使用者一眼就能辨識我們。

專案挑戰

「如何在有限的時間內，將不可計量的頁面數進行翻新，並達到最大化？」

因產品歷程十幾年，並無完整的迭代紀錄與設計稿件，需要一邊製作、一邊盤點站台有哪些頁面，以及不曾迭代的頁面會有技術債，因前後端程式未分離，導致表現層的樣式不好改動，上線時程很明確，但須執行的範圍模糊。

執行步驟

1. 設計提案：Web、App 同步製作，保持介面一致性。
2. 視覺定義：定義品牌色應用，建置設計系統。
3. 盤點頁面：爬梳產品頁面，提升翻新完整度。
4. 開發執行：製作換色對照表，提供頁面比對示意圖。

設計原則

扁平化的風格

視覺風格明快、簡約，並降低大面積色塊使用，背景主要使用白色，並減少邊框線。

一致性的主色

不論溝通族群為求職端或企業端用戶，品牌視覺傳達用色一致，強化品牌定位與識別度。

設計系統管理

定義主色、輔色、中和色與功能用色，依循原子設計觀念建立基礎元件庫樣式。

親切的印象

介面增加 IP 角色 - 班班的露出，透過角色來引導操作，增添親切感與特色識別度。

執行過程

1. 拆分執行項目任務與安排權重層級

視項目的獨立性做拆分，如：不同的網站服務拆成 A-D 大項，依照頁面流量、會員接觸頁面的密切度安排執行優先順序。每個大項再往下展開執行任務，盡量讓單ㄧ個任務是獨立且完整的，意味著該任務可以獨立開發。

A. 518主站台 會員密切度高

A-1. 盤點頁面，安排優先順序。 A-2. 企業帳戶台因已換過色，調整產業判斷即可。 A-3. 全數頁面換色與 Logo、Favicon、og:image 替換。 A-4. 頁面資訊、文字、App Icon 替換。

B. EDM 會員密切度高

B-1. 盤點頁面，安排優先順序。 B-2. 企業 EDM，改為新版 MJML 框架切版與開發。 B-3. 求職 EDM，改為新版 MJML 框架切版與開發，安排優先順序。 B-4. EDM MJML 公版換色。 補充：因為舊的信件維護不易，故決定用 MJML 框架開發重做。

C. 職場人蔘

C-1. 盤點頁面，安排優先順序。 C-2. 全數頁面換色與 Logo、Favicon、og:image 替換。 C-3. AMP 頁面獨立 CSS 替換。

D. 好公司

D-1. 盤點頁面，安排優先順序。 D-2. 頁面資訊、文字替換。

在盤點頁面時，我使用 Google 試算表紀錄，以頁籤管理 A-D 大項目，再依序羅列出頁面，標示優先權，此表更可以直接做為當前執行進度的紀錄。

2. 制定 Color Variables，提升維護性

依網站上常用的基礎樣式，如：品牌色、主標、副標、強調字、內文、文字超連結、按鈕、提示、表單欄位等制定 Color Variables，提升設計與前端語言的一致性，並預先規劃好變數的命名規範，以因應未來迭代時更易於更新維護。

3.協助開發加速的設計稿件

因頁面眾多，且有缺漏稿件檔案情況，與工程來回討論後，了解到所需的交付內容為：「 ＯＯＯ 色碼要換成 ＸＸＸ 色碼 」。最終，決定依元件樣式來處理交付，盤點換色元件陳列出 Before＆ After 對照，讓工程可以方便抓取異動前後的色碼。

4. 對齊測試驗收標準

因網站經歷不只一次品牌規範色迭代，陳年下來已留存一些不在當前規範內的用色，增加替換上的細節難度，與PM協商此次顏色替換的最低檢核標準，能把以下主色換掉，即符合最低的翻新標準。

設計成果

設計系統

介面展示

關鍵成果

翻新完整度 翻新總頁數 600+

品牌辨識度 問卷調查中顯示，40% 註冊用戶對於「熊、簡單、桃紅色」有記憶度。 用戶回饋: 熊班的名字很好記、很年輕又有設計感、介面舒適、跟以前差很多、變不一樣，感覺不錯👍、畫面變漂亮、頁面操作起來很簡潔便利

反思與學習

• 團隊目標為優先 該專案我約投入 2/3 的時間於前端 CSS 色碼樣式的替換，以設計師的角色而言，內心私自會想盡可能把不符合規範的色碼都換掉，即便視覺實際觀看的差異近乎其微，但我意識到需要站在團隊的視角去想「翻新完整度」，同時面對隨時會有漏盤點的事項出現，嘗試在有限的時間內盡可能達到「有效的」最大化，保留彈性緩衝。
• 舉辦分享會，提出後續網頁做稿與切版時更好的做法 上線後，我在公司內部舉行了一場分享會關於「面臨品牌翻新，如何展開大型替換工程？」，輸出經驗給其他站台的設計夥伴，並從此次經驗提出後續網頁做稿與切版時更好的做法。

整體成果在團隊內收穫許多讚賞，也讓用戶看見更明亮嶄新、具品牌一致性的網頁視覺，令我感到開心與榮幸能參與到品牌翻新的過程。

On this page

• 518 熊班介面翻新：年輕化的人力招聘平台
• 專案背景
• 定義問題
• 團隊目標
• 專案挑戰
• 「如何在有限的時間內，將不可計量的頁面數進行翻新，並達到最大化？」
• 執行步驟
• 設計原則
• 扁平化的風格
• 一致性的主色
• 設計系統管理
• 親切的印象
• 執行過程
• 1. 拆分執行項目任務與安排權重層級
• 2. 制定 Color Variables，提升維護性
• 3.協助開發加速的設計稿件
• 4. 對齊測試驗收標準
• 設計成果
• 設計系統
• 介面展示
• 關鍵成果
• 反思與學習