Redesign app Rush Bike

Rush Bike เป็น app ที่เรียกมอเตอร์ไซต์มาส่งของให้เรา

หลังจากที่ผมได้รีวิวตัว app Rush Bike ไปได้พักใหญ่ (รีวิว app Rush Bike ตอนที่ 1, ตอนที่ 2, ตอนที่ 3,  ตอนจบ) ผมก็ได้รับการติดต่อจากทีมผู้พัฒนา โดยนัดแนะผมให้ไปคุยปรึกษาขอความเห็นเรื่องการพัฒนาปรับปรุงตัว app ที่ทางทีมงานได้ลองออกแบบมาคร่าวๆ ซึ่งสุดท้ายผมได้รับการจ้างงาน เลยมีเรื่องมาเล่าให้ฟัง ดีใจจัง ^^

ตัวอย่าง UI ที่ปรับแก้โดยทีมงาน

ในวันที่นัดคุย ผมได้เห็นแบบซึ่งเหมือนพยายามจะนำเอาคอมเมนต์และ wireframe ที่ผมเขียนไว้ในบทความมาปรับแก้จนได้หน้าตา UI ตามรูปด้านบน อย่างเช่น ย้ายเอา progress bar มาไว้ด้านบน เป็นต้น

หน้า UI ในขั้นตอนที่ 4 ที่ยาวและไม่สะดวกหากมีการแก้ไขข้อมูล

แต่พอมาเจอขั้นตอนที่ 4 ซึ่งมีข้อมูลสรุปและข้อมูลการชำระเงิน ทำให้ผมทราบเลยว่า UI นี้ยังไม่ดีพอสำหรับยูสเซอร์ เพราะหากต้องการแก้ไขข้อมูลสิ่งของที่ต้องการส่ง ก็จำเป็นต้องกลับไปที่ขั้นตอนที่ 1 ใหม่หรือ? ซึ่งไม่ดีแน่ใช่ไหมครับ

ผมจึงได้แนะนำขั้นตอนหนึ่งของการออกแบบ ก็คือการหาไอเดียสร้างสรรค้ (Inspiration Seeking) จากเว็บไซต์หรือคู่แข่งร่วมธุรกิจ ทำให้พวกเราตัดสินใจดูงานออกแบบของ app ที่มีลักษณะธุรกิจเดียวกัน

Best In Class

app คู่แข่งที่เลือกทำการศึกษา

คู่แข่งที่ทีมงานได้บอกผมก็มี app Go-Jek, LalaMove, และ KerryExpress ทั้ง 3 app ให้บริการงานส่งพัสดุและเอกสารเช่นเดียวกับ app Rush Bike แต่รายละเอียดบางอย่างอาจแตกต่างกัน เช่น พาหนะ, สิ่งของที่รับส่ง เป็นต้น

พอผมได้กดๆ ลองใช้งานไปสักพัก ผมก็เห็นว่า app Go-Jek ซึ่งโด่งดังมากในอินโดนีเซีย มี UI ที่ค่อนข้างเข้ากับบริการของ Rush Bike ดีทีเดียว ผมจึงให้เป็น Best in Class ในกรณีนี้

Go-Jek เป็น app ที่ยูสเซอร์สามารถเรียกมอเตอร์ไซต์ทำอะไรก็ได้ เช่น ส่งของ, ซื้ออาหาร หรือพาไปส่ง ณ สถานที่ที่ต้องการ

app Go-Jek ใช้ UI แบบ Card Interface ทำให้เห็นขั้นตอนข้อมูลชัดเจน บนพื้นฐานความคิดนี้ ผมได้ดัดแปลงไปใช้เป็น Accordion UI แทน ซึ่งผมแน่ใจว่ามันจะเวิร์คเพราะผมเคยอ่านงานวิจัยของ Luke Wroblewski เรื่องการทดลองใช้ accordion ในฟอร์ม เมื่อเทียบกับ UI แบบต่างๆ  ซึ่งผลการทดลองบอกว่า ยูสเซอร์สามารถกรอกฟอร์มได้สำเร็จทุกแบบ แต่สำหรับฟอร์มที่ใช้ accordion ยูสเซอร์ใช้เวลาน้อยที่สุด!

Before the Sunrise

ตัวอย่าง wireframe ที่ออกแบบก่อนทำ mockup

หลังจากได้ไอเดียดีๆ และเห็นภาพในจินตนาการแล้วว่า app จะมีหน้าตาอย่างๆ ไร ผมก็วาด UI บนโปรแกรม Balsamiq โดยโฟกัสเฉพาะหน้าทีใช้งานหลัก

การแสดง user flow และประสบการณ์เสมือนที่เป็น wireframe ด้วย Invision

พอทำ wireframe เสร็จ ผมก็นำแต่ละหน้ามาประกอบลิงค์หากันด้วยเว็บ app Invision ที่ designer ทุกคนควรใช้อย่างยิ่งครับ เพราะมันจะทำให้ลูกค้าเห็นภาพเลยว่าการใช้งาน app จะออกมาลักษณะไหนบนหน้าจอมือถือ (ได้ประสบการณ์เสมือน) โดยไม่จำเป็นต้องรอให้ developer ทำจริง ซึ่งอาจจะสายเกินแก้ไปแล้วก็ได้ครับ ลองดูตัวอย่าง Rush Bike Wireframe ที่ผมทำส่งให้ลูกค้าดูได้ครับ

หลังจากที่ลูกค้าพอใจกับ user flow และรับ feedback เพื่อปรับแก้ ก็ถึงคราวแต่งแต้มเติมสีให้กับ UI จริงๆ แล้วครับ

New Rush Bike

UI หน้าที่มีการใช้งานหลัก หลังปรับโฉม

app Rush Bike โฉมใหม่ในหน้าหลักจะเน้นการใช้ UI accordion โดยแต่ละ accordion จะแทน 1 ขั้นตอน หากเทียบกับ progress bar จะเห็นว่า ถ้าเราต้องการเพิ่มขั้นตอนอีกเป็น 4-5 ขั้น เราจะติดปัญหาเรื่องพื้นที่ในแนวนอน แต่ด้วยวิธีการนี้ เราไม่จำเป็นต้องกังวลเรื่องพื้นที่ในการแสดงผลขั้นตอนอีกต่อไป เพราะเราหันมาใช้พื้นทีในแนวตั้งแทนแล้วครับ

เลือกใช้ accordion เพื่อแสดงผลเป็นขั้นตอนข้อมูลที่ต้องกรอก

เมื่อกรอกข้อมูลเสร็จ แล้วกดปุ่ม ‘Continue’ ก็จะเปิด accordion ถัดไปให้เรากรอก หากอยากแก้ไขข้อมูลขั้นตอนก่อนหน้า ก็กดปุ่ม ‘Edit’ เท่านั้นเอง

หน้าแผนที่เพื่อให้ระบุตำแหน่งจุดรับ-ส่งของ

ในหน้าระบุตำแหน่งจุดรับ-ส่งของ ผมแนะนำให้ทีมงานเลือก Uber app (app เรียกรถยนต์ไปรับ-ไปส่ง) เป็น Best in Class ในกรณีนี้ เพราะเค้าทำออกมาได้ดีสมกับเป็น app ระดับโลกจริงๆ ครับ

หน้าแสดงค่าใช้จ่าย

เมื่อกดปุ่ม ‘Continue’ ในขั้นตอนสุดท้าย ก็จะเข้าสู่หน้ารายละเอียดการชำระเงิน ซึ่งผมได้ออกแบบให้นำเสนอข้อมูลเรื่องแผนประกันภัยสิ่งของไว้ใกล้กับปุ่ม ‘Submit My Order’ เพื่อเสริมความมั่นใจให้แก่ลูกค้า มีข้อมูลที่เป็นประโยชน์กับลูกค้า อย่าเก็บเงียบนะครับ น่าเสียดาย

animation ที่ช่วยให้ยูสเซอร์เพลิดเพลินกับการรอ

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

หน้ารายละเอียดคำสั่งซื้อ

หากมีมอเตอร์ไซต์กดรับออเดอร์ ก็จะปรากฎหน้ารายละเอียดออเดอร์ พร้อมข้อความแสดงความยินดีตามธรรมเนียมปฎิบัติ และนี่คือจบ flow การใช้งานหลักของยูสเซอร์ ซึ่งสามารถดูของจริงที่ผมส่งให้ลูกค้าไปทดลองกดเล่นได้จากลิงค์ New Rush Bike ที่ใช้บริการ Invision เช่นเคยครับ

You’ll never walk alone

ตามเรื่องที่ผมเล่าตลอดจนจบ ผมไม่ได้ออกแบบคนเดียวนะครับ หลายต่อหลายเรื่องผมได้ไอเดียดีๆ, ได้ feedback และได้คำแนะนำจากทีมงาน แล้วผมก็นำมาใช้และปรับแก้แบบอยู่เรื่อยๆ

ขั้นตอนการระบุเวลาเข้ารับสิ่งของที่เลือกเป็นช่วงเวลา

ยกตัวเช่น เรื่องการระบุเวลาการรับของ ไอเดียเดิมคือให้ระบุเวลาใดเวลาหนึ่งเป๊ะๆ ไปเลย อย่างมารับ 10.44 น. ซึ่งในความเป็นจริงไม่มีใครทำได้หรอกครับ ทางทีมงานจึงมีความคิดให้ระบุเป็นช่วงเวลาแทน จากมารับ 10.44 น. (สมมติตอนนี้เวลา 10.30 น.) ก็กลายเป็น 11.00 – 12.00 น. (ปัดเวลาไปช่วงถัดไปเลย) ซึ่งจะช่วยลดความเร่งรีบของลูกค้าและช่วยเพิ่มเวลาในการเข้ารับของอีกด้วย

แม้จะเป็นแค่รายละเอียดเล็กๆ น้อยๆ แต่มันสำคัญมากๆ เลยครับ ซึ่งบางทีผมก็มองข้ามไป ดังนั้น designer จึงควรเป็นนักฟังที่ดีด้วยนะครับ อย่าปล่อยให้ความคิดตัวเองเป็นใหญ่เสมอ ผมเองก็คอยเตือนตัวเองเสมอ แล้วเราจะไม่ได้เดินในเส้นทางงานออกแบบคนเดียว

แล้วก็ขอบคุณทีมงาน Rush Bike ที่ได้ให้โอกาสผมได้ออกแบบ app ในครั้งนี้ด้วย

ขอบคุณจริงๆ ครับ