商研院節能財務分析系統
網站改版∣響應式設計
客戶背景
財團法人商業發展研究院 (簡稱商研院) 為國家級服務業研發智庫，以「前瞻、創新、國際化」三大主軸，作為產、官、學、研間相互支援的平台，引進各界能量與鏈結資源，並為服務業者提供全面解決方案！
面臨的問題
雷技資訊為商研院建置的節能財務分析系統，在推出第一版之後獲得不錯的反應，有了先前愉快的合作經驗，商研院又再度尋求雷技團隊進行第二次的改版動作，第二次官網改版重點如下：
- 適當安排插圖及動態圖表，增添視覺吸引度
- 適當縮減題目量及或合併步驟
- 優化使用者在行動裝置的瀏覽體驗
- 改善設備填寫時的大量資料，改為步驟或改變填答流程
- 自動帶入設備資料
- 金額試算時，為不同方案輸入欄位做區分
- 報告部分新增知識建議項目
專案概況
- 增加插圖及動態圖表，提升視覺呈現
- 響應式網站設計，優化使用者體驗
- 自動帶入設備資料
運用技術
Angular, Google Firebase
解決方案
依據上述問題，這一次網站設計規劃以手機友善的使用流程為出發點，調整題目數量、並針對特定類別進行選擇上的整合，降低使用者填寫次數，引導使用者逐一完成資訊的填寫。維持第一版分類資訊的相關性、重要性、出現頻率，將相同層級的資訊一致化呈現，讓使用者一眼即可分辨資訊之間的區別。同樣的，把客製的圖示與汰換設備連結在一起並顯示兩者之間的關聯性，降低對文字吸收程度。這一次改版的重點之一，是優化行動裝置上的瀏覽體驗。設計符合手指大小的按鈕，讓使用者在螢幕輕鬆操作。無論螢幕大小、不可視的資訊設計到可視的介面設計打造完善的使用者體驗。
在技術方面，前端技術以Angular為主軸開發業務邏輯和UI元件。後端使用Google Firebase處理資料存取、API建置、發信服務串接、系統健康分析及安全性保護。搜尋服務利用algolia。信件傳輸使用Sendgrid服務。部署及託管作業則透過Google Firebase上傳至Google Cloud Platform。
