---
title: "dtac e-care B2B 支付平台"
description: "我们如何将 dtac 的 B2B 支付平台设计得更易用、更贴近中小企业与大型企业客户。"
canonical: https://oozou.com/zh-Hans/case-studies/dtac-e-care-platform
locale: zh-Hans
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-Hans/contact

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