top of page

Restaurant gacha feature

Overview

Objective - ผมต้องการที่จะแก้ปัญหาที่ย่อย ๆ ที่เกิดขึ้นจากการใช้งาน Food delivery app ปัญหาที่คนส่วนใหญ่มองข้าม หรือไม่ใช้ปัญหาหลักที่ต้องใส่ใจมากนัก แต่ถ้าแก้ได้ก็จะช่วยยกระดับ Application ขึ้น

My role - Project นี้เป็น Case study ที่ผมสร้างขึ้นเพราะเห็นถึงปัญหาเหล่านี้ งานทั้งหมดนี้จึงเป็น
ฝีีมือของผมทั้งหมด

‍Challenge - ทำยังไงให้ Users ทุกฝ่่ายได้รับผลประโยชน์จากฟังก์ชั่นที่สร้างขึ้น ทั้งฝั่งร้านอาหาร, ลูกค้า และ Content creator

‍Final product showcase  - Restaurant gacha feature

Problem

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

Customer - บางครั้งก็อยากทานอาหารประเภทใหม่ ๆ แต่ถ้าไม่รู้จักก็จะไม่มี Keyword สำหรับนำไปค้นหา และไม่มีฟังก์ชั่นที่แนะนำอาหารแปลกใหม่ให้

Restaurant - หากเป็นร้านใหม่ ร้านที่ไม่ค่อยได้รับความนิยม ที่ไม่ค่อยมีรีวิว เรตติ้ง ก็ยากมากที่จะถูกค้นเจอเนื่องด้วย Search engine นั้นจะให้ความสำคัญกับค่าเหล่านี้

Content creator - จากการที่ดูคลิปที่ Food delivery app ต่าง ๆ จ้างเหล่า Youtuber ทำคลิปโฆษณา ก็ไม่เจอคลิปไหนที่จะนำ App มาเป็นตัวกลางหลักของคลิป เพราะไม่ได้มี feature ที่ทำให้เหล่า Youtuber นำมาทำ Content ได้

How To Fix?

สร้าง feature “Restaurant gacha” เพื่อแก้ไขปัญหาเหล่านี้ โดย

  • ร้านอาหาารขึ้นมาโดยไม่คำนึงถึงค่าใด ๆ เช่น Rating, Review ฯลฯ 

  • สามารถนำไปสร้าง Content มีความสนุกสนาน เพื่อให้เหล่า Content creator นำ App ไปใช้เป็นสื่อกลางของคลิป

  • User-friendly

How To Design?

  • ในที่นี้ขอยึด Design system ของ Wongnai เป็นแบบ ทั้งปุ่ม การวางข้อความข้อมูล เลยจะอิงจาก Wongnai

  • ข้อมูลที่มีจะต้องเป็นข้อมูลที่ลูกค้าอ่านแล้วสามารถตัดสินใจซื้อได้ใน 1 หน้า

  • จะต้องมีสิ่งที่นำพาลูกค้าไปหน้าเลือกอาหารใน 1 Click

  • มีปุ่่มให้ลูกค้าบันทึกในรายการที่ชอบ

Example layout from Wongnai

Working
Principle

Untitled (8)_edited_edited.png

ในส่วนการทำงาน ถ้าทำ App จริงจะมี 4 จุดที่
UsersจะสามารถInteract ได้ คือ

ปุ่่มย้อนกลับ

ปุ่่มกรองข้อมูล

ปุ่่มร้านที่ถูกใจ

เลือกรูปแบบการรับ

การปัดเพื่อเปลี่ยนร้านอาหาร

แต่สำหรับใน Figma ของ Project นี้จะมุ่งไปในส่วนของ

ปุ่่มกรองข้อมูล

ปุ่่มร้านที่ถูกใจ

การปัดเพื่อเปลี่ยนร้านอาหาร

เริ่มจากการกดเพิ่มร้านถูกใจ เมื่อกดแล้ว Fill color ของicon ก็จะเปลี่ยนสี

เมื่อทำการปัด Page ของร้านแรกก็จะมี Animation การปัด และเพื่อคง Concept ของ Gacha ร้านที่รับปัดทิ้งไปแล้วก็จะไม่สามารถย้อนกลับได้ จนกว่าจะสุ่มเจออีก (อนึ่ง เพื่อเป็นการบีบให้ลูกค้ากดสั่งซื้ออาหารร้านนั้นโดยทันที)

เมื่อปัดแล้วก็จะมีร้านอาหารต่อไปปรากฏ เป็นอย่างงี้เรื่อย ๆ โดยจะไม่มีการเรียงลำดับใด ๆ ทั้งสิ้น

หากกดปุ่มกรองข้อมูล ก็จะมี Pop-up ขึ้นมา
สามารถใช้กรองข้อมูลที่ต้องการได้

Wireframes

ในส่วนของ Layout ยึดการวาง Layout แบบ Wongnai
โดยเรียงลำดับตามความสำคัญ คือ

  • ภาพอาหาร

  • ชื่อร้าน

  • Rating

  • Food tag & Price rate

  • ข้อมูลเพิ่มเติม

  • เวลาเปิด/ปิด

มี 2 feature เพื่อให้ User-friendly มากขึ้น

ใช้สำหรับกรองข้อมูล เช่น Price rate, Food tag ฯลฯ
แต่จะไม่มี Rating ตามเป้าหมายที่ตั้งไว้

ใช้สำหรับเพิ่มเป็นร้านที่ถูกใจ อาจจะเอาไว้ดูทีหลังอะไร
ประมาณนั้น

Layout เลือกช่วงราคา

ลำดับ Animation ปุ่่มร้านที่ถูกใจ

ลำดับ Animation Chack box

Final layout

Untitled (8)_edited_edited.png

Clickable Prototype

wnfigjam1.png

Figjam - ดูการขั้นตอนการคิด

wnfigma1.png

ลองเล่น feature

Figma - ดูผลงาน

bottom of page