---
title: "dtac e-care แพลตฟอร์มชำระเงิน B2B"
description: "เราออกแบบแพลตฟอร์มชำระเงิน B2B ของ dtac ให้เข้าถึงง่ายและใช้งานสะดวกยิ่งขึ้นสำหรับลูกค้า SME และองค์กรได้อย่างไร"
canonical: https://oozou.com/th/case-studies/dtac-e-care-platform
locale: th
date: 2021-01-23
client: dtac
industry: Telecommunications
---

# dtac e-care แพลตฟอร์มชำระเงิน B2B

> ออกแบบแพลตฟอร์มชำระเงิน B2B ของ dtac ให้เข้าถึงง่ายและใช้งานสะดวกยิ่งขึ้น เพื่อให้ลูกค้า SME และองค์กรจัดการข้อมูลบิล ดูประวัติธุรกรรม และชำระค่าแพ็กเกจมือถือออนไลน์ได้

- 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

ลูกค้า SME และองค์กรของ dtac เลือกแพ็กเกจมือถือและจัดการบัญชีบนแพลตฟอร์มเดิมได้อยู่แล้ว แต่จะให้บริการดิจิทัลได้ครบทุกขั้นตอนจริง ต้องมีระบบชำระเงิน ฟีเจอร์สำคัญที่ช่วยให้ลูกค้าย้ายจากช่องทางออฟไลน์มาออนไลน์ได้ไม่สะดุด

## Solution

OOZOU ออกแบบเว็บไซต์ Responsive ให้ผู้ใช้ SME และองค์กรจัดการข้อมูลบิล ดูประวัติธุรกรรม และชำระค่าแพ็กเกจมือถือได้ในที่เดียว แต่ละสัปดาห์จะส่ง Wireframe UX และงานออกแบบ UI ให้ลูกค้าดู เพื่อรับ Feedback ไปปรับต่อ

## ที่มาของโครงการ

dtac มีผู้ใช้บริการเกือบ 20 ล้านราย และเป็นหนึ่งในผู้ให้บริการสื่อสารไร้สายและเทคโนโลยีมือถือรายใหญ่ที่สุดในไทย ลูกค้า SME และองค์กรของ dtac เลือกแพ็กเกจมือถือและจัดการบัญชีบนแพลตฟอร์มเดิมได้อยู่แล้ว แต่จะให้บริการดิจิทัลได้ครบทุกขั้นตอนจริง ต้องมีระบบชำระเงิน ฟีเจอร์สำคัญที่ช่วยให้ลูกค้าย้ายจากช่องทางออฟไลน์มาใช้บริการออนไลน์ได้ต่อเนื่อง

OOZOU ส่งทีมนักออกแบบ 2 คนและผู้จัดการโครงการ 1 คน เข้าไปทำงานใกล้ชิดกับทีมธุรกิจและทีมพัฒนาของลูกค้า แต่ละสัปดาห์เราจะส่ง Wireframe UX และงานออกแบบ UI ให้ลูกค้าดู เพื่อรับ Feedback ไปปรับต่อ

### กลุ่มลูกค้าเป้าหมาย

- SME ที่มีหมายเลขลงทะเบียนไม่เกิน 200 หมายเลข
- องค์กรที่มีหลายบัญชี และลงทะเบียนหมายเลขมือถือไว้มากกว่า 200 หมายเลข

### ผู้ใช้งาน

- ผู้ดูแลระบบและนักบัญชีที่ต้องดูข้อมูลบิลและเอกสารไว้ใช้ในงานบัญชีและการเงินของบริษัท

## Pain Points

![ภาพประกอบปัญหาที่ผู้ใช้เจอเรื่องบิลและการชำระเงิน](https://oozou.com/images/case-study/dtac-e-care-pain-points.webp)

### ติดตามยอดค้างชำระได้ยาก

ลูกค้า SME และองค์กรมีบัญชีจำนวนมาก แต่ละบัญชีก็ต่างกันและซับซ้อน การติดตามยอดคงเหลือให้ครบทุกบัญชีจึงเป็นเรื่องยาก

### จัดเก็บบิลและใบเสร็จใช้เวลานาน

หลังจากได้รับใบแจ้งหนี้หรือชำระบิลแล้ว ผู้ใช้ต้องจัดเก็บเอกสารทั้งหมดเอง ยิ่งบริษัทมีหลายบัญชี ก็ยิ่งใช้เวลาจัดเอกสารนานขึ้น

### ต้องไปจ่ายบิลที่เคาน์เตอร์

ต้องถือใบแจ้งหนี้ไปจ่ายที่ธนาคารหรือเคาน์เตอร์ dtac ซึ่งเสียเวลา ยิ่งถ้าต้องต่อคิวก็ยิ่งนาน

## ขอบเขตงาน

1. **New Features**: ออกแบบฟีเจอร์ที่ช่วยให้ผู้ใช้ชำระบิลได้สะดวกขึ้น
2. **Design Style Guide**: ออกแบบ UI ให้เข้ากับแบรนด์ของบริษัทและกลุ่มลูกค้าเป้าหมาย
3. **Responsive Design**: ออกแบบให้แสดงผลได้ดีบนหลายอุปกรณ์ ทั้งเดสก์ท็อป แท็บเล็ต และมือถือ

## วิธีการทำงานของเรา

เป้าหมายของเรา: ออกแบบเว็บไซต์แบบ Responsive ให้ผู้ใช้ SME และองค์กรจัดการข้อมูลบิล ดูประวัติธุรกรรม และชำระค่าแพ็กเกจมือถือได้

1. **Ideate solutions**: คิดวิธีแก้ Pain Point ของผู้ใช้ และเรียงว่า User Story ไหนต้องทำก่อน เพื่อเปิดตัว MVP และพัฒนาต่อเนื่อง
2. **Design user journey**: ออกแบบ User Flow ตั้งแต่ตรวจสอบยอดคงเหลือในบัญชีจนชำระเงินออนไลน์เสร็จ
3. **Create wireframes**: ทำ Wireframe ตามประสบการณ์ที่อยากให้ผู้ใช้ได้รับ แล้วทบทวนร่วมกับลูกค้าและทีมพัฒนา ดูว่าติดข้อจำกัดทางเทคนิคตรงไหน แล้วปรับแบบเป็นรอบ ๆ
4. **User interface designs**: ออกแบบ UI ของเว็บแบบ Responsive ให้เข้ากับแบรนด์ของบริษัทและกลุ่มผู้ใช้เป้าหมาย
5. **Design demo**: พาลูกค้าดูการทำงานของฟีเจอร์ที่ออกแบบเสร็จแล้ว

## User Flow

เราวาง User Flow ที่ผู้ใช้ SME และองค์กรใช้จัดการข้อมูลบิล ดูประวัติธุรกรรม และชำระค่าแพ็กเกจมือถือ

![แผนภาพ User Flow ของ dtac e-care ตั้งแต่เข้าบัญชีจนจ่ายเงินออนไลน์](https://oozou.com/images/case-study/dtac-e-care-user-flow.webp)

## การออกแบบ Wireframe

เราทำ Wireframe ตามประสบการณ์ที่อยากให้ผู้ใช้ได้รับ แล้วทบทวนร่วมกับ dtac และทีมพัฒนาของ dtac

![งานออกแบบ Wireframe ของหน้าจอหลักบน dtac e-care](https://oozou.com/images/case-study/dtac-e-care-wireframes.webp)

## การออกแบบ Visual

เราออกแบบ UI ให้เข้ากับแบรนด์ของบริษัทและกลุ่มลูกค้าเป้าหมาย ครอบคลุมทั้งสี ไอคอน และตัวอักษร

- **Colors**: #19AAF8, #E5258E, #F29000, #00C249, #41415B
- **Iconography**: ชุดไอคอนสไตล์เดียวกัน ที่ออกแบบมาใช้ทั้งแพลตฟอร์ม
- **Typography**: ฟอนต์ dtac 2018 ในน้ำหนัก Light, Regular และ Bold

## การออกแบบ UI

dtac ต้องการให้ OOZOU ออกแบบแพลตฟอร์มที่ทำให้ลูกค้า B2B สะดวกมากขึ้นเวลาชำระเงินและจัดการบิล เราสร้างแพลตฟอร์มนี้ให้นักบัญชีและผู้ดูแลระบบตรวจสอบยอดค้างชำระ ดูรายการที่ชำระด้วยบัตรเครดิต และดูประวัติการชำระเงินได้ แพลตฟอร์มเป็นเว็บ Responsive ใช้งานง่ายบนทุกอุปกรณ์ เข้าใช้ได้ทุกที่ทุกเวลา

เราสัมภาษณ์นักบัญชี เพื่อจัดข้อมูลให้ตรงกับวิธีทำงานที่นักบัญชีคุ้นเคยอยู่แล้ว การคุยกับผู้ใช้จริงโดยตรง ช่วยให้เราออกแบบแอปที่เรียนรู้การใช้งานได้ง่ายและเร็วขึ้นมาก

### ตรวจสอบยอดค้างชำระได้ง่ายขึ้น

ไม่ต้องไล่ดูเอกสารทีละฉบับอีกแล้ว ผู้ใช้ดูยอดค้างชำระได้ง่าย เพราะเรียงข้อมูลตามลำดับชั้นที่คุ้นเคย

![หน้าจอยอดค้างชำระของ 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/th/contact

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