職缺曝光版位設計
Work Scope: UI Design
Tools: Figma, Miro
Company: ADDcn Technology Co., Ltd
Duration: 4 weeks (2022.04-2022.05)
專案背景
518 熊班的自媒體網站「職場熊報」月流量平均 140 萬，期望能將其流量導流到518 熊班，提升職缺應徵率。
定義問題
職場熊報主題式的職缺撰寫文章，其內文中帶的職缺連結，點擊率為 2%。但需要由編輯人工撰寫，曝光量體有限。
![[fig1] 內文中的職缺引導連結示意](https://ruuuchen.github.io/portfolio/img/selfmedia/fig_Before-職缺文章.png)
HMW Statement
HMW：「我們可以如何在內文間，創造職缺曝光版位？」
Design Solution-1：優化內文模塊的排列
設計過程
向編輯詢問得知隨著頁面往下滾動，用戶留存率越低，普遍在第三屏後就會離開該頁。從現況頁面的 Layout 觀察，第一段的圖文下方有機會點可以安插曝光版位。
![[fig2] 職缺曝光版位預計位置](https://ruuuchen.github.io/portfolio/img/selfmedia/fig_版位預計位置.png)
另外，從現有的畫面可以觀察到內文模塊隨著編輯的使用需求會有各式排列組合，由於當初設計規劃不夠完善，而導致視覺呈現不佳，影響閱讀體驗。
![[fig3] Before-模塊排列的間距問題](https://ruuuchen.github.io/portfolio/img/selfmedia/fig_Before-模塊排列的間距問題.png)
於是先了解內文區塊會有的物件，如：<h2>、<h3>、<p>、<img>、<iframe> 等，其相鄰上下物件的呈現規律，並與編輯確認撰寫文章的格式是否有既定原則，如：文上圖下等。
![[fig4] 梳理模塊呈現上下規律](https://ruuuchen.github.io/portfolio/img/selfmedia/fig_梳理模塊呈現上下規律.png)
設計成果展示
我依循 1x、2x、3x、4x 的方式設定間距，讓間距也具備規律性。
![[fig5] After-制定模塊內距](https://ruuuchen.github.io/portfolio/img/selfmedia/fig_After-制定模塊內距.png)
![[fig6] After-優化後的模塊排列呈現](https://ruuuchen.github.io/portfolio/img/selfmedia/fig_After-優化後的模塊排列呈現.png)
![[fig7] After-職缺曝光版位呈現示意](https://ruuuchen.github.io/portfolio/img/selfmedia/fig_After-職缺曝光版位呈現示意.png)
Design Solution-2：職缺曝光版位設計
Version 1
![[fig8] Version1-職缺曝光版位設計](https://ruuuchen.github.io/portfolio/img/selfmedia/fig_Version1-職缺曝光版位設計.png)
成效如下：
點擊率 0.04%、應徵率 0.2%
Version 2
推測 Version 1 點擊率差的原因可能為，職缺不夠顯眼、推薦內容不符合。故針對視覺呈現進行以下設計調整：
- 用色：主色系採用紅色，取代原本偏冷靜的藍色，增添積極、熱情的感受。
- 文案：標題加強跟用戶的關聯度，口語化的文案並增添 emoji，提升親切感。
- 規格：以知名企業為主曝光旗下職缺，透過品牌 Logo 的呈現提升職缺吸引力。
![[fig9] Version2-職缺曝光版位設計](https://ruuuchen.github.io/portfolio/img/selfmedia/fig_Version2-職缺曝光版位設計.png)
成效如下：
點擊率 0.05%、應徵率 0.2%
後續建議
設計的調整並未帶來顯著的成效影響。關鍵原因便為目前曝光的職缺，推薦內容不符合用戶預期，導致點擊率不佳。
建議後續可以調整職缺推薦的機制，如：
- 透過會員行為推薦職缺內容。
- 透過瀏覽器定位 IP，推薦相近地點的職缺。
Credits and thanks to:
Enther Wu, Design team Eason Lin, Engineering team Dolly Lin, PM team