วางมือถือ
แล้วยกแบตได้เลย

Thai Honda rolled out electric-motorbike battery-swap cabinets across Bangkok to push clean energy. The defining constraint came from the kerb, not the screen: a rider ends up holding a phone in one hand and a heavy battery in the other — so the swap hands off from app to cabinet at the exact moment both hands fill up.

thai hondamobile · cabinet firmware · web · back office2023

01the brief — Thai Honda × GridWhiz

โจทย์ที่ได้รับ

Thai Honda ขยายตู้สลับแบตมอเตอร์ไซค์ไฟฟ้าทั่วกรุงเทพฯ เพื่อดันพลังงานสะอาด — โจทย์: “แอปสลับแบตที่เร็วและใช้ง่าย”

ทีม

GridWhiz สร้างระบบ ร่วมกับ Honda Trading Thailand + พาร์ตเนอร์แบต

บทบาทผม

UX/UI ทุกจอบนหน้าจอ + Product Owner + ประสานงาน (ไม่ทำฮาร์ดแวร์)

4 จอที่ต้องคุม:AppFirmwareWebsiteBack office

02discovery — at the cabinet, weekly

ลงพื้นที่หน้าตู้

ลงสถานีรายสัปดาห์

ครั้งละ 1–2 ชม. ต่อเนื่อง

สังเกต + คุยระหว่าง support

เห็นจุดสะดุดของจริง

เก็บรูป + วิดีโอหน้างาน

หลักฐานพฤติกรรมจริง

ข้อร้องเรียนจาก Honda

secondary data

the insight

ปัญหาไม่ได้อยู่ที่ “แอปช้า” — แต่อยู่ที่ “จังหวะ” ที่แอปขอให้กด

03define — reframe + who it's for

นิยามปัญหาใหม่

ก่อน

มือถือ + แบต เต็มสองมือ ยังต้องกดต่อ

หลัง

แอปจบก่อน → “เก็บมือถือได้” → ตู้รับช่วง

personaไรเดอร์ส่งอาหาร/แท็กซี่ · ใส่ถุงมือ · กลางแดด · เวลา = รายได้

ตัววัดจำนวนครั้งที่ต้องแตะจอ “หลังมือไม่ว่าง” → 0

04scope — design within a fixed envelope

ขอบเขต & ข้อจำกัด

ผมออกแบบ

✓UX/UI แอปมือถือ
✓UI เฟิร์มแวร์บนจอตู้
✓IA + flow บนจอ
✓prototype + ทิศทาง UI

ฮาร์ดแวร์/Honda กำหนด

—กลไกตู้/ช่องแบต
—หน้าต่าง ~30 วิ
—ปิดประตู 10 วิ
—มาตรฐานแบต/ความปลอดภัย

โจทย์จริงคือ “ออกแบบใต้กรอบให้ดีที่สุด” ไม่ใช่บนกระดาษเปล่า

05the working file — App ↔ Firmware

flow จริงจากไฟล์งาน · แถวบน = แอป · แถวล่าง = จอตู้

06key decisions — constraint → response

การตัดสินใจออกแบบ — และเหตุผล

เรียงลำดับใหม่ จบก่อนประตูเปิด

whyหลังแบตออก มือไม่ว่าง

บอกตรงๆ “เก็บมือถือได้”

whyลดความลังเล

ส่งไม้ต่อให้จอตู้ ตัวใหญ่

whyอ่านระยะแขน/กลางแดด

state machine เดียวคุมสองจอ

whyสถานะไม่มีทางขัดกัน

unhappy path บนจอ

whyติดแล้วแก้เอง ไม่ต้องโทร

ขยายสู่เว็บ + หลังบ้าน

whyทั้ง platform ภาษาเดียว

07the handoff — one session, two screens

สองจอ ทำงานเป็นเครื่องเดียว

1 · App

สแกน QR + ยืนยันทุกอย่าง “ก่อน” ประตูเปิด

2 · Handoff

ประตูเปิด → “เก็บมือถือได้” → ส่งให้จอตู้

3 · Cabinet

จอตู้นำทางทีละช่อง — มือว่างไปยกแบต

state machine เดียวคุมทั้งสองจอ — จบรอบ บันทึก + คิดค่าไฟอัตโนมัติ

08the system — palette · type · components

ระบบเบื้องหลังทุกจอ

color

type · IBM Plex Sans Thai

วางมือถือ

สับเปลี่ยนง่าย ไม่ต้องรอชาร์จ

scan · swap · start

components

จองแบตเตอรี่1Active24%

09the platform — one service, four interfaces

หนึ่งการสลับ ผ่านสี่จอ

Rider app6

Cabinet5

Website1

Back office2

10delivery & field iteration

ส่งมอบ ติดตั้ง & ปรับจากหน้างาน

Adobe XD + link devPrototypeกำหนดทิศทาง UIติดตั้งบนตู้เอง + ทดสอบเอง

ตอนเปิดตู้สลับ

beforeไรเดอร์งงจังหวะประตูเปิด

afterยืนยัน “เปิดประตูสำเร็จ” + บอกขั้นต่อชัด

ตอนสลับลูกถัดไป

beforeทำลูกแรกได้ ลูกถัดไปไม่เป็น

afterจอตู้นำทาง “รอบ 2” ทีละช่อง

11impact — what shipped, honestly

ผลลัพธ์ — แยกของทีม ออกจากของดีไซน์

50+

ตู้ที่ติดตั้ง

78 km

ระยะ/สลับ

~75%

ถูกกว่าน้ำมัน

จอ · session เดียว

app · fw · web · ops

ของดีไซน์ (ซื่อสัตย์):Honda ยืนยันปัญหาหน้างานลดลงหลังปรับ · มีตัวเลข before/after แต่ยืนยันเป๊ะไม่ได้จึงไม่อ้าง · ที่เหลือเป็นฝั่งฮาร์ดแวร์

12reflection — what I'd change

ถ้าได้ทำใหม่

วัดผลดีไซน์เอง

ตั้งตัววัด เวลา/อัตราพลาด ก่อน–หลัง เอง

ทดสอบให้เป็นระบบ

เสริม usability test ที่มีโครง

leverage = จังหวะ ไม่ใช่ UI สวย

จุดคุ้มคือการส่งต่อระหว่างจอ

ข้อจำกัดที่ยอมรับปัญหาที่เหลือส่วนใหญ่เป็นฝั่งฮาร์ดแวร์ — นอกขอบเขตดีไซน์บนจอ

project spec

client

Thai Honda

role

UX/UI Designer · Product Owner — GridWhiz

timeline

2023

platform

Mobile · Cabinet firmware · Web · Back office

next project →EV Station PluZ

charun meedate

01/ 14·Overview

วางมือถือแล้วยกแบตได้เลย