專案名稱

台科大職涯發展網優化

擔任角色

UX 設計師

專案時程

2018/12 - 2019/06

負責項目

優化前後台介面流程、使用者訪談

專案名稱

台科大職涯發展網優化

擔任角色

UX 設計師

專案時程

2018/12 - 2019/06

負責項目

優化前後台介面流程、使用者訪談

專案名稱

台科大職涯發展網優化

擔任角色

UX 設計師

專案時程

2018/12 - 2019/06

負責項目

優化前後台介面流程、使用者訪談

專案概述

專案目標

目標著重在改善「徵才活動」與「報名系統」的流暢體驗,除了優化視覺介面外,也優化前台網頁及後台管理系統。

專案挑戰

在短時間內完成前台網頁流程規劃外,同時也需要一併設計後台管理系統,上架後不斷測試並迭代介面流程。

合作與產出

我與 UI 設計師、PM、兩位後端及一位前端工程師合作。負責 UX流程規劃,成果為交付線框稿、介面流程圖、製作 Prototype。

成果及影響

大幅降低企業報名流程所需要的時間,從學生活動報名及校方管理系統得到良好的體驗回饋。

專案簡介

原網頁為「臺科履歷網」,新版改名為「臺科大職涯發展網」,此平台主要為企業徵才、學生求職、相關活動報名。因應徵才活動推廣與改善報名系統的流暢體驗,客戶期望能優化 舊有的整體功能並串連先前的資料庫,而網頁更新的部份除了視覺介面及整體的資訊架構外,在後台管理系統上也做了大幅度的調整。

專案簡介

原網頁為「臺科履歷網」,新版改名為「臺科大職涯發展網」,此平台主要為企業徵才、學生求職、相關活動報名。因應徵才活動推廣與改善報名系統的流暢體驗,客戶期望能優化 舊有的整體功能並串連先前的資料庫,而網頁更新的部份除了視覺介面及整體的資訊架構外,在後台管理系統上也做了大幅度的調整。

用戶訪談並整理痛點

網站使用者主要分為三種身份,1.學生、2.企業單位、3.校方人員,訪談後歸納出這三者角色在舊網頁執行操作與使用上的痛點。

定義核心優化功能

先將既有功能拆解後,再去評估每項功能的複雜程度並安排所需要設計時間。

收集使用者回饋後,初步由首頁開始,以介面資訊架構及瀏覽區塊做修改

整理回饋資料後,建議在舊網頁架構比較複雜的情況下,可以簡化重複性高的功能,並移除非必要或不常使用的功能,將重要連結放置在 Header,同時也完善介面瀏覽順序,把最新消息、企業報名、企業連結依序由左而右排列,讓首頁資訊在閱讀上更有層級之分。

職涯活動報名

優化學生活動報名介面

Before

Before

Before

校外實習

校外實習

校外實習

業師駐診

業師駐診

業師駐診
痛點
痛點
痛點

學生報名的活動頁面,列表未呈現重點資訊,每項活動都需點擊後才可瀏覽詳細內容或報名人數、報名狀態。

學生報名的活動頁面,列表未呈現重點資訊,每項活動都需點擊後才可瀏覽詳細內容或報名人數、報名狀態。

Redesign

After

After

After

整合重點資訊於活動表層

整合重點資訊於活動表層

業師駐診:以瀏覽預約時段及求職診斷項目為出發點,讓學生快速在列表上報名業師諮詢,如果想了解關於導師的相關資料可點選詳細內容。

業師駐診:以瀏覽預約時段及求職診斷項目為出發點,讓學生快速在列表上報名業師諮詢,如果想了解關於導師的相關資料可點選詳細內容。

職涯講座:職涯講座於資訊排列上呈現種要的活動資訊,包含日期、地點、主講人,同時也可檢視活動狀態。

職涯講座:職涯講座於資訊排列上呈現種要的活動資訊,包含日期、地點、主講人,同時也可檢視活動狀態。

徵才活動報名

目標 01

優化入口流程及提高資訊易讀性

Before

Before

Before

痛點
痛點
痛點

「校園徵才活動」與 「活動專區」點擊後,前往的頁面內容相同,而「校園徵才活動」內上方又區分博覽會與說明會,除入口重複外,內容上也不一致,易造成困惑。

「校園徵才活動」與 「活動專區」點擊後,前往的頁面內容相同,而「校園徵才活動」內上方又區分博覽會與說明會,除入口重複外,內容上也不一致,易造成困惑。

Redesign

After

廠商報名:按鈕樣式與狀態變化更能引導使用者快速點選並達到使用目的。( 效率 → 呼籲行為按鈕更能引導使用者點擊 )

廠商報名:按鈕樣式與狀態變化更能引導使用者快速點選並達到使用目的。( 效率 → 呼籲行為按鈕更能引導使用者點擊 )

首頁:下滑時可看到最新徵才活動,亦或是點選 Header「廠商報名」直接進入活動報名頁。( 改善 → 連結入口複雜與容易迷路的困擾 )

首頁:下滑時可看到最新徵才活動,亦或是點選 Header「廠商報名」直接進入活動報名頁。( 改善 → 連結入口複雜與容易迷路的困擾 )

企業報名:內頁以分頁切換為主,讓廠商能區分說明會及博覽會。( 整合 → 頁籤功能讓「說明會與博覽會」在辨別上更加快速 )

企業報名:內頁以分頁切換為主,讓廠商能區分說明會及博覽會。( 整合 → 頁籤功能讓「說明會與博覽會」在辨別上更加快速 )

目標 02

優化活動流程並提升易用性

優化活動流程並提升易用性

Before

Before

Before

痛點
痛點
痛點

一頁式報名頁面,除了填寫時要滑動閱覽冗長的頁面外,還需重新填寫一次專刊資料,使用流程上較為不便與耗時!

一頁式報名頁面,除了填寫時要滑動閱覽冗長的頁面外,還需重新填寫一次專刊資料,使用流程上較為不便與耗時!

Redesign

After

報名形式優化為步驟式填寫, 讓使用者在於報名時能清楚知道在哪一項報名環節,同時在有進度的引導下,用戶也會更快完成整個報名流程

預設填寫:先前報名都需重新填寫而過於耗時,因此改為預設帶入先前填寫資料,若中途需修改則以編輯按鈕另開頁面方式進行。

按鈕機制:因先前有多數用戶反應忘記報名而快速前往下一步,點擊「認確不報名按鈕」是為了讓業主親自確認不想參加該項目。

報名流程有多種可能出現的狀態,實作上我會以完整流程的說明圖來與內外部做更詳細的溝通

報名狀態變化與頁面流程機制

報名狀態變化與頁面流程機制

後台活動管理

後台活動管理

活動徵才管理

活動徵才管理

活動徵才管理

優化管理流程

優化管理流程

優化管理流程

活動開放:彈性開放活動細項以利管理員方便上架徵才活動,改善舊有一頁式較難管控的耗時流程,而每個活動開關也對應到前台的頁籤顯示。

搶位報名:因應博覽會先選號碼再選攤位的報名流程,特別針對博覽會完善二時段的內容設定。

搶位報名:因應博覽會先選號碼再選攤位的報名流程,特別針對博覽會完善二時段的內容設定。

系統寄信功能

系統寄信功能

新增寄信功能

新增寄信功能

列表上可選擇「統一寄信」或點選列表上的「寄信」圖標,原機制為系統發出固定信件,新功能改為由後台統一寄信外,也可單獨對廠商進行寄件,同時在處理不同廠商與學生報名活動時,可快速追蹤報名進度,不用額外另開信箱寄信。

後台管理在整體介面上也做了大幅度的調整,新的視覺設計也讓頁面瀏覽更加直觀,在點擊 CRUD 及其他元件上也更加清楚
後台管理在整體介面上也做了大幅度的調整,新的視覺設計也讓頁面瀏覽更加直觀,在點擊 CRUD 及其他元件上也更加清楚
後台管理在整體介面上也做了大幅度的調整,新的視覺設計也讓頁面瀏覽更加直觀,在點擊 CRUD 及其他元件上也更加清楚

專案反饋

這是我第一個參與的 UI/UX 專案,當時對整體流程還不夠熟悉,因此在專案初期的規劃中,確實有許多需要改進與學習的地方。像是報名流程、搶位機制、活動管理等核心功能,因為考慮不夠周全,上線後經歷了多次調整,也因此增加了工程團隊的開發負擔。

不過,正因為這是一個橫跨前台與後台的完整專案,我反而獲得了大量的實戰經驗。特別是在後台設計邏輯、功能 API 串接理解上,都累積了不少實用知識。這段經歷對我後續在規劃介面流程與思考功能運作上,帶來了非常實質的幫助,也成為我設計職涯中重要的養分。

Thanks for watching

Thanks for watching