公視之友
專案時程
2025/1-5
專案角色
UI/UX 設計
團隊人數
1PM、1 Designer
負責項目
UI/UX、工程交付
「公視之友」 是公共電視（PTS）重要的會員平台，讓喜歡公視節目的觀眾能透過捐款參與，實際支持公共媒體內容的製作。捐款成為「公視之友」會員後，不僅可以支持公視，也能參與各式專屬活動、索取節目票券，與公視建立更深層的連結。
此次網站改版希望透過更清晰的資訊架構與友善的互動設計，讓更多人能理解「公視之友」的理念與參與方式，進而提升捐款意願，擴大支持公共媒體的影響力。
專案背景
舊版網站在視覺設計與使用體驗上已不符合現代網站的操作習慣與審美標準，
資訊架構較為破碎、互動流程也不夠直覺，導致使用者在捐款與理解會員制度時容易產生困惑，影響實際參與意願。
因此，客戶希望透過這次網站改版，打造一個更清楚易懂、視覺溫暖且具信任感的介面，提升使用者瀏覽與操作體驗。
現有網站問題分析
設計目標
本次改版的核心目標是提升整體使用體驗，讓使用者能夠更直覺地理解捐款與會員機制，並順利完成操作。我們希望透過清晰的內容架構、整合式捐款流程與現代化視覺風格，傳達公視的品牌價值，同時強化使用者對網站的信任感與參與意願。
1
優化區塊邏輯與視覺層級，聚焦呈現公視之友介紹，讓用戶第一眼就能掌握參與方式。
2
在網站導覽中提供一致的登入入口，降低參與門檻。
3
以溫暖、穩重的視覺風格強化公視品牌形象，提升用戶的認同與捐款意願。
使用者流程優化
原先捐款流程中，使用者常在選擇捐款項目後感到困惑，難以確認自己目前所在的步驟，容易因為需要多次切換頁面而中斷流程。
因此，我將整體流程重新整理，將捐款行為拆成清楚的階段，
並在每頁加入能隨時查看的彈出式捐款清單按鈕，讓使用者隨時掌握自己的捐款箱。
設計挑戰與解法
需在既有後台資料結構下進行前台設計，前台表單欄位需完全依照後台欄位結構呈現，設計彈性受到一定限制。
同時，報名流程需因應不同會員身分與資格條件，顯示不同的填寫內容，使流程設計更為複雜。
我先確認所有會員類型與對應欄位，將表單拆解為「固定結構」與「條件式內容」兩個層級。 透過統一共用欄位的版型與視覺層級，建立一致的填寫框架；再依會員資格顯示必要的差異性欄位，使不同身分的使用者在操作上仍保有一致的流程體驗。
設計成果
依照主視覺，建立網站整體風格統一性
本次改版的視覺風格延續客戶提供的插畫主視覺，整體以親切、溫暖為主軸。為了呼應插畫風格，我們在字體選擇上搭配手寫體與圓體字，營造輕鬆且有溫度的閱讀體驗。
介面元件也同步進行風格統整，Navbar、按鈕與卡片元件皆採用圓角設計，建立一致性的視覺語言，讓整體網站更具親和力並強化品牌辨識度。
優化捐款流程，提升操作彈性與體驗流暢度
此次改版針對「我要捐款」區塊進行整體流程優化：我們在四個捐款類別頁（純捐款、回饋禮、定期定額、傳愛助學）之間設計了可即時切換的 Tab 介面，讓使用者能快速瀏覽不同捐款選項。
此外，右側新增「捐款箱」固定按鈕，無論在哪一頁都能即時點擊。並以彈出式視窗方式呈現，用戶能隨時查看已選項目，並在不離開當前頁的情況下快速關閉或修改，讓整體捐款過程更加彈性與直覺。
新增活動索票與報名功能，滿足不同活動需求
我們依據不同活動屬性，設計出三種對應的流程，確保操作既符合需求又保持一致性。
索票活動
在活動內頁即可點擊「索票」按鈕，填寫基本資料後，即完成索票。流程簡單直接，降低使用者門檻。
付費活動
付費活動則需在活動內頁點擊「報名」，填寫參加者資料並付款即完成報名。流程比索票多了一個付款步驟。
免費活動
免費活動的流程最為簡化，使用者在活動內頁點擊「報名」，填寫資料後即可完成，不需付款。
設計系統
學習與反思
這是我第一次獨立承接「具備電商流程」的網站專案，同時也需要與外包工程師密切合作。在這個過程中，我發現自己在設計系統的完整性與規範性上還有不足，導致工程師在切版時經常需要回頭確認細節，例如元件的狀態、邏輯的切換方式，甚至按鈕的互動規則。這讓我更深刻理解到：設計不只是畫面美觀，還需要透過明確的設計規範來縮短設計與開發之間的溝通成本。
雖然過程中遇到不少挑戰，但隨著專案逐步完成，我也累積了非常多的經驗。除了將設計稿更精準地轉化為可執行的規格外，也體會到跨角色合作的重要性——設計師需要站在工程師的角度思考，提前預判可能出現的問題，並在交付前做好設計系統與文件的完善。
