世新大學資訊傳播學系110級畢業專題—界限之專題網站，用以傳達如何以不同方式宣導性別平等的不同樣態。
ROLE
UI/UX Designer
TYPE
Website
DATE
2024/3 ~ 2024/12
挑戰
事前調查
在初期階段，為了了解大眾對於性別平等的了解以及找出潛在受害者，於是我們透過社群媒體發放問卷，並透過以下幾點問題來了解。
是否了解性別平等教育法中對性騷擾的明確定義？
是否可以舉出性騷擾具體例子？
提供四題情境題（由原始案例改編），供答卷者判斷嚴重程度 1 是最低 5 是最高。
是否有經歷過疑似性騷擾的經歷？若有願不願意接受進一步訪談？
共收集到 124 份有效問卷，年齡區間 18~25 歲，其中有 41 人有經歷過性騷擾的經歷，佔總人數 1/3，而在情境題判斷當中大約 70% ~ 80%的人能夠正確判斷。
也收集到 5 位受訪者願意接受採訪，其中有一位認為自己可能有性騷擾人（加害者）的經歷，我在進行訪談後整理出以下幾點。
性騷擾樣態的普遍性： 性騷擾樣態不僅限於異性之間，同性間的騷擾、發生在公共場所的陌生人騷擾（如偷拍、跟蹤、不當碰觸），以及校園/職場中熟人间的言語調戲或肢體界線侵犯等，受訪者皆有所提及。
對受害者的潛在影響： 訪談過程中，受害者也簡述了經歷所帶來的不安全感、對特定人事物的排斥，以及情緒上的困擾。
認知差異的初步顯現： 而訪談疑似加害者，可觀察到對於「玩笑」與「騷擾」的界線、行為當下的意圖與接收方感受的權衡等議題，存在不同看法。
對於這個擁有廣大面向的議題，我與團隊不斷腦力激盪，提出各種不同的想法，最終我們決定推出三個不同的加值產品：網站、桌遊、Podcast，用以解決不同面向的問題。
網站：用以達成展覽數位化以及讓大家初步認識法律上的明確定義、性平故事等等
桌遊：透過遊戲性的方式，讓大眾認識不同方的論點，旨在提高大眾的性平觀念。
Podcast：與專業人士對談，讓經歷過性騷擾的人能夠透過 Podcast 找到抒發點及安全的傾訴管道、明確的應對指引、情感支持與同理、專業的法律或心理諮詢資源、重建安全感與人際界線的方法。
性平議題該如何推廣
如何將抽象且可能被視為艱澀的性平議題，轉化為容易被接受的形式？
如何設計內容，讓不同背景的人都能共鳴並參與討論？
網站該怎麼設計才好
如何讓內容清晰易懂，避免過於艱深的專業術語？
如何優化使用者體驗，確保網站操作簡單、不讓使用者感到困惑？
如何呈現多樣性內容，讓使用者可以隨時隨地輕鬆使用？
如何吸引目標受眾的參與
性平議題可能存在認知門檻或誤解，如何突破這些障礙，吸引更多人投入？
面對這些挑戰，我們明白，推廣性平議題並非一蹴可幾，而是需要不斷探索與創新的方法。
方法
為了解決性平議題在推廣過程中面臨的挑戰，我們以「敘事型網站」作為設計基礎，並規劃了以下五個核心頁面，對應不同的問題，這些頁面不僅解決了推廣過程中的挑戰，也為我們留下展覽的數位留存。
首頁
面對性平議題艱澀且可能讓人望而卻步的特性，我們選擇以簡約明瞭的風格，呈現片段情境、法律規範與問卷數據，讓使用者無壓力地初步接觸性平議題，降低進入門檻。
故事
為了讓性平議題更具生活化與共鳴性，我們透過講述大一新生遭受性騷擾的故事，講述性騷擾案例以及日常中無心的舉動如何影響他人，讓使用者能在情感層面與議題產生連結，進而反思自身行為。
播客
將 Podcast 獨立成頁面，精華作為引導，讓使用者能輕鬆聆聽主題的重點，並進一步聆聽完整節目。
展現
在如何吸引受眾參與的挑戰中，我們利用視覺化方式：如侵害軌跡圖，搭配資料的分類與加值，讓複雜的性平資料以簡單且具吸引力的形式呈現，幫助使用者更清晰地理解議題。
團隊
團隊成員、贊助商與合作夥伴的介紹，以及我們的團隊歷程，拉近與使用者的距離，讓他們感受到性平推廣背後的用心。
設計
確立產品定位
因為不希望艱澀難懂的法律條文讓使用者感到難以使用，整體風格訂定為簡約、些許動畫、圖文故事為主。
調查、研究
以競品分析為主，透過分析其他敘事型網站、性別平等議題網站、展覽相關網站，統整其優缺點，並將其改善後融入自身網站當中。
設計、調整
接著著手設計低保真線搞，在每周會議中跟小組成員討論各個區塊該長怎樣，及融合他們想呈現的想法，並不斷調整。也因一開始有考量到開發技術問題，過於華麗的動畫可能無法呈現，設計也盡量往簡單的方式呈現。
架設
在最初設計時，腦袋想到的畫面都是有些 Scroll Parallax ，或是其他比較動態的動畫效果，但團隊中沒有人特別會寫網頁，所以在後續設計的時候我又將整體設計改成偏單調、沒有動畫效果的設計。但因為團隊人手有限，所以網站的架設也是由我執行。
從一開始的 Coding 到嘗試使用 WordPress 及最後發現 Framer 這個平台，架設過程從一開始的覺得困難到逐漸輕鬆。
也因為後續使用 Framer 的關係，原本打消念頭的動畫效果也得以實現，後續的高保真設計也直接移來這邊操作，以便後續可以直接發布完整版。
設計工具
Figma、Framer
在不同區塊設計間猶豫不決時，也會用投票的方式詢問團隊成員哪個設計好，並採取票數高的設計。與團隊的不斷溝通、頭腦風暴，才是造就設計出來的成品的最大關鍵。
使用者體驗
也因畢業展覽有分為兩個階段，校內展前及校外展，因此將使用者體驗分為兩次不同的測試。以便在校外展時能夠給予完整的體驗。
校內展前
進行易用性測試，因為第一次接觸敘事型網站，所以不知道多數使用者的想法是如何，所以先以自己＋小組內部討論作為初步設計。而執行意用性測試的方式則以指派任務的方式進行。尋找 5 名受測者，並告知他們要瀏覽整個網頁，並大聲說明出自己遇到什麼樣的問題，以及覺得哪邊可以作改善，旨在希望改善流程、資訊清晰度、資訊傳達度，而後整理成問題清單，並逐步改善。
而以下為統整受訪者給出的建議後整理出來的改善目標：
校內展中觀察＆問卷
因為展覽場地大小因素，以及觀展人不一定希望被訪談，於是透過在旁邊觀察他們的操作行為以及回饋問卷，來綜合歸納出需作更改、調整的地方。
問題點
基於上圖取得的量化回饋，開始制定如何改善網站的使用者體驗，於是我決定：先透過喜歡比例擬定修改的方向，將喜歡比例較低的頁面進行重新設計/優化。
除了問卷回饋以外，在展覽期間我也在旁邊觀察使用者們的使用情況，綜合評估以後發現以下幾點：
進到頁面後不知道可以滾動（Scroll）。
Podcast 頁面沒有人點擊選集清單，精華片段無人點擊觀看。
輪播圖循環播放的設計會造成重複點擊下一項按鈕。
桌遊介紹區塊過於雜亂，無法清楚理解。
改善方法
新增 Scroll Indicator
在新增 Scroll Indicator 後，幾乎所有人都可以知道接下來要往下滑動，只有少部分人還是會有疑問，這時我會在旁邊口頭告訴對方要往下滑。
將 Podcast 頁面重新設計，並且讓影片自動播放。
原本的 Podcast 設計為：一個影片，左下角有該集簡介、頁面右方有選集清單的 Side Bar，但在旁觀察下來，沒有一個人使用到這個設計，因此改為下圖的設計，讓選集清單看起來更明顯。
將原有的輪播圖呈現方式改為 Scroll Parallax 提供一次性瀏覽以及流程感，讓使用者更加清楚我們如何透過不同的生成式 AI 解決我們遇到的困難。
將桌遊區更改為介紹產品的形式，增加留白，並將資訊分散成三個區塊，避免在一個區塊當中有太多資訊，讓使用者不好消化。
上述的調整結束過後，整個網頁也就大功告成，盼望能讓觀展人能夠在校外展體驗到最好的狀態。
結論
成果
整體的概念、發想都有好的結果，讓觀展者以看故事的方式了解性別平等的樣態、了解團隊如何執行專案都取得不錯的成果，多數人也都對網站讚嘆連連，提出了許多如何架設、設計網站的疑問。
但就以在「展覽上」觀賞這件事情，閱讀時長必須先考慮進去，才好進行整體內容規劃，在觀察以及查看後台資訊，發現一組停留在網頁瀏覽時間 10~15 分鐘不等，會影響到展覽動線。 雖然已將網頁區放置在最後觀賞的區塊，但由於場地大小有限＋接續導覽，以至於上一組還在看的話，下一組就沒辦法馬上銜接上。
但若是以「展覽數位留存」方面來講的話，我覺得整體算是不錯的。畢竟若是在展間聽人導覽、觀賞展間，也會花上 10~15 分鐘不等，再加上網頁上有一些動畫，可以讓閱讀不那麼單調、無趣。
沒有觀賞到實體展覽的人，日後也可以透過這個網頁了解，我們是如何宣導性平議題以及將我們的產品給建置出來的。
無論在展覽上聆聽也好、事後在網路上瀏覽也罷，我們都希望能藉由此次經驗啟發更多人，重新思考性別平等的議題，並激發對話與行動的可能性。
學到什麼？
在學習上也學會了更多 Figma、Framer 的操作及 UI/UX 設計該注意到一些小細節，了解到 Design Guidline,Component,Variant,Grid System 保持一致性有多麼重要，也加快了開發的速度。
此外，這次專案讓我深刻體會到，一個成功的專案絕非一人之功，而是團隊協作的結晶。過程中，雖然面對各種不同意見的碰撞、想法的分歧。但我們學會了將這些挑戰轉化為成長的契機，給彼此時間提出自己目前的問題，接受彼此的想法並且都學會妥協。
最終，我理解到，正是這些想法的磨合與專業的互補，才讓專案成果得以超越任何個人的想像。這段經歷讓我對未來的團隊合作充滿信心。
