Redesign Traveloka

CS Showcase

UX/UI Design, Animation, Interaction, Prototype, Usability Testing, A/B Testing, Development

Project Overview

เราได้ทำการ Redisign เว็บไซต์ Traveloka โดยที่เน้นไปที่ฟีเจอร์ที่ยอดนิยมที่สุดคือการ ค้นหาที่พักโรงแรมซึ่งเราเริ่มตั้งแต่การไปทำความเข้าใจกลุ่มนักท่องเที่ยวเพื่อนำมาคิด ค้นฟีเจอร์ใหม่ให้ตรงความต้องการของผู้ใช้และมีการRedesignที่จากเดิมมีความซับซ้อนค่อนข้างมากและในหลายส่วนมีการเข้าใจและใช้งานได้ยากการปรับปรุงนี้เพื่อให้ผู้ใช้สา มารถเข้าใจได้ง่ายสามารถใช้งานได้สะดวกยิ่งขึ้นในการพัฒนาโปรเจคนี้ฉันจะใช้วิธีการ พัฒนาแบบ Design Thinkingเพื่อให้เป็นระบบมากขึ้น

Tool Used

Figma

Google Form

VSCode

Role Me

รวบรวมข้อมูลความนิยมใช้งานฟีเจอร์ใน Traveloka
รวบรวมปัญหาที่เกิดขึ้นในการใช้งาน Traveloka
ทำการสัมภาษณ์ผู้ที่ชอบท่องเที่ยวเป็นประจำ
นำปัญหาที่รวบรวมมาวิเคราะห์และหาแนวทางแก้ไข
ออกแบบ Wireframe และพัฒนาต่อจนเป็น Prototype ทั้งหมด
ทดสอบ Usability Testing เบื้องต้นเป็นกรณีศึกษา
เขียนโค๊ดหน้าเว็บไซต์ที่ได้ออกแบบขึ้นมา (Front-End)

Play Prototype

เหตุผลที่เลือก

Traveloka เป็นแพลตฟอร์มท่องเที่ยวที่มีผู้ใช้จำนวนมากแต่กลับได้รับ คำวิจารณ์เชิงลบมากกว่าเว็บไซต์คู่แข่ง เช่น Agoda, Booking.com และ Airbnb ดังนั้นจึงถูกเลือกเป็นกรณีศึกษาใน Mini Project นี้ ซึ่งจัด แสดงในงานของสาขาวิทยาการคอมพิวเตอร์ในมหาวิทยาลัยของฉัน

ปัญหาที่พบ

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

แนวทางการแก้ไข

การปรับปรุง Traveloka ในครั้งนี้มุ่งเน้นที่การเพิ่มประสิทธิภาพ และ ประสบการณ์การใช้งาน เช่น การออกแบบระบบใหม่ที่ใช้งานง่ายขึ้น ซึ่งจะช่วยเพิ่มความพึงพอใจของผู้ใช้และอัตราการใช้บริการในอนาคต

Design Process

กระบวนการที่ใช้ในครั้งนี้จะพัฒนาตามหลัก Design Thinking

Emphatize

ทำความเข้าใจผู้ใช้งาน

Ideate

วิเคราะห์ปัญที่แท้จริง

Ideate

หาไอเดียแก้ปัญหา

Design

ออกแบบตามไอเดีย

Test

ทดสอบผลลัพธ์

Develop

เขียนโค๊ด Front End

Emphatize

เริ่มต้นทำการสำรวจฟีเจอร์ที่ผู้ใช้งาน Traveloka หรือแอปใกล้เคียงอื่น ๆ นิยมใช้มากที่สุด ซึ่งผลลัพธ์ที่ได้ฟีเจอร์ยอดนิยม 4 ลำดับแรกคือ
ฟีเจอร์ค้นหาและจองที่พัก (อันดับที่ 1), ฟีเจอร์จองตั๋วเครื่้องบิน (อันดับที่ 2), ฟีเจอร์ชำระเงินแสดงการจอง (อันดับที่ 3), ฟีเจอร์รีวิวให้คะแนนที่พัก (อันดับที่ 4)

การรวบรวมปัญหา

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

Define

Persona

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

Ideate

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

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

Result

Before

After

Homepage Traveloka

แถบนำทาง (Navagation Bar)
เราได้ทำการ Design ใหม่ให้ดูทันสมัยมากขึ้น ดูมีมิติที่มากขึ้น
ส่วนแสดงสถานทที่ท่องเที่ยว
เราได้เพิ่มมาแทนช่องแสดงโปรโมชั่นที่มีค่อนข้างมากและซับซ้อนกันมากมายด้วยเหตุนี้เราจึงทำการเอาออกแล้วนำส่วนของการ “ค้นหาตัวตนของคุณอีกครั้ง” ซึ่งมีอยู่แล้วนำมาปรับใหม่ให้ดูมีชีวิตชีวาดึงดูดผู้คนในส่วนแรกซึ่งเป็นจุดที่ค่อนข้างสำคัญมากที่สุด
กิจกรรมที่น่าสนใจที่กำลังจะมาถึง
ส่วนนี้จะเป็น “ฟีเจอร์ใหม่” ที่เราทำการศึกษาและเพิ่มเข้ามา ซึ่งเกิดจากการที่มีนักท่องเที่ยวจำนวนมาก ที่อยากจะท่องเที่ยวไปตามสถานที่ ต่างๆ แต่ก็ไม่รู้ว่าจะไปที่ไหนดี เราจึงเพิ่มฟีเจอร์นี้เพื่อให้ ผู้ใช้สามารถค้นหางาน กิจกรรมต่างๆ ที่จะเกิดขึ้น ในสถานที่ต่างๆ ได้ง่ายมากขึ้น
ที่พักแนะนำ
มีการนำข้อมูลมาจัดเรียงและแสดงผลออกมาใหม่ เพื่อให้แสดงรายละเอียดที่ครบถ้วนมากขึ้น และสวยงามมากขึ้น

Before

After

Search Hotel List

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

Before

After

Detail Hotel

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

Summary

งานนี้ถือว่าเป็นงานเดี่ยว งานใหญ่งานแรก ก็ได้ลองทำอะไรมากขึ้นอีกจากงานก่อนหน้านี้ แต่ก็มีปัญหาที่พบเจอหลังจากทำมากมาย เช่น การที่ฉันยังไม่ค่อยเข้าใจ หลักการในการสำรวจ ค้นหาข้อมูล, ทำให้ได้ข้อมูลที่ไม่มากพอ ฉันเลยอาจมีการแก้ปัญหาเบื้องต้น คือ การจำลอง ตัวเองที่เป็นผู้ใช้งานเหมือนกันและใช้การสัมภาาณ์ ข้อมูลจากคนใกล้ตัวเพิ่มเติม แต่ในการแก้ปัญหานี้ก็ทำให้ฉันเสียเวลาค่อนข้างมาก จนเกิดการกระทบกับขั้นตอนอื่นๆไปด้วย