客戶

東海大學 食品科學系

時間軸

2 month

角色

視覺設計
UI / UX

架設系統

Web Solution 後台系統

專案背景

東海食品科學系找我們團隊重新設計系所網站，但基於相關因素及考量該專案主要著重在規劃Landing Page及部分頁面架構，協助官網視覺優化

本次專案希望透過重新設計達到使用者體驗優化及資訊分類，讓使用者快速了解系所

瀏覽網站

https://www.foodsci.thu.edu.tw

目標🎯

提升網站使用率

節省資料尋找時間

快速找到未來發展機會

凸顯系所優勢，快速的了解系所

設計挑戰🔥

如何重新定義系所形象視覺

如何打造新的視覺形象？

如何強烈視覺吸引用戶瀏覽

如何透過強烈的圖像視覺吸引用戶瀏覽？

如何讓學生快速找到資訊

如何讓學生快速瀏覽網站並快速找到需要的資訊？

如何更快速的了解學校優勢

如何讓對學校有興趣的學生或父母更能快速了解學校優勢？

存在問題😖

原先網站的架構相當凌亂，資訊沒有被有效的分類與規劃

視覺設計傳統乏味，相對其他系所較沒有記憶點

同一個畫面同時出現太多不重要的內容，第一次瀏覽網站的使用者會不知道從何下手？

關鍵發現😳

1. 許多頁面需要層層被打開才能被找到

進入舊網站首頁，找資料就像是需要一層一層剝開選單，才能找到系所的特點，有時候甚至還會需要一個一個點開才會發現分頁位置

2. 系所優勢並沒有在網站呈現

沒有任何頁面或是區域在說明系所的特色及優勢唯一的圖片區出現在右上角的位置，不易被發現

3. 視覺傳統缺乏設計感

網站對於系所來說是一個形象

4. 色彩系統並沒有被定義及規劃

找出系所特點並賦予他色彩意義

我們的機會點？✍️

因專案有相關限制與考量，使用體驗設計僅規劃部分頁面

凸顯系所優勢

歸納系所對於學生的優勢後，將其資訊放置在容易被瀏覽及看見的區域

提升瀏覽吸引度

重新設計圖像視覺元素，透過視覺化的方式吸引用戶瀏覽網站，以減少資訊被忽略的問題，並認識系所的全新樣貌

瀏覽體驗優化

介面設計以單頁下滑閱讀為主，省下使用者四處尋找選單及功能位置的時間

色彩系統定義

重新設計網站的色彩計畫透過色彩讓網站更具吸引力

如何解決？🔧

凸顯系所優勢🥳

與學校方進行建議，將系所的五大特點 (食科系亮點) 統整出來，再用區塊的方式呈現

優勢會是招生的重點

在設計上我將「五大特點」 (食科系亮點)放在首頁第二區塊，讓用戶可以用最快的速度看見

第三區塊的規劃為學生進入學校的優勢，這是針對選填志願的新生及想了解學校的用戶破切想知道的

視覺設計上，我選用顯眼的色塊吸引用戶點擊並了解

提升瀏覽吸引度

在頁面視覺上我放上了視覺插畫，讓使用者在瀏覽網站時拉近與他們的距離

插畫給人一種正面友善的表現透過插畫的視覺吸引，引導使用者閱讀網站資訊，提升瀏覽的專注度

瀏覽體驗優化

以單頁下滑閱讀為主

省下使用者四處尋找選單及功能位置的時間

icon及區塊設計

在頁面中間有icon的設計，讓使用者可以更快速地找的自己要看的資訊為何

網站閱讀文字及點擊功能按鈕放大，讓使用者更直覺的操作

解決畫面資訊過於繁雜的問題

一個區塊以一件事情為主，讓使用者專注在一件事情上

Final Deisgn✌️

色彩系統定義與識別元件建立

這是視覺設計的元素，透過視覺讓網站更有活力與帶來視覺體驗

分頁Bottoms & Icons

Landing page
main bottoms

Illustration elements

我學到了什麼？😎

導入UIUX思維

這個專案並不像一般的UIUX專案來的那麼複雜及繁瑣，因為專案的限制及客戶的需求，我能做的就是盡量導入UIUX的思維，讓學校網站的體驗更好，提升網站為學校所帶來的效益

即便是微小的改善，終究能為使用體驗帶來巨大的改變

由於一些限制與專案屬性的關係，我能做的UX並不多，即便只有landing page及部分頁面，但是我仍然找到舊網站真正的問題並嘗試去解決它，這對我來說是設計好玩的地方我透過規劃資訊擺放的位置及歸納出資訊該如何呈現，才能讓使用者省下尋找的時間，很高興學校方也同意這麼做，最後的成果也跟我預期的一樣！我透過視覺的表現讓系所變得更有親和力，與舊網站相比確實改變了不少

無法真正做使用者測試

很可惜並沒有時間與機會去做A/B test，如果在能夠先做測試的話或許現在的介面規劃又會有所不同

當然，很開心我能為東海大學食品科學系來重新設計網站，我相信這會是一個很棒的經驗！✌️👋

other works