ทัวร์ 4 เกาะออกเดินทาง 09:00 น. จากท่าเรืออ่าวนาง
฿1,200
สวยได้ แต่ต้องใช้ง่ายก่อน
งานออกแบบที่ดีทำให้ผู้ใช้ไม่ต้องคิดเยอะ กดไม่กี่ครั้งก็ได้สิ่งที่ต้องการ ขณะเดียวกันก็ต้องพาธุรกิจไปถึงเป้าหมาย เช่น ทำให้คนกดจองมากขึ้น หรือทำให้พนักงานทำงานเสร็จเร็วขึ้น เราออกแบบโดยยึดสองอย่างนี้พร้อมกันเสมอ
- User Flow และ Wireframe
- Prototype กดทดลองได้
- Design System
- Dashboard ที่อ่านง่าย
Wireframeหน้าจอจริง
390 × 844
งานออกแบบเริ่มบนโต๊ะ ก่อนขึ้นจอ
1ทำ Workshop กับทีมของคุณ 2ร่าง Wireframe บนกระดาษ 
3ทำ Paper Prototype 
4ให้ผู้ใช้จริงลองใช้
User Flow และ Information Architectureเริ่มจากคนใช้ ไม่ได้เริ่มจากสี
ก่อนลงมือออกแบบหน้าจอ เราจะทำความเข้าใจว่าใครคือผู้ใช้ เขาเข้ามาด้วยความตั้งใจอะไร และติดขัดตรงไหนในระบบเดิม จากนั้นจึงเขียน User Flow ให้เห็นภาพรวมทั้งเส้นทาง แล้วทำ Wireframe เพื่อจัดลำดับความสำคัญของข้อมูล ขั้นตอนนี้ช่วยประหยัดงบได้มาก เพราะแก้บนกระดาษถูกกว่าแก้ตอนเขียนโค้ดไปแล้ว
- สัมภาษณ์และเก็บความต้องการ
- User Flow และ Information Architecture
- Wireframe ก่อนลงสี
ตัวอย่าง User Flow การจองทัวร์ออนไลน์
8ขั้นตอน
- 1เปิดเว็บไซต์
- หาเมนูจอง
- สมัครสมาชิก
- ยืนยันอีเมล
- 5เลือกทัวร์
- กรอกที่อยู่
- 7โอนเงิน
- ส่งสลิปทางแชต
ลูกค้าหลายคนเลิกกลางทางก่อนถึงขั้นจ่ายเงิน
Prototype ที่กดทดลองได้จริง
เราส่งมอบ Prototype ที่คุณกดดูได้เหมือนใช้งานจริงบนมือถือ ทำให้เห็นภาพก่อนพัฒนา และเปิดโอกาสให้ทีมงานหรือลูกค้าตัวจริงลองใช้แล้วให้ความเห็น ก่อนที่งานพัฒนาจะเริ่ม ลดความเสี่ยงที่จะได้ระบบที่ไม่มีใครอยากใช้
- 1เลือกทัวร์
- 2เลือกวัน
- 3จองสำเร็จ
9:41
Krabi Tripsวันนี้อยากไปเที่ยวที่ไหน
ค้นหาทัวร์ เกาะ หรือกิจกรรม
ทัวร์เกาะดำน้ำพายคายัค
ทัวร์ยอดนิยมเกาะไก่ ทะเลแหวก฿950
สระมรกต และน้ำตกร้อน฿900
4.9ทัวร์ 4 เกาะ เรือหางยาวเต็มวัน รับที่โรงแรม
- รถรับส่ง
- อาหารกลางวัน
- อุปกรณ์ดำน้ำ
ผู้ใหญ่
รวม฿2,400
จองทัวร์เรียบร้อยส่ง e-ticket ไปทาง LINE แล้ว
E-ticketทัวร์ 4 เกาะ เรือหางยาวอ. 13, 2 ผู้ใหญ่รถรับที่โรงแรม 08:30 น.
ลองกดบนหน้าจอดู
Design System ที่ต่อยอดได้
สำหรับระบบที่มีหลายหน้าจอหรือจะขยายต่อในอนาคต เราจัดทำ Design System ที่กำหนดสี ตัวอักษร ระยะห่าง ปุ่ม ฟอร์ม และ Component มาตรฐานไว้ ทำให้หน้าจอใหม่ที่เพิ่มทีหลังยังดูเป็นชุดเดียวกัน และทีมพัฒนานำไปใช้ได้ทันทีโดยไม่ต้องเดา
- ชุดสีและตัวอักษรที่อ่านง่ายทั้งไทยและอังกฤษ
- Component มาตรฐาน
- แนวทางการใช้งานสำหรับทีม
--color-primary: #0A7EA4;
--radius: 12px;
--space: 16px;Components / Booking
ว่างเหลือ 2 ที่
เปลี่ยนค่าตรงนี้ แล้วทุก Component เปลี่ยนตามพร้อมกัน
ออกแบบ Dashboard และระบบหลังบ้าน
หน้าจอที่พนักงานต้องใช้ทุกวันคือจุดที่ออกแบบดีแล้วคุ้มที่สุด เราจัดวางข้อมูลให้เห็นสิ่งสำคัญก่อน ลดจำนวนคลิก ลดช่องกรอกที่ไม่จำเป็น และทำให้ตัวเลขสรุปอ่านเข้าใจได้ในพริบตา
admin.krabitrips.co.th
ระบบเดิมหลังออกแบบใหม่
ลากเส้นกลางเพื่อเทียบหน้าจอเดิมกับหน้าจอใหม่