後台用電管理系統

Power consumption management

專案背景

2023 04-05 web UI設計

後台用電管理系統是一套透過智慧插座集中管理用電量的網頁系統,利用智慧插座管理區域用電量、控管插座開關、監看使用時間,透過此系統達到集中管理的效果

Who

管理人員

When

危急時刻

Where

大量用電場所

Why

省電/安全

How

省力/效率

Role
Product designer
Goal
5週內完成可Demo的產品
Tool
element 元件
Intro

透過群組化的方式,高效管理智慧插座,達成場景自動化。
為提滿足安全用電的需求,新增了高用電通知跟超時使用的功能,並且自動統計總用電量,達到管理全屋用電的效果

設計流程

這次專案是為了提案給企業客戶,為講求在最快的時間內達成目標,我們使用開源軟體element上的元件作為設計基礎,並由此為基礎下去做UI上的變化,可以大幅縮短工程師刻畫介面所需要的時間

用戶研究

本專案是為了醫療環境所設計的後台控制系統,主要目標是為了監控用電量與用管控插座用電,建立安全且達成省電效果的環境

用戶旅程地圖

流程設計

為確保能夠在1個月內完成開發完成,我們先選定幾個重點功能,馬上著手進行流程設計,不特別發想其他功能,主要的目標是快速完成MVP

草圖製作

在完成使用者輪廓跟情境使用的設定後,我開始著手進行草圖著製作,但因為要完全依照element元件進行設計,因此先詳細閱讀guideline再進行後續的設計,確認UI的彈性與限制,確保後續也可以跟工程師有效的溝通

設計系統建置

為了加快開發的速度,先建立了簡單的設計系統後,透過可重複使用的元件重新組裝,後續可針對詳細內容做刻畫,再繪製Wireframe,經過幾番討論,確定大致樣式跟可行性後,進行製作prototype

元件重新組合

在後台管理系統的使用場景,並需要太多華麗的UI設計,我主要採用一致性的視覺排列,讓視覺感官較不易疲勞;設計多以可以重新排列的方式下去做組合,也可以加快開發的時間

Wirframe

選擇直接利用wireframe跟專案經理及工程師討論,因有相對的元件可以參考,因此在討論時可以透過視覺直接對應到元件,也可以幫助工程師在進行Study的時候有東西可以對照,加快後續開發速度,在實作可行性方面也可以先進行討論。

Hi-Fi Prototrpe

高擬真的Prototype可以讓我們在產品正式上架前進行設計測試,確保畫面有達到預期效果

設計迭代

我們選擇線上測試軟體Maze進行使用者測試,由實驗發現,對使用者來說過多的文字會擾亂視覺,較難判斷任務要如何進行,且使用者會比較容易注意到有色塊的地方,對於icon、圖像也表較敏感

任務:設定超時發通知,並關閉插座

使用者很直覺的會直接點擊關閉,而非設定,但按鍵較不明顯,初步判斷此功能是需要學習,並不能靠直覺就成功

任務:刪除智慧插座

因添加智慧插座是由我們添加,並不希望使用者可以輕易就刪除插座,因此將這個功能放置在比較不明顯的位置,對我們來說成功達成目標

任務:查看離線設備

本產品主要是用來監看有哪些裝置離線,使用卡片式的設計區分元件,並放在最上方,可以讓使用者較容易注意到

痛點說明

安全通知告訴你

在我們將通知類型細分為有危險性的安全類型通知跟一般使用通知,並且記錄發生的時間與該產品名稱,讓使用者可以即時知道,危險性高的通知即便沒使用網頁也會跳出,危險性低的通知在使用網頁時才會跳出

警示條件任你選

用配合使用者的工作模式,將警示功能新增可彈性調整,使用者可以根據不同區域電器使用的方式不同,調整它所需的警示條件

成果與反思

超乎預期的 第一階段提案

我們成功在時間產出MVP產品,除了原本預期會做到的2個功能,因為成功將設計時間縮短的關係,工程團隊能夠有更多時間進行開法,我們有剩餘的時間完成第二階段的功能,客戶看到後十分滿意我們的成果,並接受第提案

體驗與商業價值平衡

這次的專案從發起到最後提案僅有不到2個月的時間,身為產品設計師,挑選出可以快速打中客戶內心的功能是我需要斟酌的,因此我將時間分配為做簡單的設計研究再來設計流程,但MVP產品不是就要捨棄使用者體驗,而是做好的priority,設定階段完成

NEXT PROJECT- SiMPNiC Smarthome APP

馬上看 >>>