nextdrive
強化離島災害應變力，確保能源穩定供應
強化離島災害應變力，確保能源穩定供應
強化離島災害應變力，
確保能源穩定供應
日本宮古島能源管理系統設計
日本宮古島能源管理系統設計
專案時程
專案時程
專案時程
2023/07 - 08
2023/07 - 08
專案任務
專案任務
專案任務
負責資訊架構、使用者流程、Wireframe 、介面設計、易用性測試等任務
負責資訊架構、使用者流程、Wireframe 、介面設計、易用性測試等任務
負責資訊架構、使用者流程、Wireframe 及介面設計、易用性測試等任務
專案團隊
專案團隊
專案團隊
產品經理 *1、專案經理 *1
工程師 *4（前後端、QA）
使用者體驗編輯 *2（中英日三國語言）
產品經理 *1、專案經理 *1
工程師 *4（前後端、QA）
使用者體驗編輯 *2（中英日三國語言）
專案貢獻
專案貢獻
專案貢獻
成功擴展產品商業價值：考量商業需求與未來情境，採具彈性的設計方案，讓部分專案發展成標準產品
專案匯報層級直達執行長、總經理與技術副總，顯示公司對專案的高度重視與支持
成功擴展產品商業價值：考量商業需求與未來情境，採具彈性的設計方案，讓部分專案發展成標準產品
專案匯報層級直達執行長、總經理與技術副總，顯示公司對專案的高度重視與支持
專案背景
專案背景
氣候變遷下的挑戰：穩定能源供應的迫切需求
氣候變遷下的挑戰：
穩定能源供應的迫切需求
氣候變遷下的挑戰：
穩定能源供應的迫切需求
隨著氣候變遷加劇，自然災害頻繁，離島地區的能源供應面臨挑戰。為確保在災害期間的穩定電力供應，本專案為日本宮古島建立一個微電網 SaaS 系統，整合太陽能與儲能技術，減少對化石燃料的依賴，促進永續發展。
隨著氣候變遷加劇，自然災害頻繁，離島地區的能源供應面臨挑戰。為確保在災害期間的穩定電力供應，本專案為日本宮古島建立一個微電網 SaaS 系統，整合太陽能與儲能技術，減少對化石燃料的依賴，促進永續發展。
專案目標
專案目標
透過能源管理系統
提升設備穩定性，降低維護成本
透過能源管理系統提升設備穩定性，降低維護成本
透過能源管理系統
提升設備穩定性，降低維護成本
使用者可查看日常用電及太陽能發電等電力數據，並在有剩餘電力時調控設備進行充放電。當設備發生異常時，系統能即時檢測並通知維運商進行處理，確保設備穩定運行。
使用者可查看日常用電及太陽能發電等電力數據，並在有剩餘電力時調控設備進行充放電。當設備發生異常時，系統能即時檢測並通知維運商進行處理，確保設備穩定運行。
即時數據可視化
即時數據可視化
即時數據可視化
查看場域設備資訊
數據圖表可視化
查看場域設備資訊
數據圖表可視化
進行設備調控
進行設備調控
進行設備調控
調控充放電狀態
設定充放電功率
調控充放電狀態
設定充放電功率
警示設備異常
警示設備異常
警示設備異常
即時監控設備狀態
自動通知異常警報
即時監控設備狀態
自動通知異常警報
設計挑戰
設計挑戰
在設備數量變動的情況下，
如何有效呈現並比較大量數據？
在設備數量變動的情況下，
如何有效呈現並比較大量數據？
在設備數量變動的情況下，
如何有效呈現並比較大量數據？
資訊量大
資訊量大
資訊量大
客戶希望看到大量的數據、圖表
及各設備所包含的詳細資料
客戶希望看到大量的數據、圖表
及各設備所包含的詳細資料
客戶希望看到大量的數據、圖表及各設備所包含的詳細資料
相似資訊多
相似資訊多
相似資訊多
設備之間存在許多相似資訊
需要被呈現和比較
設備之間存在許多相似資訊
需要被呈現和比較
設備之間存在許多相似資訊需要被呈現和比較
設備數量不確定
設備數量不確定
設備數量不確定
業務仍持續與客戶洽談
系統需應對設備數量變化
業務仍持續與客戶洽談
系統需應對設備數量變化
業務仍持續與客戶洽談，系統需應對設備數量變化
設計策略
設計策略
疏理眾多 User Story 後，
我發現了不同頁面需求間的關聯性
疏理眾多 User Story 後，
我發現了不同頁面需求間的關聯性
疏理眾多 User Story 後，
我發現了不同頁面需求間的關聯性
進入設計發想前，我針對所有 User Story 進行盤點與統整，確保能從全局角度思考整體專案架構，讓每一設計決策都能與專案目標相呼應，並以此為基礎收斂成三大設計策略，使產品在整體設計風格和體驗上保持一致。
進入設計發想前，我針對所有 User Story 進行盤點與統整，確保能從全局角度思考整體專案架構，讓每一設計決策都能與專案目標相呼應，並以此為基礎收斂成三大設計策略，使產品在整體設計風格和體驗上保持一致。
資料結構可視化
資料結構可視化
數據圖像化，並根據資料重要性和相關性分類，以視覺元素進行展示
將數據圖像化，並根據資料的重要性
和相關性分類，以視覺元素進行展示
功能模組化
功能模組化
標準化功能模組，建立可重複使用的設計元件，以應用於不同場景
標準化功能模組，建立可重複使用的
設計元件，以應用於不同場景
功能擴展性
功能擴展性
預留可配置的擴展空間，確保設備數量變動不會增加開發成本
預留可配置的擴展空間，
確保設備數量變動不會增加開發成本
資料結構可視化
資料結構可視化
數據圖像化，並根據資料重要性和相關性分類，以視覺元素進行展示
功能模組化
功能模組化
標準化功能模組，建立可重複使用的設計元件，以應用於不同場景
功能擴展性
功能擴展性
預留可配置的擴展空間，確保設備數量變動不會增加開發成本
設計產出： 8 個系統頁面
設計產出： 8 個系統頁面
為避免作品集篇幅過長，以下僅呈現其中 4 個核心功能頁面
為了避免作品集篇幅過長，
以下僅呈現其中 4 個核心功能頁面
為避免作品集篇幅過長，以下僅呈現其中 4 個核心功能頁面
總覽
總覽
場域電力資訊一目了然
場域電力資訊一目了然
場域電力資訊一目了然
使用者可查看場域用電、發電、儲電等數據，以及儲能設備相關圖表。
使用者可查看場域用電、發電、儲電等數據，以及儲能設備相關圖表。
本專案所有數據僅供展示，不反映實際情況
本專案所有數據僅供展示，不反映實際情況
本專案所有數據僅供展示，不反映實際情況
模組化數據圖卡
突顯核心資訊：先顯示即時再顯示累積市電電量
加強視覺引導：以不同顏色區分各類電力類型，並對應圖表色彩（下圖）
突顯核心資訊：先顯示即時再顯示累積市電電量
加強視覺引導：以不同顏色區分各類電力類型，並對應圖表色彩（下圖）
突顯核心資訊：先顯示即時再顯示累積市電電量
加強視覺引導：以不同顏色區分各類電力類型，並對應圖表色彩（下圖）
資料結構可視化
使用者在查看數據時需比較「即時用電圖卡」與「電力總覽圖表」，設計時考量視覺順序：
上方：「整體」用電資訊，以圖卡和圖表搭配呈現
下方：「細節」儲能設備資訊，便於深入理解各項數據
使用者在查看數據時需比較「即時用電圖卡」與「電力總覽圖表」，設計時考量視覺順序：
上方：「整體」用電資訊，以圖卡和圖表搭配呈現
下方：「細節」儲能設備資訊，便於深入理解各項數據
圖表空間大，易讀性較高
比較電力圖卡與電力總覽圖表時，閱讀流暢度較差
比較電力圖卡與電力總覽圖表時，閱讀流暢度較差
比較電力圖卡與電力總覽圖表時，閱讀流暢度較差
右方三圖表顆粒度差異大，空間利用不均
右方三圖表顆粒度差異大，空間利用不均
右方三圖表顆粒度差異大，空間利用不均
依閱讀習慣排列資訊
上至下視覺引導，妥善分配資訊層級，方便比較數據
上至下視覺引導，妥善分配資訊層級，方便比較數據
上至下視覺引導，妥善分配資訊層級，方便比較數據
相關資訊集中展示：整體用電到細節設備
相關資訊集中展示：整體用電到細節設備
相關資訊集中展示：整體用電到細節設備
設備調控
設備調控
根據需求選擇調控模式
根據需求選擇調控模式
根據需求選擇調控模式
使用者可進行整組或分組設備的調控，系統會根據輸入的數值執行充放電，並即時顯示相關數據，確保使用者隨時掌握設備狀態。
使用者可進行整組或分組設備的調控，系統會根據輸入的數值執行充放電，並即時顯示相關數據，確保使用者隨時掌握設備狀態。
模組化調控中心
為滿足使用者面對大量系統資訊的需求，採用模組化設計，讓「整組」、「分組」調控中心以一致的視覺風格和互動邏輯呈現，降低學習成本，提升易用性。
為滿足使用者面對大量系統資訊的需求，採用模組化設計，讓「整組」、「分組」調控中心以一致的視覺風格和互動邏輯呈現，降低學習成本，提升易用性。
頁面以區塊劃分功能
頁面以區塊劃分功能
視覺上較為分散
視覺上較為分散
整合調控功能與設備數據
整合調控功能與設備數據
整合
調控功能與設備數據
視覺上較為集中
視覺上較為集中
資料結構可視化
頁面下方的調控中心將大量數據劃分為兩部分，左側「總覽」快速了解系統概況；右側「單一設備」深入查看詳細數據。
頁面下方的調控中心將大量數據劃分為兩部分，左側「總覽」快速了解系統概況；右側「單一設備」深入查看詳細數據。
功能擴展性
透過切換 Tabs 區分不同類型調控中心，並保留彈性以便未來新增群組。
透過切換 Tabs 區分不同類型調控中心，並保留彈性以便未來新增群組。
警示
警示
即時通知異常發生
即時通知異常發生
即時通知異常發生
使用者希望能即時檢視設備狀態，以判斷其運作是否正常。當設備異常時，系統應迅速提供相關資訊，確保使用者能及時採取必要措施。
使用者希望能即時檢視設備狀態，以判斷其運作是否正常。當設備異常時，系統應迅速提供相關資訊，確保使用者能及時採取必要措施。
即時警示
系統以「彈窗」提示設備異常
使用者可點擊頁面導航列「異常圖示」前往查看
系統以「彈窗」提示設備異常
使用者可點擊頁面導航列「異常圖示」前往查看
快速識別設備異常
查看標籤列：以紅色編號顯示異常數量，異常設備一目了然
個別設備資訊：異常項目置頂，其他項目分類呈現，提升查找效率
查看標籤列：以紅色編號顯示異常數量，異常設備一目了然
個別設備資訊：異常項目置頂，其他項目分類呈現，提升查找效率
功能擴展性
結合標籤列與頁面下方滑動檢視設備資訊，靈活應對未來設備擴增需求。
結合標籤列與頁面下方滑動檢視設備資訊，靈活應對未來設備擴增需求。
儲能設備監控
儲能設備監控
設備數據比較查詢
設備數據比較查詢
設備數據比較查詢
使用者可查看設備詳細的點位資訊並進行數據比較查詢。展開側邊欄可快速查看所有發生異常設備；收合側邊欄則可放大設備數據與圖表。
使用者可查看設備詳細的點位資訊並進行數據比較查詢。展開側邊欄可快速查看所有發生異常設備；收合側邊欄則可放大設備數據與圖表。
模組化元件
PCS、BMS、BMU 三種設備共用元件，提供兩種佈局格式，應對點位數量增減，降低工程開發成本。
PCS、BMS、BMU 三種設備共用元件，提供兩種佈局格式，應對點位數量增減，降低工程開發成本。
減輕系統載入負擔
以文字引導使用者主動點擊圖表「查詢」按鈕再呈現資訊，避免大量數據導致系統效能過載。
以文字引導使用者主動點擊圖表「查詢」按鈕再呈現資訊，避免大量數據導致系統效能過載。
加強數據易讀性
使用圖表的軸標區分不同設備的資訊及其對應色彩，並呈現在圖表兩側。
PCS 設備於左邊 Y 軸
BMS 設備於右邊 Y 軸
使用圖表的軸標區分不同設備的資訊及其對應色彩，並呈現在圖表兩側。
PCS 設備於左邊 Y 軸
BMS 設備於右邊 Y 軸
功能擴展性
在設計元件時產出兩種佈局，因應未來可能新增的 BMS 設備，使用者在設備較多時可透過滑動的方式查看點位資訊。
在設計元件時產出兩種佈局，因應未來可能新增的 BMS 設備，使用者在設備較多時可透過滑動的方式查看點位資訊。
（左）各一組 PCS、BMS 設備；（右）多組 BMS 設備
（左）各一組 PCS、BMS 設備；
（右）多組 BMS 設備
測試驗證
測試驗證
針對三大情境進行了易用性測試，
並為每個情境設置關鍵任務
針對三大情境進行了易用性測試，並為每個情境設置關鍵任務
針對三大情境進行了易用性測試，
並為每個情境設置關鍵任務
使用者透過放聲思考法表達自己的想法，讓我們能夠觀察操作情形。
使用者透過放聲思考法表達自己的想法，讓我們能夠觀察操作情形。
查找數據資訊
查找數據資訊
查找數據資訊
使用者在總覽與儲能設備頁面中查看關鍵數據，並進行圖表比較以查詢相關資訊。
使用者在總覽與儲能設備頁面中查看關鍵數據，並進行圖表比較以查詢相關資訊。
調控設備狀態
調控設備狀態
調控設備狀態
使用者需在設備調控頁面輸入數值，並啟動或停止充放電的調控操作。
使用者需在設備調控頁面輸入數值，並啟動或停止充放電的調控操作。
異常設備警示
異常設備警示
異常設備警示
使用者在其他頁面進行操作，設備出現問題時，前往警示頁面查看異常設備及相關問題。
使用者在其他頁面進行操作，設備出現問題時，前往警示頁面查看異常設備及相關問題。
電力數據中有些資料不常用，可能會造成干擾，但你們數據呈現處理的非常易讀，重點資訊一目了然，讓我能快速找到需要的資料。特別是那些密密麻麻的圖表，滑鼠一滑過去就能顯示該時間點的資訊，幫我省了很多麻煩！
電力數據中有些資料不常用，可能會造成干擾，但你們數據呈現處理的非常易讀，重點資訊一目了然，讓我能快速找到需要的資料。特別是那些密密麻麻的圖表，滑鼠一滑過去就能顯示該時間點的資訊，幫我省了很多麻煩！
在調控設備時，許多輔助資訊讓我感到掌控感十足。我可以在調控過程中自由切換到其他頁面，系統也會及時提醒我何時完成調控。如果我輸錯數值，也可以即時暫停，讓我覺得很放心！
在調控設備時，許多輔助資訊讓我感到掌控感十足。我可以在調控過程中自由切換到其他頁面，系統也會及時提醒我何時完成調控。如果我輸錯數值，也可以即時暫停，讓我覺得很放心！
警示頁面的提示對我來說很直覺，除了會及時通知設備問題以外，在我無法立即處理時仍持續顯示，這樣我能隨時注意到尚未處理的問題，很方便。
警示頁面的提示對我來說很直覺，除了會及時通知設備問題以外，在我無法立即處理時仍持續顯示，這樣我能隨時注意到尚未處理的問題，很方便。
團隊影響力
團隊影響力
團隊影響力
做好設計外，也為團隊決策帶來影響力！
做好設計外，
也為團隊決策帶來影響力！
做好設計外，
也為團隊決策帶來影響力！
擴展商業價值
擴展商業價值
擴展商業價值
在專案初期，PM 設定了標準設備數量，但考慮產品商業需求與未來使用情境，設計採用具彈性的方案，最終讓部分專案發展成為標準產品。
在專案初期，PM 設定了標準設備數量，但考慮產品商業需求與未來使用情境，設計採用具彈性的方案，最終讓部分專案發展成為標準產品。
溝通談判力
溝通談判力
溝通談判力
提案階段與 PM 充分溝通需求與時程，雖然會增加一些時間成本，但確保產品有更具彈性的設計方案，避免後續設計和工程團隊的大規模修改。
提案階段與 PM 充分溝通需求與時程，雖然會增加一些時間成本，但確保產品有更具彈性的設計方案，避免後續設計和工程團隊的大規模修改。
跨團隊協作
跨團隊協作
跨團隊協作
產品開發過程中，業務端與客戶的需求溝通仍存在不確定性。設計團隊在專案進行時與其他利害關係人密切合作，以確保準確了解場域實際需求。
產品開發過程中，業務端與客戶的需求溝通仍存在不確定性。設計團隊在專案進行時與其他利害關係人密切合作，以確保準確了解場域實際需求。
