我的 UX Design Review：用「易用性」觀念重塑我的跨領域設計作品集！<Landing Page 篇>

作品集網站背景

首先先來講一下我目前的作品集是如何誕生的，附上我舊的 Framer 作品集連結：Jerry Chu Design 2025

To be honest，設計過程異常艱辛。

這是我的第二個網頁設計作品，我是跨領域轉行的設計師。

在碩班沒有教怎麼設計網頁介面（只有基礎的 programming 課）。我從 2025 年 6 月畢業後一直修修改改做到 9 月，過程中換了一個平台（我原先是用 Wix），問了好幾個設計師朋友幫我 review 與找付費的作品集 mentor，自己研究 Framer 教學、寫設計流程、用 Figma 做示意圖，頂著在國外燃燒房租生活費的壓力好不容易生出來的個人作品集網站，真的不容易啊！（淚）

但抱持著作品集永遠不完美、可以迭代到永遠的心態（？）。我想要用兩本 UI/UX 經典的心得去重新審視自己的作品集，把它當成一個產品去不斷 improve!

Review Checklist

這次的 review 我把心力集中放在提升整體網站易用性、使用者體驗（UX）與設計系統上，我把兩本書的內容章節整理好，用它做了一個 checklist 檢查重點，如下：

使用者體驗 UX :

• 能有效解決目標使用者的痛點

• 定義清楚的資訊架構

• 設想優化使用者旅程

易用性 Usability :

• 利用約定習俗的傳統

• 建立有效的視覺層級

• 將頁面分成清楚定義的區塊

• 群組相近的資訊與內容

• 消除讓人分心的雜訊

• 讓可點擊的地方更明顯

• 精簡並格式化文字使其易於掃描

設計系統 Design System :

• 建立一個簡單有效的設計系統

• 維持設計的一致性

事前準備

首先讓我來定義目標族群、他們的痛點、以及參考的現有產品

我的網站作品集主要目的不是為了只存放自己的作品或是建立自己的個人品牌，主要是為了找到 UI/UX 的相關工作。於是乎我的目標族群非常清楚：獵頭、人資、以及設計招募主管

我設想他們的痛點並做假設：如果他們的目標是幫公司找到合適的 UI/UX 設計師，並且通常一個職缺來應徵的人有上百個，他們的需求是什麼？我的痛點假設是：無法快速有效的在短時間（30 秒到 1 分鐘內）了解所有應徵的設計師能力、個性、以及背景經驗去篩選合適的應徵者

根據這樣的假設，我的作品集的設計方式是建立在精準傳達我自己的優勢、個性與設計經驗上，模式比較像是一個乾淨有效的簡歷而非落落長的作品庫

參考的產品是這位國外 UI/UX 設計師 Moritz 的作品集：Moritz Oesterlau UX/UI Designer

準備好了來 review 吧！

Landing Page Overview

雖然這是我三個月前才完成的作品集，但現在一眼還是看到很多可以改進的地方，先從 Hero Section來說：

從 UX 的角度來想的話，整體來說似乎對於招募主管是不太友善的：

1. 右上的位置不是不能放我自己的名字，只是下方的副標無法立刻說明我是誰？我是做什麼的？我在找什麼職缺？

2. 導航列同時標示 UI/UX 與 Multimedia，讓人困惑我是來應徵哪一個職缺？我的優勢強項是 UI/UX還是 Multimedia?

3. Hero Section 缺乏與我聯繫的 Email 或是連結，增加聯繫我的難度阻力

4. 在 Hero Section 放的個人IP設計很有特色，但會讓人誤會我的優勢是角色創作而非UI/UX？和自己的職缺傾向缺乏清楚的連結

5. Call to Action 按鈕指向的是 About me，表示說這個作品集最重要的是我自己的關於介紹頁（裡面只有放了我的個人哲學、語言、技能等等），並非招募主管想要看的（我的作品、經驗、能力）

6. 同樣的，Call to Action 的按鈕顏色是純黑色，容易讓人誤會是不是不能點擊？如果不能點擊，那使用者進來網站後下一步應該做什麼？

接著往下滑，出現了兩個 Section：最近的 UI/UX 專案與最近的 Multimedia 專案

這裡同時出現了 UX 和易用性的問題：

1. 以 UX 的角度，在首頁放的一定是最重要的資訊，如果同時將 UI/UX 和 Multimedia 放在一起，很容易讓招募主管無法聚焦在我最應強調的優勢上（也就是我的UI/UX設計能力）

2. 易用性的問題上，每一個卡片過大導致需要一直往下滑才能看到所有的內容，如果一個 Section 放三個作品就會像是現在這樣只能看到一個半張的卡片內容

3. 卡片很可惜沒有強調得獎的作品，僅在圖片左下角貼上比賽的 icon，對於識別上不僅無法強調優勢、更變成一個分心的來源（擋到圖片）

滑到最下面，是 Footer 和 Copyright，也是 UX 小問題不少：

1. Footer 不像 Footer，比較像是 Contact。如果要做成 Contact Us 那 Email 必須要凸顯出來才不會讓人第一眼無法掃到

2. Contact 太窄太小，讓人很難注意到，而又恰巧聯絡方式又是解決使用者痛點的關鍵（與合適的設計師聯繫），在這裡無法體現它的重要性

   
   

Problem Statement

完成了 Landing page review，我的主要問題論述變得清晰：

「同時呈現自己的雙重技能（動畫與互動設計）讓自己角色無法專一、容易讓招募者困惑，最終造成整體作品集無法專注在針對應徵職缺傳遞自己的優勢」

身為一個剛跨領域的設計師，我當時其實還搞不清楚自己的定位以及我的優勢該怎麼去呈現。於是我選擇的方式是簡單粗暴：全部的作品都放上去吧！（笑）這就造成了現在這樣將 UI/UX 和 Multimedia 並列的情況

好吧！那就來優化它吧！

Before & After

網頁最重要的一頁應該就是 landing page 了，它代表了網站的第一印象，如果第一印象就是讓人搞不清楚這是什麼、覺得很難用、無法解決主要使用者（招募主管）的問題，那這樣可不好了！

(UX) 優化我的資訊架構與使用者旅程

首先要處理的是 UX 的優化，畢竟自己應徵的都是 UI/UX 設計與 Product 的職缺，必須要想辦法在作品集裡突顯自己的 UI/UX case study，以有效解決目標使用者的痛點：無法有效率的一眼抓住我的優勢與強項

Before：首頁太多會讓招募主管分心的 multimedia 資訊了

After: 強調得獎作品放在最上面（左）、讓 footer 聯絡方式更顯眼、直接了當（右）

After: 讓 Hero Section 針對應徵職缺做設計、去除不必要的資訊

我的 checklist 現在刪掉了三個選項：

• 能有效解決目標使用者的痛點

• 定義清楚的資訊架構

• 設想優化使用者旅程

下一篇我們來看 Project Page 該怎麼優化！
我的 UX Design Review：用「易用性」觀念重塑我的跨領域設計作品集！<Project Page篇>