艾立運能 B2B SaaS TMS

2023
專案時程

4 個月
調派表上線後改版
2 週

我的角色

UI designer

我的職責

UI design

產品

B2B 電腦版網站

我的角色
我的角色UI/UX 產品設計師,負責 TMS 核心功能介面設計,與 PM、UX 與前後端工程師協作,將複雜運務流程轉化為可實作的系統介面。
團隊挑戰
既有系統資訊量龐大、流程複雜,PM 與工程在功能範圍與操作邏輯上難以快速對齊,導致設計與開發反覆調整。
設計方案
我重新梳理調派、派車單等核心運務流程,將關鍵資訊結構化並視覺化,作為 PM 與工程討論的共識基礎,協助團隊在開發前對齊需求與實作方式。
產出價值
建立與迭代 UI Design System 並導入專案,提升介面一致性與開發效率,降低後續功能擴充與維護成本。

背景介紹

1. 關於艾立運能

Ally Transport 為托運人、承運人和司機提供 SaaS 解決方案。我們的服務旨在簡化貨物運輸流程。本專案根據客戶需求開發了一個全新的客製化服務平台求為三種使用者角色:客戶(供應商)、倉庫團隊和營運團隊提供 TMS 服務。

2. 專案目標

透過智慧 TMS 儀表板,實現即時追蹤,增強運輸管理,簡化貨運流程。

1

運輸規劃和執行

即時追蹤和追溯功能監控進度

2

貨運管理

運能調派、簡化報價到契約流程

3

TMS 儀表板

預測運輸需求、分析費率

3. 挑戰與策略
1

簡化複雜貨運資訊

透過更直覺的設計手法,提升資訊的清晰度與使用者的理解效率。

2

面對高昂的開發成本

以可行性為優先,專注於不影響核心使用需求的解決方案,達到效益與資源間的平衡。

3

有限資源下的使用者導向設計

透過更直覺的設計手法,提升資訊的清晰度與使用者的理解效率。

4. 團隊成員與角色
Product team
UI designer (我)
1 人

UI design, 建立 UI design system, 繪製 prototype, 易用性測試

UX designer
1 人

進行訪談、資料分析、繪製wireframe,與 PM 提出產品優化建議

Product manager
2 人

管理專案進度、測試和產品上線後績效追蹤

Team leader
一人

產品負責人

我的角色:
在此專案中,我與產品經理、UX 設計師及前端工程師密切合作,設計一套 B2B 運輸管理系統(TMS)。我的主要角色為 UI/UX 設計師,除了介面設計外,也參與需求釐清、流程討論與技術可行性對齊,確保設計能順利落地並符合開發實務。
5. 使用者

我們的承運商每日會使用 TMS 系統上傳隔日的託運單,當倉庫人員接收到託運單需求時,透過系統內的託運單資訊進行揀貨與理貨,我們的營運人員則在訂單準備出貨時,進行配送調度,依照當日運能狀態,將託運單指派給車行與司機進行商品的配送。

內部營運人員
承運商
倉庫人員
司機

設計原則

簡化
可擴充的
易讀性
目標導向

問題診斷與設計洞察

問題診斷最初來自與 PM 的需求討論,PM 分享了來自內部營運與客戶端的回饋,指出調度人員在日常操作中,難以快速掌握訂單狀態與流程進度。經過進一步討論後,我們發現資訊分散於多個畫面,導致操作效率低落,成為影響實際工作流程的關鍵痛點。
資訊過載
視覺層級複雜
缺乏可讀性
痛點 1
資訊過載
對於 B2B 運輸管理系統而言,
 使用者每天要處理大量訂單與調度決策,
 最大的問題不是功能不足,而是資訊太多、決策成本太高,他們在高時間壓力下工作,
 錯誤會直接影響交期與成本,因此系統設計的重點是清楚與穩定,而不是探索感。

在另一個公司專案中,我們一開始嘗試使用日曆形式來設計車輛調度使用者介面。利用滑鼠拖曳功能來實現日常調度操作。
然而,由於目前專案中的調度內容更加複雜,我們計劃將其重新設計為表格形式,並以自動化排程趟次的方式帶入預設資訊,減少人為調度產生的錯誤。

調派以日程排程表版本 Demo
在改版調派表的使用者訪談中,我們從用戶操作行為觀察到,該頁面過於複雜,用戶經常忘記已選取的項目,複雜度高使得調度任務變得更加困難。並且既有的 UI 元件已經無法滿足當前的需求。
解決方案 1
結構化資訊以提高可讀性

我們將雜亂的調派表介面重新組織成更有條理的表格格式,使資訊一目了然。

痛點 2
可讀性差:操作複雜且缺乏即時回饋
1

複雜的操作和缺乏即時回饋

舊介面繁瑣的表格選擇和資訊過載使得使用者難以快速取得所需資訊。

2

頁面視覺可讀性差

表格中使用了過多的顏色塊來顯示狀態,降低了頁面的可讀性。

解決方案 2
簡化流程並提高資訊可讀性
1
簡化操作流程:
我簡化了操作流程步驟(例如把篩選項目攤開顯示,而非需要點擊展開),以提升使用者體驗,並在流程的每一步都提供了清晰的狀態回饋。
2
迭代優化 Design Guideline:
我重新整理了整體使用者介面顏色方案,並對現有的設計指南進行了迭代,以確保產品在視覺上的一致性。同時,我進行了按鈕視覺層級彙整與調整,幫助使用者在複雜的介面中,能快速且不費力地找到最關鍵的操作。
Layout grids

僅限電腦版設計。網頁佈局由側邊選單和 12 列網格組成。

1
主要行動按鈕: 對於最重要、最核心的任務,例如「新增」、「下載」或「確認」,這些使用者最常使用且最需要快速找到的功能的按鈕,加入 Icon 並搭配文字,讓這些按鈕在視覺上更突出,能被使用者一眼掃描到藉以提升操作效率。
2
次要按鈕: 其他屬於輔助性質、只在特定情境下使用或點擊頻率較低的功能,例如「編輯」或「刪除」,我保留了純文字或純 Icon,以降低介面的視覺干擾,讓整個畫面看起來更乾淨。
3
系統維護性: 在改版的同時,我迭代更新 Design Guideline,撰寫按鈕使用情境,完善 Design guideline
3
增強資訊可見性:
為了提高可讀性,我做了以下設計變更:縮小了調度狀態的顏色範圍,並使用小標籤顯示,同時使用陰影和灰色背景來清楚地區分資訊層級。

UI 設計與迭代

我與工程師的設計協作:
在 UI 設計階段,我持續與前端工程師討論元件結構與互動行為,確保設計符合現有系統架構。部分畫面並非全新設計,而是基於既有元件進行延伸與優化,以維持介面一致性並降低開發成本。
Problem 3
Bad readability
Dispatching Page Table Version Before Redesign

介面缺乏視覺引導,容易讓使用者感到疲勞。

Solution 3
任務導向優化視覺層級,透過卡片式佈局與圖示設計,讓介面更具掃視性。

設計目標:優化視覺層級,透過卡片式佈局與圖示設計,讓介面更具掃視性。
透過資訊分流,將不同任務的資料分開,讓使用者能更專注於當前任務。

To streamline information by separating data for different tasks, allowing users to focus on their current work. We restructured the cluttered interface and presented it in a more organized table format, enabling users to quickly scan and filter information.

成果

使用者回饋
易用性與使用效率
可擴充性
設計成果與團隊影響:
透過在前期即與 PM 與工程師對齊需求與可行性,最終設計大幅減少開發過程中的反覆確認與修改。重整後的介面協助使用者更快速掌握訂單狀態,提升日常調度與操作流程的順暢度。
1
使用者回饋: 使用者反應頁面資訊變得更加清晰,提升介面的整體易用性。
2
易用性與使用效率: 經過易用性測試,我們發現改版後有效降低使用者完成一趟調派任務的時間,減少在派車過程中可能發生的錯誤。
3
可擴充性: 改版後 UI 元件的可擴展性提升,更能因應未來的需求做調整,另外 UI 配色簡化使得視覺上更清晰。

運輸管理系統 UI 設計

在進入高保真設計前,我、UX 設計師、 PM 及前端工程師多次檢視使用者流程,針對不同角色的操作情境與系統邏輯進行確認。工程端也在此階段提出即時資料更新與狀態切換的技術限制,我因此調整部分流程設計,以降低後續實作風險。

配送狀態一目瞭然的介面

客戶訂單頁
表格 View

提供跨平台訂單追蹤服務,使用者能夠隨時隨地追蹤運輸狀態。

清單 View

我們根據資料類型設計不同的清單 UI。

1
時間篩選對運輸來說很重要,因此我們將他作為頁面的主要篩選條件。
2
透過展開與收合的「篩選」按鈕切換按鈕顯示篩選器,並可一目了然地使用其他篩選條件。
3
CTA 按鈕會根據使用者選項與操作行為啟用,我們將他放置在螢幕的右上角。
託運單細節頁

運輸調度平台

我們整合各運輸商的運能,提高車輛利用率。
User Journey
Demo Video
運輸調派趟次表
1
Fixed header 包含主要操作行為按鈕與篩選項目呈現於上方。
2
託運單調派項目設計為可展開收合的,頁面項目自動預設收合,已確認的趟次將自動收合並移至待定行程下方,將例行排程事項清單 UI 顯示更直覺,以減少調度工作區中大量資料造成的視覺疲勞。
3
已選取項目摘要浮動訊息: 用戶選取內容後,畫面呈現浮動訊息於下方,幫助使用者快速掌握關鍵數據。
未調派訂單工作區

司機接單與回報系統

我們決定使用 Line APP 讓司機進行接單與狀態回報,每個司機幾乎都有使用 Line 這項 APP,我們的司機不用另外下載其他 App ,加上司機使用 Line 的操作有一定的熟悉度。

Ally transport LINE drivers report system

艾立運能股份有限公司 Ally Transport System Co., Ltd.
Ally Transport © 2023
← Prev projectNext project →

Get in touch

隨時歡迎各種合作機會!