製造業複雜軟體的使用者體驗困境|智慧型製造SaaS的UI/UX案例分析

Wayne Hsu|徐偉
Wayne HSU
Published in
13 min readAug 4, 2020
- 本文部分内容已按保密協議調整 -

概述

- 提昇生產合作效率的SaaS、約6個模組筆電端做計畫+手機端做執行的搭配、APP子功能100+個 -

該平台屬於一家在上海於 2017–2020 年間極速成長的公司,員工人數在 3 年間從數 10 人擴張到 200 多人,主服務是個運行在「筆電、平板與手機」、幫製造業解決「工廠生產流程合作問題」的「SaaS」,隨「業務量短時高速成長」,長期偏重功能開發的策略讓平台的不友好體驗漸漸浮現。

角色

我的角色是主導「UX 全面優化」並與「6 位產品經理、12 位客戶成功專員、15 位工程師、1 位 UI 設計師」協調溝通,主負責從「專案發起」到「結果追蹤」,包含「專案管理、會議組織、使用者調研&體驗設計」。

1. 調查、分析、整理需求並定義問題

2. 實地訪查「焦點工廠」進行使用訪談核實問題

3. 繪製「使用者流程圖」與「低保真原形」向相關部門組織溝通會議

4. 產出「產品說明文檔」,並與客戶成功與研發部門評估可行性

5. 製作「可點擊 Prototype 」輔助客戶成功專員進行易用性測試

6. 排定「 Roadmap 」和「切分階段」輔助工程師訂定開發期程

7. 與UI設計師合作製作「高保真 UI 原形圖」

8. 與測試工程師、UI 設計師開上線前的會議審視視覺與流程

9. 追蹤後續客戶使用結果並持續帶回使用者回饋

挑戰

一線使用者:「我的工作是完成任務、不是學習你們的平台怎麼使用…」

- 原產品中複雜的資訊結構與導航系統 & 使用者反應 -

製造業「生產流程」根據生產的產品與物料常常千變萬化,再加上常有依照「每次訂單欲生產的品項不同」去重新制定的習慣。因此該平台的「功能彈性多元」始終是一大優勢,直到「不好用、太複雜」的聲音愈來愈大聲。

我的任務是讓「工廠各部門角色的使用者」都能「快速、無礙使用」,並讓系統的功能多元靈活再次成為優勢。

最高目標:

1. 讓各部門職位使用者快速無痛地適應各自流程
2. 將大量訊息依據使用情境去精鍊出必要的部分
3. 幫助平台後續迭代奠定使用友好的發展基礎

需求

- 150條UX需求 (最終整理結果):從具體到抽象的匯集整理過程 -

2019 年起,「平台體驗退步」的聲音開始頻繁流進 CEO 的耳朵,我與負責維繫客戶關係的客戶成功部門 (CS) 發起了「跨所有類型工廠」的調查,一舉帶回了 150 項「複雜程度不同、需求大小迥異」的 UX 優化反饋。

我從 150 項需求中逐步分析、整理,進而歸納出了最普遍被提起的 2 大痛點。為此,我很好奇為什麼會收到這麼多關於「找東西」的需求?而使用者們究竟都在「找什麼」?

1.「請幫我把 xxx 功能擺得明顯一點,每次都要重找」。
2.「請幫我把 xxx 框改得大一點,我一直找不到我需要的資訊」。

調研/發現

:使用者在工作流程中,真正需要的是什麼?

我請教「各領域專攻」的 CS 專員,同時也參考 CS 部門歸納「以工廠類型為劃分」的「Persona」,先剖析客戶們「個別製造領域」的大業務流程、再細化到部門上下游流程、以至部內各角色的流程。

從龐大的數據中挖深「各類型工廠、各部門」的「業務流程」與「系統流程」關係並歸納出以下圖表,瞭解到「各工廠部門間的大流程雖相似」,但部分流程或因該平台系統架構未支援,而客戶未能在平台上作業。

- 大流程相依性:業務功能對照流程圖 -

客戶對平台的「依賴性」

:平台覆蓋大多步驟,客戶能順利使用,但年長使用者找東西較艱辛
:平台僅覆蓋部分步驟, CS 暫靠人工手段繞過的解法換工廠或不適用
:平台僅覆蓋少許步驟,或底層架構未能支援而平台間數據難以對接

-

- 家具版材、化工製藥、電子組裝,系統以 QR Code 追蹤記錄物料在生產過程中產生的所有數據 -

發現即便是「處理類同物料的工廠」,底下「各部門」對平台的依賴性也完全不同,主因是,該平台在適應各種類工廠「原物料不同、處理流程截然不同」的挑戰下衍生了 2 個痛點:

類同功能:各種工廠的同角色在處理同類工作時需辨識多種「僅在細微流程上有些許差異」的類同功能。

大量資訊:生產流程各階段對物料記錄的資訊隨客戶工廠類型增加、而在平台上大量成長,同角色需辨識的資訊也進而倍增。

-

- 細部流程探索:功能交互流程圖 -

分析完客戶各流程的對比後,為讓團隊能更有依循地聚焦處理挑戰,我決定將當前平台上的 6 個模組在各種工廠「具體的分歧點」總結出來:

1. 行政業務:流程的「繁簡程度不同」衍生使用「第三方 ERP (未串接) 」的工廠只能靠人「手動互通數據」,或各種單據混用,例:原料入庫單同時也當採購單。

2. 資料數據:需要的「資料屬性不同」衍生需記錄的資訊大不相同,此為「訊息量激增點」,也是底層架構未能快速變通處,例:多層 BOM 與單層 BOM。

3. 質量檢驗:處理的「原物料不同」衍生「檢驗方式、標準」五花八門,記錄的詳細程度也大不相同,甚至有「每次標準都只能生產當下決定」,例:陶瓷當下選一個當合格品。

4. 生產執行:生產的「產品種類不同」衍生生產方式有的一條流水線、有的多點同時進行、有的複合型,管控進度的嚴謹程度不同、讓系統流程高度分歧,例:SOP 流程生產跟一般流程生產。

5. 物料管理:管理的「原始物料不同」衍生系統中多組「類同功能」,而同功能又需「人眼辨識細部分支」,導航結構已然超過 5 層,例:物料移轉過程。

6. 設備管理:設備的「依賴面向不同」衍生有的需要數據雙向串接,有的僅需單方接收,採集的數據也不盡相同,有的更需進一步利用系統反控設備,例:化學加工品需針對質檢狀況控制機具調配方。

-

另一方面,當我試圖繼續細化歸納「不同工廠」的「各角色職能」時發現,根據「工廠大小、訂單內容」不同,單名角色的工作流程也會產生變化:

1. 固定流程 (多):單部門單職能、始終一致
2.
變化流程 (次):單部門多職能、每週輪替
3.
複合流程 (少):跨部門多職能、身兼多職

:想歸納出「各職能最簡短流程」幾乎不可能

-

- 實地訪談調研;現場使用概況 -

為瞭解使用者「找東西的實際痛點」,我跟 CS 發起了到「焦點客戶工廠」的實地調研,跟著該工廠配合著平台完整跑過多遍生產流程,並同時記錄觀察各階段抓取到的痛點與發現。

人員

1. 手機端青年使用者在 25–35 歲為少數 (大多為高中畢業),而年長使用者在 40–65 歲需配戴老花眼鏡者為多數 (大多為小學、國中畢業),普遍相對低科技適應而需 CS 輔助。

2. 筆電端使用者年齡多在 28–35 歲之間,高度科技適應,除資訊量有時較多的查找問題外,大多使用無礙。

設備

3. 手機端從 7 吋 iPhone 13 吋平板都有,走動、定點使用皆有。

4. 筆電端多使用 13 吋 Windows 筆電,多定點。

功能

5. 各職能使用者「每週」使用功能數量大致固定、順序不定 (單職能 5 個到多職能 13 個),不同職能彼此少交集 ,唯有同週身兼多職者例外。

6. 完成同項任務時,平台使用者在找功能或資訊時,最極端狀況耗費超過 45 秒 (對比平台上線前在紙本上查找只需 25 秒)。

現狀

:對一線使用者來說,過程中愈快形成「標準化作業」就離「做快、搶時間賺薪水」愈近。

在製造業裡,一線使用者的聲音最不容易被聽到,但最常使用產品的卻是他們,他們的表現幾乎最直接決定工廠的生產效率,對此,他們最關鍵的痛點是「適應平台的時間佔據了完成工作的時間」,接著我定義了下當前挑戰:

- APP每個任務,使用者得辨識「導航大類(2) > 次級類別(20) > 類別子功能(76)」,一天重覆 50 次以上 -
  1. 現有導航未能支援工廠靈活的情境

1.1. 層級結構多:使用者花費較多時間在尋找、而不能專注執行任務
1.2.
大導航失效:不同使用者需要的資訊功能皆不同、都希望放到最上層

- 在超過 30 條的資訊裡找需要的 1、2 條,有時因有限的響應設計而無法完整看全 -

2. 靈活的情境促使衍生大量的資訊

2.1. 未過濾的資訊:應各工廠需求而訊息漸漸增加,各項訊息得靠人眼過濾
2.2.
有限響應設計:筆電端的資訊因有限的響應式設計常未能完善展示

方案

:把「決定」與「時間」還給使用者,讓他們決定自己的流程、也精鍊資訊量到「足夠」即可。

對工廠大多使用者來說「展現所有資訊」與「資訊分層展示」都較易造成困惑,怎麼讓每個使用者都只看到自己要的、同時又過濾掉不必要的訊息?我決定「提高自訂化程度」,鎖定從「導航結構」與「資訊架構」著手:

- 利用「導航再聚合」和「書籤」把使用者直接帶到「第3級導航:類別子功能」 -
  1. 導航方式重構

功能以「部門」再聚合(筆電端)
工廠部門間流程大多固定、唯部內人員職能多變化,平台按「生產、檢驗、物料、設備、基礎設定」的導航漸不足支援中大型工廠「各部門嚴格控管部內數據、權限」和「鎖定部門關鍵字找功能與相應設定」的需求。

功能以「職能」做聚合(手機端)
許多工廠常配合訂單將固有職能重新組合出新流程,未此決定將「各工廠最常見 13 種職能」作為預設聚合功能的依據,另外「高亮最近 3 筆執行任務」幫助各角色在職能變化時定位先前正執行的任務。

功能書籤(筆電端&手機端)
導航調整讓平台更貼近實務作業外,為達成讓使用者相信「他們能更容易掌握手機端的工具」與「因應需要制定自己當前最必要的工具組合」,我提供了「書籤」的功能,讓使用者自訂自己的置頂導航。

- 資訊展示量自定,並提供多種適配介面空間功能 -

2. 資訊展示自訂

自訂展示個人最需要資訊(筆電端&手機端)
為在卡片與列表上提供各職能所需資訊,展示單一物料 30 多項訊息、與連帶生產過程中疊加的變成一大挑戰,實務上,使用者大多僅需「辨識特定幾項資訊」便能做出決策,為此,我提供「資訊展示開關」的功能。

提高空間自由分配彈性(筆電端)
使用 13 吋筆電端的使用者大多需在有限的空間處理比手機端使用者更多的訊息,為此提供了「表格欄寬自訂」與「多種版面配置」的設計以強化展示,另外增加「表頭拉把」給多仰賴滑鼠拖曳滑動的 Wnidows 使用者。

執行

執行階段共組織了「4 次、每次 1 小時」的會議,會議全程「錄音」以幫助與會者當下將注意力著重在「溝通」而不需因記錄而分心、二來所有成員可隨時回顧決策內容、三來亦能用作後續改良自己表述能力的材料。

-

Wireframe(草稿圖)

第一次會議「定調方案」,我以 Xmind 將新版導航製成心智圖、並用 Axure PR9 繪製了 Wireframe,此次優化跨及 6 個模組與各負責的產品經理,目的是與產品經理們「報告影響範圍」與「展示細節邏輯」並最終定調共識。

- APP & 開發邏輯注釋 -
- WEB & 開發邏輯注釋 -

-

Prototype(可點擊原形)

第二次會議「測試方案」,使用 Axure PR9 製作了「可點擊 Prototype」展示給多位 CS 專員,並請他們以各自負責種類工廠的專業角度「評估方案」,並後續帶到現場找各部門至少 2 名重點使用者進行「易用性測試」。

一週後的測試成果令人振奮

1. 40 歲以下使用者上手完全無礙
2. 45 歲以上使用者僅需口頭指導 1、2 次後亦能上手
3. 65 歲以上使用者需請 CS 輔助逐步教學

-

Roadmap(發展期程圖)

第三次會議「排期開發」,我共有 2 個月的時間完成該次優化,與「工程師」們進行「技術評估」講解方案與排定期程。Q4 的方案最終切割成 2 階段開發、一次上線,並將「產品說明文檔」上傳到 Jira 和 Wiki 共享。

150條需求按優先級與可行性分成4階段進行

-

UI Design(介面設計)

第四次會議「確認結果」,為確保開發成果盡可能貼近設計,上線當週與「工程師、設計師」審視最終成果,請工程師向大家「演示操作流程」。因應 APP 訊息展示自訂跨及 6 個模組工程較大,初步權衡先在資訊量膨脹最明顯的「物料」模組先行開發,總地來說,幾乎全部的設計最終都順利上線!

結果

一線使用者:「對嘛!早就該改了,都跟你們提多少次了,這樣快多了」

方案上線後,要給各工廠統一培訓與試跑驗收,有幸 CS 們熟知各自工廠生態,讓客戶適應期僅僅「一週」、非常快速,雖仍需仰賴後續優化所有「功能流程」才可能從根本加速,或是積木化切細功能的組合讓系統能「業務自定義」,但以當前收獲的成果來說,確實讓多數的客戶「大讚改得好」。

1. 一次自訂定的結果最少使用 1 週、最久持續 2 個月
2. 找東西的最極端時間
降至 10 秒 (原先 45 秒)

回顧

最後,被新冠肺炎疫情影響快速返臺,無法持續第 3、4 階段的次要優化。但調研成果與使用者反饋已完整地帶回公司與各部門共享,並在專案進展過程,努力輔助產品經理們,在未來的功能設計上能有更多「使用者」的角度可依循,並奠定平台良好 UX 體驗的初步基礎。

在這專案我達成了:

1. 歸納整理了龐大、複雜的工廠使用者流程與平台功能流程
2. 把第一線使用者的聲音大幅度帶回產品開發上游共享所有部門
3. 在產品與工程部門強化了 UX 體驗的價值,提高重視程度
4. 在平台上重構複雜的導航結構與大量資訊架構的方式

感謝你的時間與觀看

如過有任何想法與指教歡迎在留言區一起討論
你也可以在 LinkedInBehanceCakeResume 上找到我~

--

--

Wayne Hsu|徐偉
Wayne HSU

A UX/UI Designer who enjoy thinking|一個愛思考的 UX/UI 設計師