最近如果有拜訪 Yourator 的朋友們應該不難發現，在今年我們推出了許多重大更新！如果常用手機瀏覽 Yourator 的朋友，可能也會默默發現：咦？在 Yourator 好像比較不會迷路了 ?
也許大家不一定會有明顯的感受，不過對 Y 社的團隊來說，每一個改動意義都相當重大，代表我們正一步步地往目標「提供更好的職涯發展服務」前進！
接下來我們想透過這篇文章，回顧一下這段時間的開發過程，有興趣的朋友，請一起看下去吧！也歡迎在閱讀文章的同時到 Yourator 網站中，看看你能不能發現我們說的是哪些更動唷！
改版契機
Yourator 很重視使用者的回饋，除了長期在投遞流程結束後的頁面蒐集回饋問卷，也會收到許多客服夥伴反應的需求。將問題歸納整理後，可以觀察到多數求職者對內容查找的流程感到困惑，甚至是找不到「開始查找資訊」的入口，造成使用網站的意願降低。
另外，在重新對焦「使用者真正的需求」與品牌的「商業價值」後，我們規劃調整品牌的走向 — 除了職缺和企業的資訊，期望提供更多元的內容和服務，轉變為陪伴大家成長的角色，成為職涯發展的領導品牌。因此，我們需要讓不同的求職者可以「優先看到自己最需要的資訊、適時適地的引導」，以提升對服務的黏著度和信任感。
問題定義＆解決方向
總合以上，我們定義了幾個大問題
- 「首頁」久未翻新，且呈現內容與方式需要更新
- 「手機版的導覽列設計」，常常誤導使用者並混淆使用者的認知，造成使用者體驗下降
- 「搜尋」的需求日益增加，現有的搜尋方式與使用者初始目的不符
以上的功能或使用者體驗優化都是不小的工程，也都是環環相扣的，接下來讓我們來看看如何再更細部拆解這些問題，並找到對應解法。
1. 首頁內容呈現優化及風格的翻新
從上一段列出的問題可以發現，蠻明顯共同的匯集點就是「首頁」。Y 站首頁在過去幾年一直未有大幅度的更新，呈現內容的方式未調整，視覺感受上也較中規中矩且有設計不一致的地方。而首頁不僅是影響使用者對品牌好感度的關鍵，也很大程度地左右他們想要進一步使用者這個服務的意願，並且隨著使用時間/頻率的上升，使用者會更希望能不費力地看到自己感興趣的內容。
因此我們將此產品開發的目標定位在「讓各種情境下使用 Yourator 的使用者能接收到需要的內容，並吸引他們註冊」。考量到資訊的重要性及商業推廣上的必要，我們重新設計了：
- 內容呈現方式與順序，改變推廣區塊(例如：職涯專區與熱門職缺)的呈現方式
- 增加了不同的內容區塊，呼應現 Yourator 其他服務 例如：Podcast 職涯旅行家，期望滿足使用者的各面向求職需求
熱門職缺區塊 — 增加職缺數量，讓職缺多多曝光
品牌內容區塊 — 整合不同類型的品牌內容
在此次改動中也大幅度的更新首頁視覺與風格，定義出設計系統，讓設計更趨於ㄧ致，同時讓已默默現身的 Yourator 吉祥物「海爾咪」正式於產品上露面ＸＤ。與此同時針對不同階段、於網站不同區域的使用者，給予不同的提示訊息，例如未登入的使用者，優先呈現平台特色以及吸引註冊的區塊，而對於登入後尚未填寫履歷的使用者，則會優先引導製作履歷。
2.手機版導覽列資訊架構調整
手機版除了有 RWD 設計同步更動了首頁改版外，最大的改動就是常常被人詬病的導覽列了。原本的導覽列出現位置以及出現時機，實在大大地降低使用者體驗，並且常常造成使用流程的中斷。
例如 : 舊版上方的 公司/職缺/專欄 導覽列，常駐在上方，並不會隨不同情境適時出現，造成使用者誤會以為點擊後會呈現現在瀏覽的該公司職缺或專欄。
因此我們重新調整了 Tab 的命名，改為較明確的「動詞」形式，例如「找公司」取代了「公司」，暗示使用者點擊後能遇見的結果。在其他非主要頁面中，隱藏這個通往主要列表的導覽列，改以 Tab 引導使用路徑，例如：在目的較單一的資訊頁面內，如公司頁，資訊較多且細，使用 Index Tab 切分「公司資訊、公司福利、目前職缺」，幫助使用者更快速的找到想要的資訊。
3. 滿足更廣泛的搜尋需求
初期的 Yourator 是以 「內容策展（Content Curation）」 為出發點，透過大量展示圖像的方式，將優質的職涯資訊，以及富含企業文化的特色內容，呈現在求職者面前，讓大家在開始埋頭尋找適合的職缺之前，可以先看到大量有趣的企業內容 — 相信這也是許多人剛認識 Yourator 時，會覺得它與過往的求職平台很不一樣的因素之一(自己講ＸＤ）。
然而這樣的設計有個小缺點，便是「當使用者帶著搜尋職缺的目的，進來網站時，注意力容易被分散」。過去，搜尋功能分別散落在各個主要內容的列表頁中，雖然可以更精確的幫助使用者篩選關鍵字、過濾內容，但也因為功能藏得比較深，對使用者來說不夠直覺。
在本次的改版中，我們在首頁以及 Navbar 都增加了「全站搜尋」的功能 — 讓使用者不論在網站任何頁面，皆能輕易的找到搜尋的入口。分述如下：
- 進入首頁即可搜尋，並提供熱門關鍵字，提示使用者「近期搜尋趨勢」作為參考
- 常駐在右上角，隨時可以使用
- 搜尋結果頁可以一次看到相關的職缺、公司、專欄內容
透過以上功能，結合之前推出的職缺推薦功能，在投遞流程中的各階段(職缺頁、投遞完成頁面)皆有個人化的資訊推播。讓不論是「一進來不確定要搜尋什麼」或是「有明確搜尋目標」的使用者，以及「瀏覽 / 投遞職缺等動機較強烈」的使用者，都可以在適當的區塊獲得所需要的內容。幫助使用者在瀏覽網頁資訊的過程中更加順暢！
設計過程中的小細節及趣聞
因為意外的設計，創造了新的設計風格
當初因為想要優化熱門職缺的呈現方式與數量，以及增加職涯專區的推廣與點擊，同時希望使用者一眼看到該職缺或專區是否為自己想要的資訊，而非當成廣告略過降低觸及，在嘗試的過程中意外的設計了現在的 Tab 風格，也符合我們的設計目的，兩位設計師越看越尬意。但總覺得跟不久前新定義的設計系統的卡片風格不太搭，造成整個頁面有種不和諧感。由於卡片在新舊頁面裡都會出現，為了能夠在版本過渡期不過於跳 tone，因此我們嘗試了許多不同風格的設計與新的設計系統，最後迭代設計出了現有版本。更改不適宜設計系統需要很大的勇氣，我們也在這次過程中跟梁靜茹借了很多ＸＤ
感謝工程師夥伴們的大力加持～～
在製作上述的 Tab 互動時，為了創造合理的 Hover 與 Clicked 效果，兩個設計師和兩個工程師湊在桌子旁，討論 Default 狀態的 Tab 所在的 X 軸起始點，為了讓 Hover 有抬升的效果，必須往左上移動 1px 的實作方式。當時內心突然有種「難道這就是一種 Pixel Perfect 的體驗嗎？」的領悟，看著努力的夥伴們暗自覺得有點感動。
頁面的捲動體驗遇到挑戰
另外分享個小故事，在手機版開發完成進入內部測試，正要上線時，發現首頁上下、左右捲動的操作容易被限制在單個方向，往上滑就無法轉彎往左右，往左就無法轉彎往上下，帶來一種「使用者無法掌握操作體驗」、「需要很費力才能捲動並瀏覽內容」的挫折感。後來經過不同部門的夥伴們一起幫忙測試，並努力體會挫折感的來源，最後將上下捲動和左右捲動的判定放寬，讓使用者可以更輕鬆地完成瀏覽。
結語
在這次的改版里程碑中我們多了還個延伸任務，我們發現了註冊完畢到建立履歷的流程似乎在 Y 平台上產生斷點。目前相關的新註冊流程與登入優化的設計還在開發中，想知道我們怎麼改善這個流程的朋友，歡迎隨時回到 Y 站看看哪裡出現了新變化～
謝謝一直以來不吝提供各種建議給我們的使用者，你們的回饋我們都有收到，也會定期進行討論排程進開發方向。希望這些更新的內容能夠實際幫助到大家在求職路上更加順暢，未來我們也會持續優化 Yourator 平台的求職體驗！
➤ 如果想聽聽兩位 UI/UX 設計師親身分享，請收聽 Yourator Podcast 《 Y 社日常》
相關閱讀：
