Home

About

Work

找工作頁改版

線上客服工具

職缺曝光版位設計

AI 自傳助手

518 熊班介面翻新

求職轉職潮活動

求職轉職潮活動：找工作最強挑戰活動網頁

專案背景

每年春節過後即是求職市場轉換跑道的高峰期，趁著這波轉職潮，推出抽獎活動，吸引新求職會員加入，並透過品牌年度代言人的曝光帶動品牌聲量。

專案目標

與去年活動相比：

提升求職會員註冊數

提升APP日均下載數

專案挑戰

1. 如何在設計網頁時，預先規劃代言人的露出呈現？
2. 如何在有限的開發時間，增添網頁動畫的呈現？

設計過程

1. 概念與視覺元素發想

518熊班「找工作最強挑戰」發想四步驟：

Step1. 品牌印象 以品牌背景定位出發，為「求職網站」、「服務業職缺」。

Step2. 視覺印象 從品牌視覺印象著手，風格為「扁平化」、「色彩明確」。

Step3. 概念延伸 賦予網站概念，從核心主題「找工作最強挑戰」聯想為具角色情境感的闖關挑戰活動，延伸出「關主」、「服務業場景」的構想。

同時，著手收集 Moodboard ，延伸視覺元素，並搭配每一個關的角色情境，代入服務業的場景元素貫穿網頁。

2. 製作呈現代言人版位的拼貼粗稿

在還沒有照片素材時，為了要趕上代言人已敲定的拍攝日，要加緊構思好主視覺以及代言人在網頁上的佈局呈現，並將照片需求規劃到 shooting plan。面對這項問題，我嘗試在一開始執行 Wireframe 時，1. 找身邊同事拍攝合成、2. 直接到線上圖庫抓取人像素材，進行內部提案溝通。

以最終設計成果來看，前期的準備確實頗有幫助產出預期的結果，畫面構圖不需因代言人的定案照片而大幅度異動。

3. 導入開源動畫資源庫

此次在設計網頁時有先預期加上動畫效果的呈現，以往都要在 CodePen 逐一用關鍵字搜尋範例，這次我導入「 Animista —— 線上開源的 CSS animation Library」，大幅縮減查找範例的時間，在動態提案時能夠透過實際展示順利進行。

同時，CSS animation 對工程來說是比較簡單疊加動畫到網頁物件的方式，降低了工程開發負擔。

4. 交付網頁動態腳本

在動畫的交付上，由於同一個 Section 會有很多動態呈現，我透過將 Section 拆分影格的方式呈現動態腳本。並在每張影格依據視覺構圖描繪放射型的運動路徑，搭配色塊框選出每個影格出現的物件，備註上動態範例網址，清楚的提供給工程。

設計成果

由代言人揭示「找工作最強挑戰」。挑戰共分為三關，三個關卡各是不同的服務業情境，代言人身兼每ㄧ關的關主身分，分別飾演手搖飲店員、美髮師、餐飲廚師$\scriptsize\color{DarkGray}\textsf{[補充]}$，邀請大家參與挑戰。

[補充] 由於站上服務業職缺以餐飲業、美容美髮業等為大宗，故以此為依據設定角色造型。

歡迎直接到網頁上瀏覽：

518熊班最強找工作挑戰，APPLE 3C大獎送不完

518熊班迎來最強求職者邰智源，看邰哥用518熊班迅速找到工作，進行最強挑戰就有機會把apple 3C好禮帶回家，除此之外分享活動頁邀請朋友來挑戰，免費請你喝City cafe。

www.518.com.tw

關鍵成果

與去年活動相比：

求職會員註冊數提升14%

APP日均下載數提升36%

反思與學習

• 擔任設計主負責人，需擁有超群的同步即時能力。 這個專案是我首次擔任活動設計主負責人，將活動軸心的主視覺定調後，除了往下製作網頁設計，需同時與設計團隊更新設計進度，與釋出最新進度的設計原始檔，讓設計夥伴可以同時進行其他行銷設計需求，如：公車廣告、產品端的活動版位、行銷廣告橫幅等；另一方面，也須與行銷團隊溝通代言人的 Shooting Plan，把照片需求提供出去，並協助確認回收的毛片與精修照。這段過程所承接的壓力很大，需面對提案後的修改，修改後又得與協作夥伴即時更新與同步，我必須在很多訊息串往來中保持清晰。印象最深刻的是設計夥伴當時鼓勵我說：「不用擔心，你可以的！一步一步做就可以完成這些事項。」讓我保持正向與信心完成這個專案。
• 網頁動態製作經驗輸出，分享給其他團隊。 這次使用「 Animista —— 線上開源的 CSS animation Library」的成果獲得好評，在後續的網頁動態協作上，團隊持續以此製作與交付方式進行，我也將此資源與交付方式輸出分享給不同產品團隊的設計師，期望提升動態體驗。

$\scriptsize\color{DarkGray}\textsf{＊以上人物肖像僅供作品集使用，無商業行為。}$

On this page

• 求職轉職潮活動：找工作最強挑戰活動網頁
• 專案背景
• 專案目標
• 專案挑戰
• 設計過程
• 1. 概念與視覺元素發想
• 2. 製作呈現代言人版位的拼貼粗稿
• 3. 導入開源動畫資源庫
• 4. 交付網頁動態腳本
• 設計成果
• 關鍵成果
• 反思與學習