BenQ Account Management System (AMS)

帳號管理軟體改版,優化使用者的管理體驗

Duration

5個月,2024年5月至9月

Team Member

產品經理、兩位 UX 設計師、UI 設計師、前端工程師與後端工程師

Responsibility

前期研究、利害關係人溝通、響應式規劃、工程交付、驗證規劃

Intro

AMS 主要協助校方 IT 管理教職員帳號,也提供教師設定個人帳號,是 BenQ 教育解決方案的重要 Web App 之一。

隨著產品發展,複雜的介面與紊亂的流程逐漸成為阻礙。22 年研究團隊前往北美實地訪談,歷經兩年醞釀,終於在 24 年迎來全面改版。

Impact ✨

1.

第一個完全支援手機使用的 BenQ 教育解決方案 Web App

2.

成功整合 Header、Side NAV 等複合元件進入設計系統,成為跨產品體驗一致性的開端

📦 Background

AMS 是什麼?又遇到哪些問題?

想像你是個老師,走進教室後只要拿出 NFC 卡,輕觸 BenQ 大型智慧顯示器(IFP),畫面瞬間跳出你的專屬儀表板──收藏的教案、網址書籤、教學 App 都能一鍵開啟,這就是 AMS。

AMS 也支援校方管理員在後台新增或調整老師帳號與使用權限,無論是推送新教材、變更書籤,或綁定雲端硬碟,都能簡單完成。

但是這樣的 AMS 卻屢屢收到客戶抱怨『老師長年使用意願低』『管理員反應操作很不直覺』,這中間到底出了什麼問題?

🔍 Clarify the Issues

遠在太平洋彼岸要如何釐清問題與改版方向?

起初,我們只收到一份較為概括的需求說明,嘗試約訪真實用戶也無功而返,只拿到幾封過去客戶的投訴信。於是,我與設計夥伴主動採取以下策略:

#1 自己做啟發式評估

我們根據 Jakob Nielsen 的十項易用性原則為基礎來審視產品問題。為了平衡觀點,我們也邀請了非專案設計師一起評估。

過程中,我們發現了不少問題 😵‍💫:

🔼 與設計夥伴們的小小工作坊

上述問題中,又以『數據表格(Data Table)使用性不佳』、『相似功能操作步驟不一』、『缺乏即時回饋』最為嚴重。

#2 參考歷史訪談資料

22 年,我有幸遠端跟訪在北美教學場域訪談的同事們,協助整理 20+ 場訪談逐字稿與協助收斂洞察。梳理老師與 IT 人員在真實環境下使用 AMS 與其他 BenQ 相關服務的各種痛點。

雖然近兩年後才正式改版,但期間 AMS 都是由我負責維護,也與 PM 持續追蹤競業趨勢與變化,共同評估後認為訪談資料仍具重要參考價值。以下節錄部分逐字稿:

*DMS:全名設備管理系統(Device Management System),是 BenQ 教育解決方案中專注為 IT 人員打造好用設備(大型電子互動白板)管理的產品。

綜合啟發式評估與歷史訪談資料,我們收斂出兩類問題:

易用性問題

管理功能的操作流程不一致

數據表格(Data Table)使用性不佳

缺乏結果反饋

不支援手機使用造成不便

學習成本太高,老師使用意願低

跨產品維度問題

AMS 產品定位不明確

管理功能使用體驗與 DMS 差距甚遠

#3 對焦商業願景

在收斂上述問題後,我們回頭找 PM 與事業部門主管等人溝通產品未來願景與商業考量。交流後得知以下重要資訊:

短期目標

希望支援手機使用,有利於以『免攜筆電入班』吸引老師使用

長期願景

產品定位將逐步轉型,帳號管理功能將在未來與 DMS 整合

結合以上資訊,我們終於得出改版的具體方向,除了易用性問題外,響應式的規劃也是重點。

透過訪談資料我們也得知 IT 人員需要更直覺的設定流程與更好用的 Data Table,並且與 DMS 有一致或接近的操作體驗;老師則需要簡單直覺的個人設定,省去不必要的學習成本!

🧠 Design & Iterate

沒有捷徑,一步步達到更好平衡的過程

在設計階段,我們進行競業分析,同時整理內部溝通的內容。完成後邀請 PM 與設計主管共同討論出以下解決方案:

重整資訊層級

導入響應式設計

統一管理功能的操作流程

對齊跨產品體驗一致性

重整資訊層級

老師的使用意願與介面直覺性呈高度正相關。以個人設定頁為例,我們決定把所有功能依照使用時機與用途分群後,以 Tabs 規劃呈現,隱蔽所有非必要資訊。

導入響應式設計

為了實現任何裝置都可以直覺使用 AMS 的願景,在規劃 Mobile view 期間,一直以『協助使用者專注在當下最重要任務』為首要原則。

統一操作流程

我首先梳理所有管理任務的操作流程,並考量 IT 人員的真實使用情境,最終決定統一調整為『先選帳號,再選設定項目』的版本。

對齊跨產品體驗一致性

為了提升一致性與使用者熟悉度,我們以同為 BenQ 教育解決方案的 DMS 為參考,重新檢視 AMS 操作流程與資訊呈現。

由於兩者的核心用戶都是學校的 IT 人員,因此我們希望優先透過整合操作流程,降低跨 Web App 使用時的學習成本。以下是 DMS 與 AMS 的操作流程與差異:

此外,我們也為 AMS 導入設計系統,從介面與元件角度對齊 DMS,提升熟悉度與一致性:

過程中,我們不只與設計系統團隊頻繁溝通與調整,也同時考量相關 Web App 未來導入設計系統的難點,與相關設計團隊多次對焦。

這些努力最終化為設計系統升級的契機,其中,最挑戰也最值得深入探討的,正是我如何設計手機版 Data Table,一個資訊密度極高、對核心使用者非常關鍵、卻在手機裝置上長期缺乏良好體驗的元件。

以下是我針對 Data Table 所經歷的完整設計歷程:

🤿 ️Deep Dive

如何讓複雜的 Data Table 在手機上更好用?

為什麼是 Data Table?

Data Table 是 BenQ 教育解決方案中最重要但也最複雜的元件。在與設計系統團隊完成 Desktop 規範後,我們面臨一項挑戰:

「如何在有限的螢幕空間保持核心功能完整,同時確保用戶能順利完成任務?」

設計與迭代

最早我參考 Vuetify(設計系統使用的前端套件)預設的版本,維持所有欄位呈現,允許橫向與縱向滾動。但內部評估後卻發現想像與現實的巨大落差…

Ver 1. 雙向滾動 Table view

面對差強人意的結果,讓我意識到要想辦法在有限空間幫助使用者更快聚焦任務核心。

IT 的主要任務是「找到特定帳號並進行編輯」。因此我重整資訊層級,將預設顯示欄位限縮為最具識別力的 Name 與 Email。其他改動包含:新增欄位篩選器 & 規劃 Pagination 元件。

很幸運的,這些改動在內部獲得正面回饋!

Ver 2. 精簡資訊欄位版 Table view

為了解決載入時間過長問題,我更規劃極簡資訊的 List view 版本,聚焦在核心任務的使用情境,僅顯示身份識別資訊(Name & Email)。這版本收穫內部測試好評,簡單、輕量且快速:

Ver 3. 極簡版 List view

「舊客戶不適應怎麼辦?」

來自 PM 的疑慮,儘管有正面的內部回饋與測試結果背書。溝通後他仍傾向維持 Table view 版本。

溝通是理解的不二法門

深入溝通後,才理解疑慮的背後是擔心:「List view 排除瀏覽所有其餘欄位資訊的可能性」

令人兩難的是,這確實符合設計目標,但過分簡化的設計也限制『檢視特定欄位』的少數情境。於是我開始反思:如何讓設計更兼容?

靈感源於生活

我回頭審視不同產品 Data Table 的案例,發現同時提供多種視圖來滿足不同的檢視需求的案例在日常並不少見:

我們是否也能在 AMS 中套用相同概念?

於是我保留 Table view,讓有進階需求的使用者以 Segment control 切換,而預設仍維持任務導向的 List view。不僅確保多數行動情境下的操作體驗,也解決 PM 的顧慮。

Final Ver. 雙檢視版本(Table view & List view)

🔬 未能落地的真實用戶驗證

為了驗證最終版本在真實教學環境下的可行性,我與 UI 設計師共同規劃了高擬真的 Prototype 與任務導向的測試問卷,託出差前往美國的 PM 轉交給具現場經驗的 IT 人員與 FAE 操作與回饋。

雖然因時程與人力因素,很可惜的這份測試最終未能完整推行,但準備過程也幫助我釐清任務邏輯,並作為日後內部規劃認知走查的依據。

🔼 測試任務說明

🔼 與 UI 設計師一起完成的 Prototype 規劃

由於 List view 是全新的設計,儘管失去實際驗證成效的機會,但我仍盡能力所及,主動提議規劃 Onboarding,嘗試盡可能降低舊使用者不適的風險。

🔼 作為替代方案,我額外規劃的 AMS Onboarding Tutorial

🌟 Outcome

設計成果

在數不盡的設計迭代、測試回饋與內部討論後,我們終於完成 AMS 的改版與響應式規劃,以下是設計成果的部分亮點:

#1 降低個人設定門檻

#2 統一管理流程

#3 對齊跨產品體驗

#4 全面升級響應式

1.

Tabs 分群,降低認知負荷

2.

Helps 功能,提供教學影片連結

🌟 Extra Influences

專案之外的影響力

關注專案目標之外,我也致力於如何為設計團隊帶來更多面向的價值,以下是一些成果:

升級設計系統

因為原設計系統只規劃 Desktop view,我在專案期間與設計系統團隊共同努力,在開發階段中把所有元件升級為響應式版本。

跨服務體驗一致性跨出一大步

BenQ 教育解決方案包含 6 個 Web App與 Portal 網站,專案彼此獨立規劃,產品使用體驗差距大。

規劃改版之餘,我與各專案設計師、產品經理與工程師們達成共識,整合跨服務的 Header 與 Side NAV 等複合元件,嘗試消弭彼此巨大的體驗差異。

學習與反思

在高壓快速工作環境中,能夠花時間好好釐清問題是很難得的機會,很幸運有充足的時間可以探索,也很幸運有設計夥伴、主管與同事的協助與回饋,才能讓 AMS 變成更好的版本。