好好愛牠 Save Animals for Love Association｜讓動物友善非營利組織的運作更順利
UX Design．UI Design．Responsive Web Design (RWD)
Overview
好好愛牠協會為致力於動物友善的非營利組織，透過推廣愛動物的教育，希望能喚起每個人的同理心，願意尊重並與動物和平共處。本專案為好好愛牠協會翻新形象官網，藉由全新的網站體驗，整合協會內容與業務，讓組織運作更順暢，展示實績並傳達好好愛牠的核心價值。
Time / Roles / Client
Time: 2022
UX & UI Design: Hui-Hsin Yang (My role👽)
Web Development: Sunny Chang, Peter Kao
Project Management: Elsa Wang
Client: 社團法人好好愛牠協會
Objective
本專案目標為透過形象官網，傳遞協會溫暖、友善動物的形象以鼓勵各界透過善心捐款、公益合作等方式一同身體力行愛動物。另一方面，重整舊有官網的架構並提升網站易用性、改善資訊層級和視覺設計，讓網站兼具好的體驗與敘事脈絡。
Challenge
達成客戶需求與專案目標的同時，透過設計思考，梳理舊有官網的資訊架構和視覺形象，並與前端、後端工程師合作，創造便於協會內部管理及符合開發技術可行性的形象官網，讓各方的協力合作，一同響應動保公益。
Solution
為重塑形象官網，我們由了解客戶需求與專案背景出發，重新梳理舊有官網的資訊架構，透過設計讓資訊合理配置並優化視覺敘事。
使用者體驗上，相較於舊站，使用者能輕鬆閱讀動保資訊或取得響應協會行動的方式，協會成員則能精準地傳遞訊息給受眾和管理內容。
介面視覺上，延續協會商標的視覺形象，網站整體運用活潑、溫暖的配色傳遞親切感，拉近協會與受眾之間的距離。優化視覺敘事，將資訊的傳遞方式調整的更人性化，並融合協會目標與業務內容於其中。
Design Highlights
RWD 響應式網頁設計，適應於大畫面、桌機、平板、手機的breakpoints。
了解協會理念、認識協會成員，展示協會實績。
融合動保文章與善款善行募集的敘事脈絡，以沈浸式的鋪陳鼓勵大家一同響應，並傳達協會形象。
改善使用者流程、資訊層級，輕鬆成為協會的一份子。好用的流程也能減輕協會內部業務負擔，一起愛動物吧！
部落格傳遞動保知識與觀點。標籤功能的設計，讀者能輕鬆獲取資訊，協會則能脈絡化的進行內容管理。
Sitemap
Style Guide
活潑、溫暖的配色是網站風格的設計策略，展現動保協會的親切感，並延續協會商標的視覺形象。網頁字型選擇上，中文字型使用泛用於網頁設計的無襯線字體 Noto Sans TC，英文和數字則選用帶點圓潤感的 Open Sans。
UI Kits
官網UI kits，標註元件設計和互動狀態給前端工程師。
Kickoff Meeting
透過啟動會議向PM和技術團隊進行設計交付。各頁面設計稿對應文字描述欄，標註互動邏輯、外部連結、備註等資訊給前後端工程師，並於會議中確認所有畫面的互動邏輯與技術可行性，正式進入網頁開發階段。
Learning & Takeaway
這次的專案經驗，讓我更加掌握介面設計與程式開發之間須顧慮的點及專案管理。
幾次會議中，與前端、後端工程師針對網頁功能、操作邏輯、資料串接、設計可行性等進行討論；另一方面，由使用者的角度進行思考，和PM合作，反覆與客戶對接多次，補齊和確認各項內容資訊，這些都讓人更加熟悉專案完整流程與團隊協作。
很謝謝一同完成這件公益專案的夥伴們，也謝謝客戶的喜歡，能用自己的力量參與公益是很棒的事！☺︎
