信諾科技讓主婦聯盟合作社的官網煥然一新！
2018/11/21
Knowing
採訪撰文：鄭寧／整理：林詩容 2018-11-21 12:00
台灣主婦聯盟生活消費合作社成立於2001年，以安全食材為需求，從環境守護到共同購買，希望透過消費力的集結，創造公義、健康且永續的社會，發展至今全台已有超過七萬名會員。
隨著合作社會員逐年成長，台灣主婦聯盟生活消費合作社為提升數位平台的服務品質，決定對官網進行改版。
走訪多家提案廠商後，台灣主婦聯盟生活消費合作社最後選定與理念及技術相符合的信諾科技合作，經過長時間的討論、分析與規劃，台灣主婦聯盟生活消費合作社第一波的新版網站也終於在今年八月初上線！
台灣主婦聯盟生活消費合作社企畫部專員林如茵表示，新版網站上線後，帶來整體工作階段提升8.3%，跳出率下降10%，並成功提升導流至EC平台的流量，最重要的是後台系統流程清楚也讓網站企編們的操作工作更有效率。
從內容分析著手，利用UI設計改善UX
信諾團隊表示，此次台灣主婦聯盟生活消費合作社（以下簡稱為主婦聯盟合作社）的案子可以分為兩大階段，第一階段主要是「網站改版」，第二階段則是「數位典藏」。
「網站改版」方面，信諾科技專案經理黃詩純回憶：在分析舊站時，發現首頁塞滿了活動、產品、入社、訊息、報導、食譜等各種資訊與連結，進一步瀏覽報導文章時又會發現文章本身也包含上述各類內容，使得網站各角落都藏有重複的內容，再加上網站各選單的分類不夠明確，使用者就像進了迷宮一樣。
因此，雖然主婦聯盟合作社原已規劃了網站改版的架構圖，但為了優化UX，設計師余秋慧建議在前端瀏覽介面上直接將原本的官網切分為兩個平台：「官方網站」、「自媒體」。將與主婦聯盟合作社的組織、理念、加入辦法、產品以及活動行事曆等資訊置於「官方網站」；將報導文章、議題、食譜、月刊等自媒體相關的內容放入「自媒體」-綠主張。
圖說：主婦聯盟合作社官網第一屏(左：PC，右：Mobile)
圖說：主婦聯盟合作社綠主張第一屏(左：PC，右：Mobile)
為讓兩個平台各自擁有獨立的選單與首頁，卻又要同時展現兩者間的關聯性，余秋慧在視覺上將兩個平台維持同一調性，再運用色彩計畫將兩個平台作區分，最後利用滑動式的平台導覽列來關聯彼此，將兩個平台與重點項目的「社員專區」、第二階段將推出的「典藏閱覽室」以及主婦聯盟合作社的EC網站連結並列置入該導覽列首層，明確依內容性質區隔平台，不僅優化使用者體驗，也讓「官方網站」與「自媒體」擁有各自的品牌經營空間。
圖說：主婦聯盟合作社網站平台導覽列(左：PC，右：Mobile)
從內到外，讓網站煥然一新
信諾團隊還提到，為了一改過去以WordPress為底層，主婦聯盟合作社編輯們因而需重度依賴網頁編排技巧，導致內容樣式容易缺乏一致性、且費時費力的問題，此次網站改版的最大重點即是提供讓管理者能輕鬆維護資料的網站內容管理系統(CMS)。「簡單來說，我們必須將過去塞在WordPress中的全部資料，進行分類與歸納，讓主婦聯盟合作社能有系統地在後台上稿文章並且管理產品。」黃詩純說。因此在自媒體文章與產品兩大內容上，皆採用信諾科技自行研發的「數位媒體內容管理平台」，這是信諾科技曾獲得經濟部技術處創新研發計畫輔導的產品之一，使用數位典藏作為底層，在應用上具有欄位擴充彈性與即時性，能使客戶降低在階段性變動欄位的開發成本。
圖說：信諾科技「數位媒體內容管理平台」上稿介面範例
除了後端好維護外，信諾團隊在前端綠主張自媒體的內容呈現上也花費心思，不僅將過往打造專題閱讀單元的經驗帶入，規劃雙層式列表，讓系列文章集合在同一議題列表中，解決編輯們過去需手動設定相關文章的困擾；而同樣的專題呈現概念在展示最新月刊時，則應用局部捲動的方式，固定左側當期封面，待右側當期文章滾動完後才捲動至下方相關內容，讓綠主張自媒體在單元之間兼顧變化與易讀性。
圖說：信諾為主婦聯盟合作社自媒體-綠主張，規劃了2種文章組合包的收納方式：關注議題(上)、當期月刊(下)
此外，從產品分類查找的使用者體驗，到產品頁面的資訊架構與內容安排，信諾團隊更在消化了兩大分野、三層深度、近千項產品後，規劃了相當全面的產品頁面，讓使用者在一頁內能認識產品規格，由豐富的產品圖文說話，還能切換頁籤閱讀更多產品介紹，提升信賴感進而前往EC網站，同時頁面下方也主動推薦相關報導與相關產品，吸引更多點擊與停留時間。
圖說：產品頁面固定上方重要資訊，下方提供頁籤切換產品規格與詳細介紹。
信賴彼此，友善溝通找出解決方案，創造雙贏
信諾科技因為累積了架構自媒體系統的豐富經驗，所以得知文稿樣式是否賞心悅目且具規範性，常影響使用者對網站的觀感，更讓小編們搔頭煩心，因此，信諾團隊也規劃了完善的文稿體例樣式，從標題、清單、引述重點、備註、表格、圖片、圖說到手風琴工具等等，讓主婦聯盟合作社網站企編們能省心依照規範使用編排，將更多力氣放在企劃上！
此外，因為主婦聯盟合作社原有網站上的資料數量相當可觀，除了資料介接上需要明確規格外，龐大且數量眾多的圖文資訊在處理上更是棘手的問題。因為原有系統是使用WordPress，圖片在儲存時已被切割成不同尺寸存放，與新站系統是利用單圖原尺寸進行輸出判斷是不同的處理方式，工程師林敬倫提到，為了避免浪費頻寬及倉儲空間，信諾團隊上在圖檔處理與清洗原有檔案上做了不少苦工。
更重要的是效能問題的考量，所以從程式設計到資料庫，信諾從規劃開始就下足功夫。林敬倫舉例，一般來說，只要使用者一多，網站內容讀取速度勢必下降，所以主婦聯盟合作社的自媒體與產品圖文皆採用緩存方式處理，若有更新需求再直接更新，才不會影響網站效能。但由於產品品項眾多，且上架狀態每日皆需要多次透過API定時更新，為優化這個環節拖累網速的問題，信諾團隊即使挑燈夜戰，還是歷經上線第一週的磨合期，整個調整過程中也有賴主婦聯盟合作社給與信任、一直正向積極地提供資訊，才能造就如今的成果，目前網站在Google PageSpeed Insights的檢測結果上都是綠燈，也為信諾團隊積累了優化的寶貴經驗！
圖說：主婦聯盟合作社網站改版後，網站速度與最佳化在Google PageSpeed Insights的檢測結果皆屬優等。
「除了建置網站的技術，我們還有一套完整的服務流程，能為客戶進行整體性的規劃！」信諾團隊強調。在第一階段上線後，信諾科技將持續為主婦聯盟合作社官網進行相關文章的運算規劃，也將推出電子報、社員留言、投稿等互動功能與數位典藏，期待能為主婦聯盟合作社升級數位服務品質、續創佳績。
此文轉載於Knowing新聞所撰
回上一頁