Marketplace สองด้านสำหรับบริการตัดผมแบบออนดีมานด์

จาก requirement ของสตาร์ทอัพสู่ประสบการณ์จองบริการข้ามแพลตฟอร์ม

ลูกค้า

Haircut Co. (Trimco)

ปี

2019

ระยะเวลา

3 เดือน

ความเชี่ยวชาญ

Discovery workshops UX design UI design Mobile apps

ลูกค้า

Haircut Co. (Trimco)

Haircut Co. เป็นสตาร์ทอัพอเมริกันที่ทดลองแนวทางใหม่ในการให้บริการทำผม แทนที่จะพึ่งร้านประจำเพียงอย่างเดียว แนวคิด Trimco เชื่อมลูกค้ากับช่างอิสระ ที่ให้บริการจากจุดชั่วคราวหรือ pop-up ผ่านรูปแบบ marketplace ที่ได้รับ แรงบันดาลใจจากแพลตฟอร์มการเดินทางแบบออนดีมานด์

Outsourcify เปลี่ยน requirement specification เริ่มต้นให้เป็นทั้ง product blueprint และแอปที่ใช้งานได้จริง งานครอบคลุม discovery, user journey, structural wireframe, high-fidelity UI และการพัฒนา React Native สำหรับลูกค้าและผู้ให้บริการบน iOS และ Android จาก JavaScript codebase ร่วมกัน

ผลลัพธ์

2ด้านที่เชื่อมกันใน marketplace — ลูกค้าและช่างผู้ให้บริการ

2แพลตฟอร์มมือถือจาก React Native codebase เดียว

หลายสิบสถานะของอินเทอร์เฟซที่ออกแบบก่อนและระหว่างการพัฒนา

3 เดือนจาก requirement specification สู่การส่งมอบข้ามแพลตฟอร์ม

ความท้าทาย

Marketplace บริการต้องประสานประสบการณ์ที่แตกต่างกันสองด้านรอบนัดหมายเดียวกัน:

ความมั่นใจของลูกค้า: ผู้ใช้ต้องเข้าใจว่าสถานที่ให้บริการอยู่ที่ไหน ใครว่าง ราคาเท่าไร และเกิดอะไรขึ้นหลังชำระเงิน
ความชัดเจนของตาราง: สถานที่ วันที่ ช่าง และสถานะการจองต้องมองเห็นได้ตลอด funnel
ความเป็นอิสระของผู้ให้บริการ: ช่างอิสระต้องรับและจัดการนัดหมายได้โดยไม่ต้องพึ่งพนักงานหน้าร้านแบบร้านเสริมสวยดั้งเดิม
ประสิทธิภาพสำหรับสตาร์ทอัพ: ผลิตภัณฑ์ต้องเข้าถึงทั้งสองแพลตฟอร์มโดยไม่ต้องดูแล native app แยกกันสองชุด
ความกำกวมด้านการออกแบบ: specification เชิงแนวคิดต้องถูกแปลงเป็นชุดหน้าจอ สถานะ และ transition ที่สอดคล้องก่อนพัฒนา

ทางออก

Outsourcify วางแผน journey ของลูกค้าและผู้ให้บริการก่อนเริ่มพัฒนา โดยใช้ wireframe กำหนดขั้นตอนการสมัคร สถานที่เดิมและสถานที่ใหม่ การค้นหาช่าง การเลือกวัน checkout การยืนยันการจอง การตั้งค่าบัญชี และการให้คะแนนหลัง รับบริการ จากนั้น high-fidelity prototype สร้างระบบ interaction และ visual ที่สอดคล้องกันในหลายสิบสถานะ แอป React Native ที่ได้ใช้ JavaScript implementation หลักร่วมกันบน iOS และ Android ลูกค้าสามารถเลือกสถานที่ เลือกช่างที่ว่าง จองเวลา และยืนยันการชำระเงิน ขณะที่ผู้ให้บริการมี workflow เฉพาะสำหรับจัดการกิจกรรมและนัดหมายของตน

เครื่องมือ

InVision, Adobe Photoshop, Teamwork และ Glip

ทีม

นักออกแบบ UX/UI 2 คน และนักพัฒนาแอปมือถือ 2 คน

วิธีการ

Agile ตั้งแต่ requirement และ wireframe จนถึงการส่งมอบ

เครื่องมือ

InVision, Adobe Photoshop, Teamwork และ Glip

ระยะเวลา

3 เดือน

เทคโนโลยี

ออกแบบ transaction ก่อนสร้างหน้าจอ

ค้นหา

กำหนด persona ของลูกค้าและช่าง
วางโครงสร้างสถานที่เดิมและสถานที่ใหม่
แสดงช่างที่ว่างอย่างชัดเจน

จอง

เลือกวันและเวลานัดหมาย
แสดงสถานที่และช่างไว้ตลอดขั้นตอน
ตรวจสอบราคาก่อนยืนยัน

เสร็จสิ้น

เลือกวิธีชำระเงินที่รองรับ
ยืนยันและดูรายละเอียดนัดหมาย
เก็บคะแนนหลังรับบริการ

ค้นหาตามสถานที่และเข้าสู่การจองได้ทันที

หน้าจอจองหลักรวมสถานที่ให้บริการ วันที่นัดหมาย และช่างที่ว่างไว้ในมุมมองเดียว ลูกค้าเปลี่ยนสถานที่หรือวันที่ได้โดยไม่เสียบริบทการค้นหา แล้วเข้าสู่ flow จองของช่างที่เลือกได้โดยตรง

หมายเหตุเกี่ยวกับ prototype: หน้าจอรายละเอียดด้านล่างมาจากช่วงตรวจสอบงานออกแบบ จึงยังคงใช้ branding ชั่วคราวของ Outsourcify ก่อนนำ branding ของลูกค้ามาใช้

Prototype Trimco แสดงสถานที่ วันที่ และช่างทำผมที่ว่าง

แสดง availability เป็นการตัดสินใจในปฏิทินที่ชัดเจน

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

Prototype ปฏิทินเลือกวันนัดตัดผมของ Trimco

Checkout ที่โปร่งใสก่อนยืนยันนัดหมาย

Checkout สรุปเวลา สถานที่ ช่างที่เลือก และค่าใช้จ่ายก่อนให้ลูกค้ายืนยัน Prototype รองรับเงินสด บัตรที่บันทึกไว้ บัตรใบอื่น และเครดิตในบัญชี แสดงให้เห็นว่าวิธีชำระเงินหลายรูปแบบอยู่ใน transaction path เดียวได้ โดยไม่ซ่อนรายละเอียดสำคัญของการจอง

Prototype checkout ของ Trimco พร้อมสรุปนัดหมายและวิธีชำระเงิน

ปิดวงจร feedback ของ marketplace

หลังนัดหมาย ลูกค้าสามารถให้คะแนนประสบการณ์กับช่างที่เลือกได้ Rating flow เชื่อมกับการจองที่เสร็จสิ้นแทนที่จะเป็นรีวิวแบบไม่ระบุตัว จึงเป็นพื้นฐานที่ตรงไปตรงมาสำหรับความไว้วางใจใน marketplace และ feedback ด้านคุณภาพบริการ

ผลิตภัณฑ์เดียว สองมุมมองการดำเนินงาน

ส่วนของ marketplace	ประสบการณ์ลูกค้า	ประสบการณ์ช่าง
สถานที่	เลือกสถานที่เดิมหรือเพิ่มสถานที่ใหม่	ให้บริการจากจุดชั่วคราวและ pop-up
Availability	ดูว่าใครจองได้ในวันที่เลือก	จัดการกิจกรรมบริการและนัดหมาย
Transaction	ตรวจราคาและเลือกวิธีชำระเงิน	รับข้อมูลการจองที่ยืนยันแล้ว
หลังบริการ	ดูรายละเอียดนัดหมายและให้คะแนน	ติดตามกิจกรรมบริการที่เสร็จสิ้น
Mobile delivery	ประสบการณ์สอดคล้องกันบน iOS และ Android	ใช้พื้นฐานผลิตภัณฑ์ข้ามแพลตฟอร์มเดียวกัน