---
title: "dtac e-care B2B 付款平台"
description: "我們如何將 dtac 的 B2B 付款平台設計得更易於使用、更親近中小企業與大型企業客戶。"
canonical: https://oozou.com/zh-Hant/case-studies/dtac-e-care-platform
locale: zh-Hant
date: 2021-01-23
client: dtac
industry: Telecommunications
---

# dtac e-care B2B 付款平台

> 將 dtac 的 B2B 付款平台設計得更易於使用、更親近使用者，讓中小企業與大型企業客戶能夠管理帳單資訊、查看交易紀錄，並在線上支付行動方案費用。

- Client: dtac (https://www.dtac.co.th)
- Industry: Telecommunications
- Services: UX/UI Design, Design Style Guide, Responsive Web Design
- Team size: 3
- Published: 2021-01-23

## Challenge

dtac 已有一個供中小企業與大型企業客戶選擇行動方案並管理帳戶的平台。但要提供端到端的數位服務，付款處理成為打造從線下到線上無縫轉換的關鍵功能之一。

## Solution

OOZOU 提供了響應式網站的設計解決方案，讓中小企業與大型企業使用者能夠管理帳單資訊、查看交易紀錄並支付行動方案費用。我們以一週為一個衝刺週期，透過快速迭代交付使用者體驗線框圖與使用者介面設計。

## 專案背景

dtac 擁有近 2,000 萬名用戶，是泰國最大的無線通訊與行動科技供應商之一。他們已有一個供中小企業與大型企業客戶選擇行動方案並管理帳戶的平台。但要提供端到端的數位服務，付款處理成為打造從線下到線上無縫轉換的關鍵功能之一。

OOZOU 以兩名設計師與一名專案經理組成的團隊提供設計解決方案，並與客戶的業務及開發團隊緊密合作。我們以一週為一個衝刺週期，透過快速迭代交付使用者體驗線框圖與使用者介面設計。

### 目標客戶群

- 註冊門號最多 200 個的中小企業
- 擁有多個帳戶且註冊行動門號超過 200 個的大型企業

### 使用者

- 需要存取帳單資訊與文件以處理公司財務事務的管理者與會計人員

## 痛點

![使用者在帳單與付款方面的痛點插圖](https://oozou.com/images/case-study/dtac-e-care-pain-points.webp)

### 難以追蹤未繳餘額

要在大量多樣且複雜的中小企業與大型企業帳戶之間持續追蹤餘額，是一項挑戰。

### 管理帳單紀錄耗時費力

收到發票或繳費之後，使用者必須自行管理所有紀錄。公司的帳戶越多，整理文件所需的時間就越長。

### 線下付款

帶著發票到銀行櫃檯或 dtac 櫃檯服務繳費相當耗時，遇到排隊時更是如此。

## 工作範疇

1. **新功能**：交付讓使用者輕鬆繳費的設計解決方案
2. **設計風格指南**：提供符合公司品牌形象與目標客戶的使用者介面設計
3. **響應式設計**：交付相容於桌機、平板與手機等多種裝置的響應式設計

## 我們的工作方式

我們的目標：為中小企業與大型企業使用者設計一個響應式網站，用於管理帳單資訊、查看交易紀錄並支付行動方案費用。

1. **發想解決方案**：針對痛點發想解決方案，為最小可行產品的發布與後續開發排定使用者故事的優先順序。
2. **設計使用者旅程**：設計從查詢帳戶餘額到完成線上付款的使用者旅程。
3. **建立線框圖**：為預期的使用者體驗建立線框圖，並與客戶及其開發團隊一同檢視。找出技術限制並迭代設計。
4. **使用者介面設計**：為響應式網頁開發使用者介面設計，體現公司品牌形象與產品的目標使用者。
5. **設計成果展示**：向客戶展示完成的功能設計。

## 使用者流程

我們規劃了中小企業與大型企業使用者管理帳單資訊、查看交易紀錄並支付行動方案費用的流程。

![dtac e-care 從帳戶存取到線上付款的使用者流程圖](https://oozou.com/images/case-study/dtac-e-care-user-flow.webp)

## 線框圖設計

我們為理想的使用者體驗建立線框圖，並與客戶及其開發團隊一同檢視。

![dtac e-care 主要畫面的線框圖設計](https://oozou.com/images/case-study/dtac-e-care-wireframes.webp)

## 視覺化設計

我們提供符合公司品牌形象與目標客戶的使用者介面設計，涵蓋色彩、圖示與字體。

- **色彩**：#19AAF8、#E5258E、#F29000、#00C249、#41415B
- **圖示**：為平台設計的一致圖示集
- **字體**：dtac 2018 字體的 light、regular 與 bold 字重

## 使用者介面設計

dtac 希望 OOZOU 設計一個平台，讓 B2B 客戶在使用付款服務與帳單管理時更加安心。我們為會計人員與管理者打造了這個平台，讓他們可以查詢未繳餘額、檢視信用卡付款並瀏覽付款紀錄。此平台採用響應式網頁設計，在所有裝置類型上都能提供友善的使用體驗。使用者隨時隨地都能使用。

我們訪談了會計人員，確保資訊呈現的格式符合他們現有的工作流程。透過直接與終端使用者互動，我們設計出一款學習曲線大幅縮短的應用程式。

### 簡化餘額查詢方式

逐一核對文件已成為過去。透過我們的設計，使用者能以熟悉的層級結構直覺地檢視未繳餘額。

![dtac e-care 在桌機與手機上的未繳餘額畫面](https://oozou.com/images/case-study/dtac-e-care-balance.webp)

### 管理所有帳單紀錄

更輕鬆地管理收據與帳單，並降低文件遺失的風險。

### 便捷的付款服務

提供簡單的線上付款流程，取代不便的櫃檯服務與銀行排隊。

![dtac e-care 線上付款畫面](https://oozou.com/images/case-study/dtac-e-care-payment.webp)

---

Contact OOZOU: hello@oozou.com · +66 2544 0000 · https://oozou.com/zh-Hant/contact

More for AI agents: https://oozou.com/llms.txt · every page has a markdown twin at its URL plus ".md"