Design Goal
- Brand new website: new look and reading experience.
- Information architecture: 淡化舊有業務、強化新業務。
- Promote membership
Challenges
- 5000+以上的文章，且每篇文章的來源、刊登方式、內容格式可能都不同
- 避免增加編輯部的負擔
- 顧及付費讀者的體驗
Research
為定義網站的設計方向，帶入更多真實使用者的專業意見與數據，作為設計的基石。
Usability: Heuristic Evaluation
- 設定五項主要任務操作情境，並紀錄各頁面易用性問題點
- 將問題依照調整耗能分成四類，並歸納出痛點與改善順位
- 設定五項主要任務操作情境，並紀錄各頁面易用性問題點
- 將問題依照調整耗能分成四類，並歸納出痛點與改善順位
痛點分析——問卷回饋搭配後台數據分析
將問卷結果編碼、依問題頻率排序，並匹配後台各頁面的瀏覽頻率數據，歸納出欲改進之痛點。
競品分析
為抓住報導型網站之設計趨勢，比對其他媒體平台，統整網站之設計要素。
設計目標：重塑發現文章 -> 閱讀 -> 到讀後推薦的體驗：
- 分類與導覽架構：平台上原先有5000+以上的文章，且每篇文章的來源、刊登方式、呈現形式可能都不同
- 需在不增加內容生產者的負擔、與兼顧付費讀者的體驗下，讓提出更好呈現方式。
功能拆解
定義出本次專案需關注的優化項目，拆解成四個主要面向，在設計時亦可拆成四個部分的Wireframe執行。
資訊架構設計
重新建立一套文章組織體系，並讓讀者能容易發掘想要的內容。同時符合編輯部的撰稿的需求與限制。而資訊架構的角度提出解決方案，對內容型網站而言能更有效地掌握前後台開發需求。在進入Wireframe前能有更詳盡的策略，來設計頁面版型。
Wireframe
首頁設計
設計時盡量以滿版欄位呈現，創造感官沈浸的瀏覽體驗。 並運用輪播的資訊，解決讀者感到內容更新率低的問題，並盡量維持手機體驗的一致性。
付費與免費文章混合推薦（2:1），避免免費文章選擇過少
首頁 Wireframe
內文閱讀
著重於優化長文的體驗，基本的RWD段落字級設定，主要設計特色為三欄式排版、多處廣告與文章導流欄位，並標準化文章各處元件呈現，為所有UI樣式增加規範，並製作範文提供給視覺設計師優化。
Take away
從客戶利害關係部門、問卷、後台數據與易用性評估，分析需求 規劃資訊架構，尤其在文章分類、導覽系統提出設計方針 重新設計全站Hifi-Wireframe，將近20個頁面 優化訂閱流程、提出增加會員吸引力的新Feature