I-Life 網站重新設計
I-Life 是一個社會企業，透過劇場和社區服務為弱勢青少年提供第二次機會。他們的網站需要重新設計，以更好地傳達他們的使命、吸引捐助者，並為青少年團員創造歸屬感。
角色
UX 設計師
裝置
網站
工具
Figma、Miro 和 Notion
時間
2021年7月 - 2021年9月
背景
I-Life成立於2015年，是台灣的一個社會企業，致力於幫助處於風險中的青少年（如輟學者、前幫派成員、邊緣家庭的孩子）透過戲劇表演和社區服務重建自信和社會連結。
然而，他們的網站未能有效傳達組織的影響力和情感故事：
- 缺乏情感共鳴：網站內容過於機構化，未能展現青少年團員的個人故事和轉變歷程
- 捐款流程不明確：潛在捐助者難以理解他們的捐款如何直接幫助青少年
- 資訊過載：首頁塞滿了大量文字和活動資訊，導致使用者難以聚焦
- 缺乏社群感：青少年團員和支持者沒有感受到與組織的連結
我們的目標是重新設計網站，以真實的故事講述、清晰的行動呼籲和強烈的社群感來激發同理心和行動。
設計挑戰
- 如何在不過度煽情的情況下，透過設計傳達青少年團員的真實故事和轉變？
- 如何設計一個清晰且具說服力的捐款流程，讓捐助者理解他們的影響？
- 如何平衡多元使用者需求：潛在捐助者、青少年團員、合作夥伴和社區成員？
- 如何在有限的預算和時間（3個月）內完成完整的 UX 研究和設計？
我的角色
作為 UX 設計師，我負責從研究到設計的完整流程，包括：
- 進行使用者訪談和競品分析
- 定義使用者旅程和資訊架構
- 設計線框圖和高保真原型
- 與工程團隊和利益相關者協作
理解使用者與他們的需求
為了深入理解I-Life的使用者和他們的需求，我們採用了雙鑽石設計模型（Double Diamond Design Model）進行設計研究：
🔍 發現階段：我們如何做
我們透過多種方法收集洞察：
👥 使用者角色
透過訪談和分析，我們識別出三個主要使用者類型：
捐助者
「我想知道我的捐款如何實際幫助這些年輕人，並看到真實的改變故事。」
青少年團員
「我希望這裡是一個讓我感到被接納和驕傲的地方，而不僅僅是另一個社福機構。」
合作夥伴
「我想快速了解組織的使命和如何與他們合作舉辦活動或提供資源。」
💡 觀點（POV）與我們可以如何...（HMW）
基於研究發現，我們為每個使用者角色制定了 POV 和 HMW 陳述：
從資訊過載到故事驅動的體驗
我們採用了以故事為中心的設計策略——透過真實的青少年故事、清晰的視覺層次和情感化設計，讓訪客與I-Life的使命產生深刻連結。
🎯 挑戰 1：缺乏情感共鳴的首頁
問題
- 原網站首頁充滿大量文字和活動資訊，缺乏視覺焦點
- 未能展現青少年團員的個人故事和轉變歷程
- 行動呼籲（CTA）不明確，訪客不知道下一步該做什麼
之前：資訊過載，缺乏焦點
解決方案：以故事為中心的首頁重新設計
- 英雄區塊（Hero Section）：使用大尺寸的青少年團員照片和簡短有力的標語「給孩子第二次機會」，立即建立情感連結
- 故事卡片：在首頁展示 2-3 個精選的青少年轉變故事，搭配真實照片和簡短引言
- 清晰的 CTA：兩個主要行動按鈕：「了解更多」和「立即支持」，引導不同意圖的訪客
之後：清晰的焦點，情感化敘事
🎯 挑戰 2：捐款流程不明確，缺乏信任
問題
- 捐助者不清楚他們的捐款將如何被使用
- 捐款選項過於單一，沒有提供不同的支持方式
- 缺乏透明度和問責機制，降低了信任感
解決方案：透明且具說服力的捐款體驗
- 物資捐贈地圖：創建互動式地圖，展示I-Life的服務據點和物資需求清單，讓捐助者可以選擇捐贈特定物資（如戲劇道具、教學設備）
- 多元支持方式：除了金錢捐款，還提供「物資捐贈」、「志工參與」和「企業合作」等選項
- 影響力儀表板：顯示捐款如何直接轉化為實際行動（如「您的 1000 元可以支持一位青少年參加一個月的戲劇課程」）
🎯 挑戰 3：缺乏社群感和歸屬感
問題
- 青少年團員沒有專屬的空間展示他們的成就和故事
- 支持者和捐助者與組織的連結僅限於捐款，缺乏持續互動
- 沒有平台讓社群成員相互交流和支持
解決方案：建立線上社群平台
- 團員故事牆：創建專區展示青少年團員的個人故事、作品和成長歷程
- 部落格與媒體報導：定期更新組織動態、演出資訊和媒體專訪，保持社群活躍度
- 社交媒體整合：在網站嵌入 Instagram 和 Facebook 動態，鼓勵訪客關注並參與線上討論
透過設計講述有力的故事
我們設計了一套完整的視覺敘事系統，讓每個頁面都能傳達I-Life的使命和影響力。
與真實使用者一起驗證設計
我們與I-Life的工作人員、青少年團員和潛在捐助者進行了可用性測試，以驗證設計假設並收集回饋。
建立一致且可擴展的設計系統
完整的響應式網頁設計
手機版
設計帶來的改變
重新設計的網站不僅改善了使用者體驗，還實際幫助I-Life擴大了社會影響力。
增加網站流量
提升捐款轉換率
新增志工註冊
同理心驅動的設計創造真正的影響
這個專案教會我，為社會企業設計不僅僅是關於美觀的介面——而是關於透過設計放大組織的使命和影響力。
故事講述是最強大的設計工具
透過與I-Life的工作人員和青少年團員深入訪談，我意識到真實的故事比任何設計技巧都更有力量。設計的角色是放大這些故事，而不是掩蓋它們。我學會了如何使用視覺層次、排版和圖像來創造情感共鳴，而不過度設計。
在有限資源下平衡理想與現實
作為一個非營利組織，I-Life的預算和時間都非常有限。我學會了如何在理想的設計願景和實際的技術和預算限制之間取得平衡。透過優先排序關鍵功能（如捐款流程和故事展示）並採用漸進式改進策略，我們能夠在有限資源內創造最大影響。
設計可以是社會改變的催化劑
看到重新設計的網站實際幫助I-Life吸引更多捐助者和志工，讓我深刻體會到設計的社會價值。這個專案讓我更加堅信，好的設計不僅能解決商業問題，更能為弱勢群體發聲，創造更包容和公平的社會。
「新網站幫助我們更有效地傳達我們的故事和影響力。我們收到更多來自企業和個人捐助者的詢問，許多人說他們被網站上的故事所感動。這對我們來說是巨大的突破。」
— 成瑋盛，I-Life創辦人兼執行長
「以前我只是偶爾捐款，但新網站讓我真正了解這些年輕人的故事。現在我成為了定期捐助者，還報名參加了志工活動。」
— 陳小姐，定期捐助者