Skip to contentข้ามไปเนื้อหา

EV Station PluZ: Know the station before you drive.รู้จักสถานีก่อนออกเดินทาง

The new version of PTT OR's EV charging app, and a website designed to match it: find a station, book, charge and pay.เวอร์ชันใหม่ของแอปชาร์จรถยนต์ไฟฟ้าของ PTT OR พร้อมเว็บที่ออกแบบให้ตรงกับแอป หาสถานี จอง ชาร์จ และจ่ายเงิน

EV Charging Appแอปชาร์จรถยนต์ไฟฟ้า · PTT Oil & Retail (OR)

  • Toolsเครื่องมือ
  • Screensหน้าจอที่ออกแบบ
  • Mobile
  • Web

The case, in a short filmเคสนี้ในฟิล์มสั้น

EV Station PluZ: PTT OR's app for charging an electric car. I designed its new version, at GridWhiz.EV Station PluZ แอปชาร์จรถยนต์ไฟฟ้าของ PTT OR ผมออกแบบเวอร์ชันใหม่ของแอปนี้ ที่ GridWhiz

How I workedผมทำงานยังไง

Who did what, step by step. The highlighted lane is mine.ใครทำอะไร ในแต่ละขั้น เลนที่ไฮไลต์คือส่วนของผม

Who did what, a step a card: swipe through. The highlighted rows are mine.ใครทำอะไร ขั้นละการ์ด ปัดดูได้ แถวที่ไฮไลต์คือส่วนของผม

PTT ORThe service's ownerเจ้าของบริการRequirementsRequirement: New requirementsRequirement ใหม่In useใช้งานจริง: On PTT OR's charging networkบนเครือข่ายสถานีชาร์จของ PTT OR
PMRequirementsRequirement: Working alongsideทำงานร่วมกัน
MeผมUX/UI DesignerRequirementsRequirement: Take the requirements from PTT ORรับ requirement จาก PTT ORThe appแอป: Taken over from the designer before me: features and UX/UI improvedรับต่อจากดีไซเนอร์คนก่อน ปรับฟีเจอร์และ UX/UIThe websiteเว็บไซต์: The web's UX/UI, matched to the appUX/UI ฝั่งเว็บ ให้ตรงกับแอป
DevelopersDevBuildพัฒนา: Builds from the designsพัฒนาตามแบบ
  1. 01RequirementsRequirement

    • PTT ORNew requirementsRequirement ใหม่
    • PMWorking alongsideทำงานร่วมกันSteps 01 to 04ขั้น 01 ถึง 04
    • MeผมTake the requirements from PTT ORรับ requirement จาก PTT OR
  2. 02The appแอป

    • MeผมTaken over from the designer before me: features and UX/UI improvedรับต่อจากดีไซเนอร์คนก่อน ปรับฟีเจอร์และ UX/UI
  3. 03The websiteเว็บไซต์

    • MeผมThe web's UX/UI, matched to the appUX/UI ฝั่งเว็บ ให้ตรงกับแอป
  4. 04Buildพัฒนา

    • DevelopersDevBuilds from the designsพัฒนาตามแบบ
  5. 05In useใช้งานจริง

    • PTT OROn PTT OR's charging networkบนเครือข่ายสถานีชาร์จของ PTT OR

Everything I did on EV Station PluZงานทั้งหมดใน EV Station PluZ

As UX/UI Designer at GridWhiz, I took PTT OR's requirements for the new version of its charging service: the app, taken over from the designer before me, and the website, designed to match it. The work at a glance; each part is told in full below. My work was reviewed by GridWhiz's CEO directly.ในบทบาท UX/UI Designer ที่ GridWhiz ผมรับ requirement จาก PTT OR สำหรับบริการชาร์จเวอร์ชันใหม่ ทั้งแอปที่รับต่อจากดีไซเนอร์คนก่อน และเว็บที่ออกแบบให้ตรงกับแอป นี่คืองานทั้งหมดแบบดูทีเดียว แต่ละส่วนเล่าเต็มด้านล่าง งานของผมรีวิวกับ CEO ของ GridWhiz โดยตรง

The whole pictureภาพรวมงานทั้งหมด

Everything I did on this project, one row each. Tap a row for the detail.ทุกอย่างที่ผมทำในโปรเจกต์นี้ แถวละเรื่อง กดเพื่ออ่านรายละเอียด

Everything I did on this project. Swipe through, tap one for the detail.ทุกอย่างที่ผมทำในโปรเจกต์นี้ ปัดดูทีละเรื่อง แตะเพื่ออ่านรายละเอียด

  1. The map and its pinsแผนที่และหมุดProblemปัญหาWhich station can I charge at, right now?สถานีไหนชาร์จได้ตอนนี้What I didสิ่งที่ทำPins that carry each station's state; a card with every charger and whether it's freeหมุดที่บอกสถานะแต่ละสถานี และการ์ดที่บอกหัวชาร์จทุกหัวว่าว่างไหมResultผลลัพธ์The station chosen on the map, before the driveเลือกสถานีได้จากแผนที่ ตั้งแต่ก่อนออกเดินทาง
  2. Booking a chargeการจองเวลาชาร์จProblemปัญหาMany drivers, one charger: arrive and find it takenคนชาร์จเยอะ ไปถึงแล้วหัวชาร์จไม่ว่างWhat I didสิ่งที่ทำTime picked in 55-minute slots, limits said plainly, everything checked before payingเลือกเวลาเป็นช่องละ 55 นาที บอกข้อจำกัดชัดเจน ตรวจทุกอย่างก่อนจ่ายResultผลลัพธ์A charger booked and paid forจองหัวชาร์จและชำระเงินเรียบร้อย
  3. AutochargeProblemปัญหาSteps to get through at the charger before it startsมีขั้นตอนให้ทำที่หัวชาร์จก่อนจะเริ่มชาร์จได้What I didสิ่งที่ทำAutocharge, offered at the charger; a live session; the bill in fullAutocharge ที่ชวนลงทะเบียนตอนอยู่ที่หัวชาร์จ หน้าชาร์จสด และสรุปค่าบริการครบResultผลลัพธ์Plug in and chargeเสียบแล้วชาร์จ
  4. Continuous chargingการชาร์จต่อเนื่องProblemปัญหาA booked slot ends while the car is still chargingเวลาที่จองหมดลง ขณะที่รถยังชาร์จอยู่What I didสิ่งที่ทำA notice for each moment: time nearly up, the next driver waiting, the charge going onแจ้งเตือนทุกจังหวะ ใกล้หมดเวลา มีคนถัดไปรอ และระบบชาร์จต่อเนื่องResultผลลัพธ์No surprise at the end of a slotไม่มีเรื่องให้ตกใจตอนหมดเวลา
  5. The e-tax invoiceใบกำกับภาษีอิเล็กทรอนิกส์ProblemปัญหาA company needs a full tax invoice; most drivers don'tบริษัทต้องการใบกำกับภาษีเต็มรูป แต่ผู้ขับขี่ส่วนใหญ่ไม่ต้องการWhat I didสิ่งที่ทำThe short invoice by default; a full one from a saved billing addressใบกำกับแบบย่อเป็นค่าเริ่มต้น ใบเต็มรูปจากที่อยู่ที่บันทึกไว้Resultผลลัพธ์The right invoice, chosen before payingได้ใบกำกับที่ถูกต้อง เลือกได้ก่อนจ่าย
  6. Sign-up, the car and the profileสมัครสมาชิก ข้อมูลรถ และโปรไฟล์ProblemปัญหาBooking and charging need to know the carการจองและการชาร์จต้องรู้ว่าเป็นรถคันไหนWhat I didสิ่งที่ทำSign-up that asks for the car and its connectors; a profile that keeps themสมัครสมาชิกที่ถามข้อมูลรถและหัวชาร์จ และโปรไฟล์ที่เก็บไว้Resultผลลัพธ์The car saved once, there for every bookingบันทึกรถไว้ครั้งเดียว ใช้ได้ทุกครั้งที่จอง
  7. The website, matched to the appเว็บไซต์ ที่ตรงกับแอปProblemปัญหาThe web had to work the way the app doesเว็บต้องใช้งานได้แบบเดียวกับแอปWhat I didสิ่งที่ทำThe web's UX/UI, page by page, matched to the appUX/UI ฝั่งเว็บ ทีละหน้า ให้ตรงกับแอปResultผลลัพธ์One service, on the phone and on the desktopบริการเดียวกัน ทั้งบนมือถือและบนเดสก์ท็อป
  8. The back officeระบบหลังบ้านProblemปัญหาSomeone runs every station and chargerต้องมีคนดูแลทุกสถานีและทุกหัวชาร์จWhat I didสิ่งที่ทำThe back office they run it fromระบบหลังบ้านที่ใช้ดูแลResultผลลัพธ์Shown here by its home pageขอแสดงแค่หน้าแรก

Part 1ตอนที่ 1

The map and its pinsแผนที่และหมุด

  1. The map is where a driver starts, and each pin says something before it's tapped: a station ready to charge, one under maintenance, one on a roaming partner's network. Tap one and a card rises with the station, how far it is, and each charger, AC or DC, marked free, in use or off. From there, the station's own page: its photo, its hours, its rate per kWh, the way there, check-in, and a booking.แผนที่คือจุดเริ่มต้นของผู้ขับขี่ หมุดแต่ละอันบอกอะไรบางอย่างตั้งแต่ยังไม่แตะ สถานีที่ชาร์จได้ สถานีที่ปิดซ่อมบำรุง หรือสถานีในเครือข่ายโรมมิ่ง แตะหมุดแล้วการ์ดขึ้นมา บอกสถานี ระยะทาง และหัวชาร์จทุกหัว AC หรือ DC ว่าง ไม่ว่าง หรือปิด จากตรงนั้นไปหน้าสถานี มีรูป เวลาเปิด ค่าบริการต่อหน่วย นำทาง เช็กอิน และจองได้เลย

    1. Find a station: pins by stateค้นหาสถานีชาร์จ หมุดตามสถานะ
    2. A pin tapped: each charger, free, in use or offแตะหมุด หัวชาร์จแต่ละหัว ว่าง ไม่ว่าง หรือปิด
    3. The station: its hours, rates, check-in and bookingหน้าสถานี เวลาเปิด ค่าบริการ เช็กอิน และการจอง

Part 2ตอนที่ 2

Booking a chargeการจองเวลาชาร์จ

  1. Booking picks a time on a charger in 55-minute slots. When the day's limit of bookings is reached, the app says so in a sentence instead of letting the tap fail. Before paying, one screen holds it all: the station, the charger, the time, the booking fee, the car, the kind of tax invoice, the card and any coupon.การจองคือเลือกเวลาบนหัวชาร์จ เป็นช่องละ 55 นาที ถ้าจองครบจำนวนสูงสุดต่อวันแล้ว แอปบอกเป็นประโยคชัดๆ แทนที่จะปล่อยให้กดแล้วไม่เกิดอะไร ก่อนจ่ายเงิน ทุกอย่างอยู่ในหน้าเดียว สถานี หัวชาร์จ เวลา ค่าบริการจอง รถที่ใช้ รูปแบบใบกำกับภาษี บัตร และคูปอง

    1. Pick a time, in 55-minute slotsเลือกเวลา ช่องละ 55 นาที
    2. Over the day's limit: said plainlyเกินจำนวนจองสูงสุดต่อวัน บอกชัดเจน
    3. Before paying: everything on one screenก่อนจ่าย ทุกอย่างอยู่ในหน้าเดียว
    4. Booked and paidจองและชำระเงินสำเร็จ
    1. Bookings in 55-minute slots, with a limit per dayจองเป็นช่องละ 55 นาที และจำกัดจำนวนต่อวัน

      Whyเพราะ PTT OR's rule: many drivers charge, so time is shared out, and no car sits on a chargerเป็นกติกาจาก PTT OR คนชาร์จเยอะ ต้องแบ่งเวลากันจอง และกันไม่ให้จอดแช่

      Instead ofแทนที่จะ Open-ended bookings, one car holding a charger for as long as it likesจองได้ไม่จำกัด รถคันเดียวใช้หัวชาร์จได้นานเท่าที่ต้องการ

    2. The limit said in a sentence, when it's reachedบอกข้อจำกัดเป็นประโยค เมื่อจองครบแล้ว

      Whyเพราะ The driver knows why the booking didn't go throughผู้ขับรู้ว่าทำไมจองไม่ได้

Part 3ตอนที่ 3

Autocharge

  1. Autocharge takes the steps at the charger away. At check-in, the app offers to register the car for it, once. From then on the driver just plugs in, and the charge starts by itself within seconds, with nothing to do in the app. The live session shows the time, the distance gained and the cost, with the stop button set apart in red, and a note when the station is limiting its power. At the end, the bill in full: energy and cost at on-peak and off-peak rates, the booking fee taken off, coupons and VAT.Autocharge ตัดขั้นตอนที่หัวชาร์จออกไป ตอนเช็กอิน แอปชวนลงทะเบียนรถไว้ครั้งเดียว หลังจากนั้นแค่เสียบหัวชาร์จ ไม่กี่วินาทีก็เริ่มชาร์จเอง ไม่ต้องกดอะไรในแอปเลย หน้าชาร์จสดบอกเวลา ระยะทางที่ได้ และค่าบริการ ปุ่มหยุดชาร์จสีแดงแยกออกมาชัด และมีข้อความบอกเมื่อสถานีจำกัดกำลังไฟ ชาร์จเสร็จได้สรุปครบ พลังงานและค่าบริการช่วง On-peak และ Off-peak หักค่าจอง คูปอง และภาษี

    1. At check-in: register the car for Autochargeตอนเช็กอิน ชวนลงทะเบียนรถสำหรับ Autocharge
    2. Connecting to the chargerกำลังเชื่อมต่อกับเครื่องชาร์จ
    3. The live session: time, distance, cost, and stopหน้าชาร์จสด เวลา ระยะทาง ค่าบริการ และปุ่มหยุด
    4. Done: on-peak and off-peak, fees and coupons, in fullชาร์จเสร็จ On-peak, Off-peak ค่าบริการ และคูปอง ครบ
    1. Autocharge offered at the charger, not at sign-upชวนลงทะเบียน Autocharge ที่หัวชาร์จ ไม่ใช่ตอนสมัครสมาชิก

      Whyเพราะ It's offered when it's useful: at the charger, with the car right there. Registered once, from then on plugging in is all it takesชวนในจังหวะที่มีประโยชน์ที่สุด คือตอนอยู่ที่หัวชาร์จ รถจอดอยู่ตรงนั้นพอดี ลงทะเบียนครั้งเดียว ต่อไปแค่เสียบก็ชาร์จได้

Part 4ตอนที่ 4

Continuous chargingการชาร์จต่อเนื่อง

  1. Continuous charging lets a charge go on after its booked time. One charger serves many drivers, so the app keeps them told: a notice when the time is nearly up, with how full the battery is; one when the next driver is waiting, asking to get ready to move the car; and one when the charge carries on, saying that continuing costs extra. The wording shown is a draft, not yet confirmed.การชาร์จต่อเนื่องทำให้ชาร์จต่อได้หลังหมดเวลาที่จอง หัวชาร์จหนึ่งหัวมีคนใช้หลายคน แอปจึงแจ้งให้รู้ทุกจังหวะ แจ้งเมื่อใกล้หมดเวลา พร้อมบอกระดับแบตตอนนั้น แจ้งเมื่อมีลูกค้าคนถัดไปรอ ให้เตรียมเคลื่อนย้ายรถ และแจ้งเมื่อระบบชาร์จต่อเนื่อง ว่าจะมีค่าบริการเพิ่ม ข้อความในภาพเป็นร่าง ยังไม่ได้ยืนยัน

    1. Time nearly up, and the battery at 95%ใกล้หมดเวลา และแบตอยู่ที่ 95%
    2. The next driver is waiting: get ready to move the carมีลูกค้าคนถัดไปรอ เตรียมเคลื่อนย้ายรถ
    3. Charging goes on, at an extra feeชาร์จต่อเนื่อง มีค่าบริการเพิ่ม

Part 5ตอนที่ 5

The e-tax invoiceใบกำกับภาษีอิเล็กทรอนิกส์

  1. Every charge comes with an e-tax invoice. The short one is the default; a full invoice is a switch away, made out to a billing address saved once, for a person or a company. The choice is made while booking, before paying, and afterwards the short invoice waits in the history, with a button to ask for the full one within the same month.การชาร์จทุกครั้งมีใบกำกับภาษีอิเล็กทรอนิกส์ แบบย่อเป็นค่าเริ่มต้น ส่วนแบบเต็มรูปเปิดได้ด้วยปุ่มเดียว ออกตามที่อยู่ที่บันทึกไว้ครั้งเดียว ทั้งบุคคลธรรมดาและนิติบุคคล เลือกตั้งแต่ตอนจอง ก่อนจ่ายเงิน หลังจากนั้นใบกำกับแบบย่อรออยู่ในประวัติ พร้อมปุ่มขอใบเต็มรูปได้ภายในเดือนเดียวกัน

    1. Choose the invoice as you bookเลือกรูปแบบใบกำกับภาษีตอนจอง
    2. A billing address: a person or a companyที่อยู่ออกใบกำกับภาษี บุคคลธรรมดาหรือนิติบุคคล
    3. The short invoice, and the way to the full oneใบกำกับภาษีอย่างย่อ และปุ่มขอใบเต็มรูป
    1. The short invoice by default; the full one a switch awayใบกำกับแบบย่อเป็นค่าเริ่มต้น แบบเต็มรูปเปิดได้ด้วยปุ่มเดียว

      Whyเพราะ Most people only need the short one, as at any shop; the full one is there for those who really need itคนส่วนใหญ่ดูแค่แบบย่อ เหมือนเวลาไปร้านค้าทั่วไป แบบเต็มรูปมีไว้สำหรับคนที่ต้องการจริงๆ

Part 6ตอนที่ 6

Sign-up, the car and the profileสมัครสมาชิก ข้อมูลรถ และโปรไฟล์

  1. Sign-up asks for agreement to the terms first, then the car: its brand, its model and the connectors it takes, with a way past it for someone without an EV yet. More cars can be added later, each with its plate and one set as the default. The profile keeps it all: the cars, payment, tax-invoice details and coupons.การสมัครสมาชิกขอให้ยอมรับเงื่อนไขก่อน แล้วถามเรื่องรถ ยี่ห้อ รุ่น และหัวชาร์จที่รองรับ ใครยังไม่มีรถไฟฟ้าก็ข้ามได้ เพิ่มรถทีหลังได้อีก แต่ละคันมีทะเบียน และตั้งคันหนึ่งเป็นค่าเริ่มต้น หน้าโปรไฟล์เก็บทุกอย่างไว้ ทั้งข้อมูลรถ การชำระเงิน ข้อมูลใบกำกับภาษี และคูปอง

    1. Sign-up: the terms, agreed firstสมัครสมาชิก ยอมรับเงื่อนไขก่อน
    2. The car and the connectors it takesข้อมูลรถและหัวชาร์จที่รองรับ
    3. A car, its plate, and the defaultข้อมูลรถ ทะเบียน และค่าเริ่มต้น
    4. The profile: cars, payment, invoice, couponsโปรไฟล์ ข้อมูลรถ การชำระเงิน ใบกำกับ และคูปอง

Part 7ตอนที่ 7

The website, matched to the appเว็บไซต์ ที่ตรงกับแอป

  1. The web was mine to lead. I took PTT OR's requirements and designed it to match the app, so a driver finds the same things in the same places: the station map and its list, a station's chargers, their cars, their tax-invoice details, their bookings and their bills.ฝั่งเว็บผมดูแลเป็นหลัก รับ requirement จาก PTT OR แล้วออกแบบให้ตรงกับแอป ผู้ใช้เจอสิ่งเดียวกันในที่เดียวกัน ทั้งแผนที่และรายชื่อสถานี หัวชาร์จของแต่ละสถานี ข้อมูลรถ ข้อมูลใบกำกับภาษี ประวัติการจอง และใบเสร็จ

    The home page, before signing inหน้าแรก ก่อนเข้าสู่ระบบ
  2. The station map, on the webแผนที่สถานีบนเว็บThe same map, in the appแผนที่เดียวกันในแอป
    1. A station: each charger, free or in useหน้าสถานี หัวชาร์จแต่ละหัว ว่างหรือไม่ว่าง
    2. The cars, each with its connectors, and the defaultข้อมูลรถ หัวชาร์จที่รองรับ และคันที่เป็นค่าเริ่มต้น
    3. Booking historyประวัติการจอง
    4. A charge's bill, in fullใบเสร็จค่าชาร์จ แบบละเอียด

Part 8ตอนที่ 8

The back officeระบบหลังบ้าน

  1. Behind the app and the web, I designed the back office the network is run from. Of this part, its home page is what I can show: every station on the map, by region, and how many chargers are free, busy or closed.เบื้องหลังแอปและเว็บ ผมออกแบบระบบหลังบ้านที่ใช้ดูแลเครือข่าย ส่วนนี้ขอแสดงแค่หน้าแรก สถานีทั้งหมดบนแผนที่ แยกตามภาค และจำนวนหัวชาร์จที่ว่าง ไม่ว่าง หรือปิด

    The back office's home page: stations by regionหน้าแรกของระบบหลังบ้าน สถานีแยกตามภาค

Outcomeผลลัพธ์

The new version, in use on PTT OR's charging network: the app, and a website that matches it, for every EV driver in Thailand.เวอร์ชันใหม่ใช้งานจริงบนเครือข่ายสถานีชาร์จของ PTT OR ทั้งแอปและเว็บที่ตรงกับแอป สำหรับคนขับรถ EV ทุกคนในไทย

Keep exploringดูต่อ

kods.dsignDesign Content & Brandคอนเทนต์ดีไซน์และแบรนด์ · 2025