สวัสดีครับ ก็อตคนเดิม เพิ่มเติมคือตอนนี้ย้ายมาอยู่ Fastwork แล้วนะครับ ฮ่า ๆ จริง ๆ จากบทความก่อนหน้านี้ “จาก Intern สู่ Lead UX/UI Design ใน 3 ปีครึ่งที่ LINE MAN นับ 1 ถึง 40 ข้อที่อยากบอกต่อ” ถ้าใครอ่านถึงตอนสุดท้าย ก็คงรู้แล้วว่าเป็นบทความส่งท้ายแหละ ตอนนี้มาอยู่ที่ Fastwork แล้วเติบโตขึ้นอีกหนึ่งสเต็ป พร้อมที่จะสร้างทีมเจ๋ง ๆ product คูล ๆ ให้เข้าไปอยู่ในใจของ users ที่น่ารักให้ได้

แต่ก็นั่นแหละ เมื่อโอกาสดี ๆ มาถึง ตำนานบทใหม่ก็เริ่มต้นขึ้น แต่ก็… ไม่คิดว่าจะเริ่มเร็วขนาดนี้แฮะ เพิ่งเข้ามาที่นี่ได้ 4 เดือน มีของมาเล่าให้กับทุกคนอีกแล้ว ซึ่งแน่นอนว่าแต่ละรอบมันจะมาแบบธรรมดา ๆ ไม่ได้อยู่ละ

เห็นหลาย ๆ คน หลาย ๆ บริษัทเริ่มเอา AI tools เข้ามาปรับใช้เริ่มเยอะขึ้นเรื่อย ๆ ส่วนใหญ่ก็คงหนีไม่พ้น ลบพื้นหลัง ลบคน ลบของ แต่คงไม่ได้มีโอกาสมากนักที่เราจะเอา AI มาช่วยสร้างดีไซน์จน (เกือบจะ) เอาไปขึ้น production ได้แถมไม่ได้อยู่ในแอปส่วนตัว แต่เป็นแอปที่มีผู้ใช้หลายล้านคนอย่าง Fastwork ด้วย!

และมากไปกว่านั้นคือเราใช้เวลาไม่ถึง 12 ชั่วโมง หรือเพียงชั่วข้ามคืนเท่านั้น ที่เสกสิ่งนี้ขึ้นมาได้! แน่นอนว่าไม่มีใครคิดว่ามันจะเอาไปใช้จริงได้ แต่ที่ Fastwork ลองแล้ว และปล่อยให้ใช้จริงแล้ว! และนี่ก็เลยเป็นที่มาของบทความนี้ที่ก็อตอยากมาแชร์เทคนิคที่ได้เรียนรู้ระหว่างทาง แน่นอนว่ามันไม่ใช่สิ่งที่เป็น best practice เพราะตัวก็อตเองก็ตบตีกับ tool สักพักนึง กว่าจะมันจะเป็นรูปเป็นร่างอย่างที่ใจปรารถนา

จุดเริ่มต้นของทุกสิ่ง

คืองี้ครับทุกคน เรื่องมันมีอยู่ว่าพี่เบน ซึ่งเป็นหนึ่งใน Software Engineer ที่ Fastwork เค้าก็มีไอเดียที่อยากจะเอาข้อมูลสถิติต่าง ๆ มาโชว์ส่งท้ายปีแบบ Spotify Wrapped ที่ทุกวันนี้แทบจะเป็นธรรมเนียมปฏิบัติส่งท้ายปีของแอปใหญ่ ๆ ไปแล้ว ซึ่งมันคงจะดี ถ้าเราเอาเรื่องงานที่ดูเครียด ๆ มาบิดให้มันแสดงออกมาในรูปแบบของ wrapped ให้มันดูน่าสนใจขึ้น ดูเฟรนลี่ขึ้น ก็คงทำให้ user ทั้งคนซื้อคนขายรู้สึกใกล้ชิดกับแบรนด์มากขึ้น ไม่มากก็น้อย

มองเผิน ๆ หลาย ๆ คนก็อาจจะคิดว่ามันก็ดูเป็นโปรเจคท์ธรรมดา ๆ รึเปล่า มันพิเศษยังไง (?) ความพิเศษของโปรเจคท์นี้คือสิ่งนี้ไม่ได้อยู่ใน roadmap มาก่อน ใช่! ทุกอย่างเกิดขึ้นเพียงชั่วข้ามคืนเท่านั้น หลังจากที่พี่เบนมีไอเดีย เขาก็ทำ demo จนเอาไปคุยกับ PM จนมันออกมาเป็นโปรเจคท์ wrapped ที่ไม่ได้พิเศษในแง่ของผลลัพธ์อย่างเดียว แต่เป็นโปรเจคท์ที่เราได้เรียนรู้พลังที่ซ่อนอยู่ ที่สุดท้ายเราสามารถปล่อยของจาก 2–3 สัปดาห์ เหลือเพียงไม่ถึง 7 วันเท่านั้น ด้วยพลังของ เไ (AI)ใน Figma Make นั่นเลยเป็นที่มาของบทความนี้ เพราะนี่น่าจะเป็นครั้งแรก ๆ ในไทยโดยเฉพาะฝั่งดีไซน์เนอร์ ที่ลองเอา AI มาปรับใช้แบบทั้งโปรเจคท์จริง ๆ เลย ไม่ใช่แค่เอามาปลั๊กทีละชิ้น ๆ

เร็ว VS คุณภาพ?

ตอนที่เห็นไทม์ไลน์โปรเจคท์ตอนแรก ก็เกือบถอดใจไปละครับ ขึ้นโปรเจคท์วันที่ 14 ธ.ค. เอาไฟนอลดีไซน์วันที่ 15 ธ.ค. เพื่อให้ปล่อยทันช่วงปลายปีให้สมกับเป็น wrapped แบบใครเขา ภายในเวลาเพียงแค่คืน ๆ เดียว ต่อให้มีดีไซน์เนอร์ สัก 10 คน ผมก็ไม่คิดว่าจะสามารถทำให้เสร็จได้ทัน ถึงแม้ว่าในใจลึก ๆ จะแอบกลัว แต่ด้วยความอยากลองของ ประกอบกับความเชื่อในใจว่าผมจะสามารถเสกของมาได้ตามที่ผมต้องการ ก็เลยตอบรับชาเลนจ์นี้ไปแบบงง ๆ

(disclaimer: เนื่องจากทุกคนกำลังปั่นของเจ๋ง ๆ ที่อยู่ใน roadmap เลยจะมองว่าโปรเจคท์นี้เป็น side project ที่ไม่ได้จริงจังขนาดนั้นจะทำหรือไม่ทำก็ได้ ตอนเวลาทำงานจริง ๆ จะถูกแพลนมาและมีเวลาให้ได้คิด เฉพาะฉะนั้นไม่ต้องกังวลนะครับ)

ถ้าจะให้เทียบขั้นตอน (process) ให้เห็นภาพ ปกติพอได้ requirement มาแล้วว่าอยากจะทำ wrapped งี้ ทีมดีไซน์ก็จะต้องเอามา ideate กันก่อนว่าอยากทำแบบไหน mood&tone เป็นยังไง คอนเซปท์เป็นแบบไหน ไหนจะคอนเทนท์ คำ สถิติใด ๆ ทั้งหมด คงใช้เวลาไม่ต่ำกว่า 2 สัปดาห์กว่าจะสามารถเคาะเวอร์ชั่นไฟนอลได้

แต่ทุกอย่างย่อลงเหลือแค่ 12 ชั่วโมง!

“เวลามนุษย์กำลังจะตาย เศษดิน เศษทราย ก็คงประทังชีวิตได้ประมาณนึง” แต่ขอโทษนะ เราเป็นมนุษย์ยุค AI อ่ะ “ถ้าเรากำลังจะตาย ก็ให้ AI มันช่วย” มันก็คงเป็นความรู้สึกเดียวกัน ต่างกันที่บริบทแหละมั้ง

หลังจากที่ผมได้บรีฟ ผมก็ลองละเลงทุกอย่างด้วย Figma Make ตั้งแต่ 0 จนจบ ซึ่งเอาจริงผมยังตกใจเองเลยว่ามันสามารถทำได้เหมือนกับที่ผมคิดไว้ (อาจจะไม่ได้เป๊ะ ๆ) แต่ก็คิดว่าถ้าเอาคนมานั่งทำจริง ๆ แค่นั่งทำโปรโตไทป์น่าจะใช้เวลาไม่ต่ำกว่า 2–3 วันเป็นแน่แท้

แน่นอนว่าถ้าจะเอาดี ๆ ก็คงอยากจะปล่อยไปให้สวยที่สุด มีสตอรี่ ทำตาม Design System มี identity ที่เจ๋งและเป็นตัวของ Fastwork ให้ได้มากที่สุด แต่ด้วยเวลาที่จำกัดขนาดนี้ เลยเป็นโจทย์สำคัญว่าเราจะบาลานซ์คุณภาพและเวลายังไง ซึ่งในหัวตอนนั้นแค่คิดว่าเอาให้ปล่อยไปแบบไม่อายใครก็ถือว่าเป็นคีย์สำคัญในการหาจุดร่วมของทั้งสองแกนนี้ก็พอแล้ว

Prompt ยังไงให้โดนใจ

อยากให้ให้ทุกคนได้เห็นว่า กว่าจะผ่านมาเป็นเวอร์ชั่นไฟนอลได้นั้น ต้องผ่านอะไรมาบ้าง แต่คงเอามาเล่าได้ไม่หมด แต่อาจจะยกมาให้ดูแบบคร่าว ๆ ซึ่งแต่ละอันผ่านกระบวนการปรับแต่งเล็ก ๆ น้อย ๆ เรื่อย ๆ มาจนทำให้มาจบกันที่ 177 เวอร์ชั่น ใช่ครับ ฟังไม่ผิด “หนึ่งร้อยเจ็ดสิบเจ็ด” อย่างหน้าเอนิเมชั่นหน้าแรกนี้ ก็เกิดมาจากโค้ดทั้งหมด ไม่ใช่มาจาก Lottie หรือโปรแกรมที่ทำเอนิเมชั่นแต่อย่างไร โครตจะเจ๋ง

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

ซึ่งข้อมูลทุกอย่างมันก็ curated มาแล้วประมาณนึงว่าแอปประมาณนี้ ควรจะโชว์ข้อมูลแบบไหนบ้าง แต่ก็นะหลาย ๆ อย่างที่เราจะอยากให้มัน personalized ก็ต้องอาศัย input ไปว่าข้อมูลที่อยากให้โชว์มีอะไรบ้าง คำประมาณไหน แล้วมันก็จะช่วยปรับแต่ง content แต่ละหน้าให้เป็นไปแบบที่เราต้องการ หลังจากนั้นก็ถึงคราวที่เราจะต้องบอกมันว่าเราอยากให้ mood&tone ออกมาเป็นแบบไหน ธีมเป็นยังไง สีแบบไหน ซึ่งเราสามารถแนบรูป reference ไปได้เลย มันก็จะเรียนรู้สไตล์ของ ui ที่เราอยากได้ และเปลี่ยนออกมาเป็น ui ให้ได้ตามที่เราต้องการ

แท่นแท๊นนน และนี่ก็คือดราฟแรก ๆ ที่เราพอจะสามารถเอาไปโครงเพื่อที่จะมาเก็บดีเทลแต่ละหน้าได้

เอาจริงผมว่ามันได้แล้วล่ะ แต่ทำไงได้ เครื่องมันติดแล้วอ่ะ หลังจากนี้จะเป็นพาร์ทเก็บดีเทลแต่ละหน้าละ โดยเฉพาะหน้าแรก เราก็อยากให้ first impression มันดี ล้อกับฟีเจอร์ AI Search ที่ Fastwork เคยปล่อยไปเมื่อปลายปี ซึ่งเฉพาะหน้านี้เดียวก็ใช้เวลาประมาณนึง กว่าจะจบได้ก็หลายสิบเวอร์ชั่น

ประเด็นสำคัญเวลาเราจะสั่งให้ AI มัน prompt animation เราต้องพอเข้าใจก่อนว่าทั้งหมดนี้มันเกิดขึ้นจากการ code ทั้งหมด เฉพาะฉะนั้นการขยับซ้ายไปขวา หรืออะไรก็ตาม ยิ่งที่สามารถบอกได้ละเอียดเท่าไหร่ มันก็จะยิ่งเป็นไปได้ตามที่เราต้องการมากขึ้นเท่านั้น

เมื่อไอเดียสำคัญกว่า How

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

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

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

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

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

เมื่อระยะทางพิสูจน์ม้า กาลเวลาก็เป็นเพียงแค่ตัวเลข…

หลังจากที่ผมตบตีกับมันมาเกิน 7–8 ชั่วโมงติด ในที่สุดผมก็ได้ prototype เกือบทั้งหมดเท่าที่ผมต้องการแล้วทุกคนนนนน! ไปดูกันได้เลย!

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

นิทานทุกตอน ก็ต้องปิดท้ายด้วย “เรื่องนี้สอนให้รู้ว่า…”

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

“ความกล้า ความกลัว และความเก่ง”

1. ความกลัว: สิ่งนี้จะไม่มีวันเกิดขึ้น ถ้าผมยังกลัว… กลัวว่าจะทำไม่ทัน กลัวว่ามันจะไม่เพอร์เฟค กลัวว่ามันจะดีไม่พอ สุดท้ายแล้วผมจะไม่ได้เรียนรู้อะไรเลย เพราะโปรเจคท์นี้อาจจะถูกพับไปแบบเงียบ ๆ ราวกับไม่มีอะไรเกิดขึ้น
2. ความกล้า: การที่ผมกล้า มันทำให้ผมได้ค้นพบความสามารถใหม่ ๆ… ทุกวันนี้ผ่านมา 2 เดือนกว่า ๆ หลังจากจบโปรเจคท์นี้ ทีม Product Design ที่ Fastwork ใช้ AI บ่อยขึ้น เยอะขึ้น ได้ลองอะไรที่ก่อนหน้านี้แทบจะไม่เคยได้ลอง มองย้อนกลับไป เจ้า Fastwrapped นี้เป็นเพียงแค่ teaser ที่ให้คนในทีมเองได้พอเห็นภาพว่าเราสามารถเก่งขึ้นยังไงได้บ้าง เราสามารถสร้างอะไรเจ๋งขึ้นยังไงได้บ้าง จนทุกวันนี้เรา “กล้า” ออกจาก comfort zone มากขึ้น จนผมเองก็สัมผัสได้ว่าทีมของผมกำลังเก่งขึ้นเหมือนกัน
3. ความเก่ง: ถึงแม้ว่า Fastwork คือแหล่งรวมฟรีแลนซ์มากมาย หลากหลายสาขา เป็นแหล่งทำเงินให้กับฟรีแลนซ์หลายหมื่นหลายแสนชีวิต ปฏิเสธไม่ได้เลยว่าการเข้ามาของ AI อาจลดทอนความสำคัญของผู้คนไปบ้าง เราปฏิเสธความจริงไม่ได้ว่า AI มันกำลังใกล้มาแทนที่อาชีพต่าง ๆ จนแล้วจนเล่า สิ่งสำคัญไม่ใช่เรายืนอยู่กับที่ จมอยู่กับความเคยชิน แต่มันคือการต่อยอดความเก่ง ใช้ AI เป็นบันไดทางลัด ให้เราสามารถสร้างสรรค์สิ่งต่าง ๆ ในแบบที่เราไม่เคยสร้างได้มาก่อน แต่ถ้าคุณอาจจะยังไม่ได้รู้สึกแบบนั้น ผมอยากชวนให้เริ่มอ่านข้อที่ 1 ใหม่อีกครั้ง :)

ถ้าคุณเป็น Product Designer / UX Designer ที่เห็นอุปสรรคคือความท้าทาย อยากลองอะไรใหม่ ๆ อยากสร้างสิ่งที่อาจจะไม่เคยมีที่ไหนทำมาก่อน ผมเชื่อว่าทุกคนมีของ อยากชวนมาปล่อยของที่ Fastwork ครับ ตอนนี้เปิดรับสมัคร

• (🔥 URGENT) Product Designer (Mid-Senior) สำหรับคนที่รักในทำทุกวิถีทางที่จะหาทางแก้ไขปัญหาให้ users
• (🔥 URGENT) Design Engineer สำหรับคนที่รักการโค้ด ในงานคราฟ ผมว่าคุณเหมาะกับตำแหน่งนี้

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

Figma Make เสกได้! เบื้องหลังงาน UX ที่ Fastwork จากไอเดีย Year Wrapped พร้อมทำจริงภายใน 1 คืน was originally published in Fastwork on Medium, where people are continuing the conversation by highlighting and responding to this story.

รีแคปเหตุการณ์สั้น ๆ คือก็อตอยู่ที่บริษัทนี้มาตั้งแต่สมัยยังเป็น Wongnai ก่อนที่จะควบรวมเป็น LINE MAN Wongnai แบบทุกวันนี้ ตอนนั้นยังจำได้เลยว่าเรารู้จักบริษัทนี้แค่บริษัท ๆ นึงที่มีสวัสดิการวันลาไม่จำกัด (Unlimited Leave) นอกนั้นก็… เอาจริงก็ไม่ได้ศึกษามาเยอะขนาดนั้น แต่จะว่ายังไงก็แล้วแต่ก็รู้สึกว่าไม่มีวันไหนที่คิดผิดเลย ที่เริ่มต้นชีวิตการทำงานที่นี่ในฐานะเด็กฝึกงาน

เด็กชายก็อตในวันนั้นก็ได้ offer ทำ part-time ต่อจนได้เป็น full-time UX/UI Designer ทันทีตั้งแต่เรียนจบหมาด ๆ จนแล้วจนเล่า ก็ถูกโปรโมทเลื่อนขั้นเป็น Senior UX/UI Designer ในระยะเวลา 1 ปี เป็น Staff ในปีที่ 2 และ rotate มาเป็น Lead ในปีที่ 3 กว่า ๆ จะบอกว่าเร็ว ก็เร็วนะ แต่สำหรับผม ผมมองว่าตรงไปตามแผนที่ผมวางไว้มากกว่า

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

เอาจริงสกิลการอ่านหนังสือผมเป็น 0 ตั้งใจเรียน e-learning ก็ติดลบ บทเรียนชีวิตของผมส่วนใหญ่ก็คงไม่พ้นไปกับการที่เดินออกไปหน้าปากซอยแล้วตั้งคำถามว่าเราจะพูดยังไงให้เก่งเหมือนป้าน้อยร้านขายข้าวแกง เราจะซื้อใจคนยังไงให้เก่งเหมือนนักการเมือง (ถึงแม้จะไม่ค่อยมีให้เห็นอ่ะนะ) เราจะต่อรองยังไงให้เก่งเหมือนแม่เวลาต่อราคา เราจะเป็นที่รักของคนอื่นยังไงให้เหมือนคุณครูสมัยประถม… ใช่ ผมว่าสิ่งที่ทำให้ก็อตในวันนั้นเป็นก็อตในวันนี้ มันคงเป็นการเก็บหอมลอมริบบทเรียนที่เล่นเอง เจ็บเอง บทเรียนที่เกิดจากการครูพักลักจำจากคนรอบตัว บทเรียนที่เกิดจากการสังเกตจากสิ่งรอบข้าง เราไม่เห็นต้องมองคนที่เก่งที่สุดในโลกเป็นไอดอลเลยครับ คนเก่งอยู่รอบตัวเราอยู่ที่ว่าเราจะตีกรอบของความเก่งไว้ว่าอย่างไร และจะทำยังไงถึงจะได้สักครึ่งหนึ่งของเขา

เกริ่นมาสักพัก ผมแค่อยากให้ทุกคนเชื่อในตัวเองว่าเราดีกว่าทุกวันนี้ได้ผ่านการเรียนรู้จากคนอื่น ผมเรียนรู้จากคนอื่นมาก็เยอะแล้ว วันนี้คงถึงตาผมบ้างที่ผมจะมาแชร์ lesson learn ของผมให้กับทุกคน ผมคงไม่สามารถบอกได้เต็มปากว่าวิธีนี้คือวิธีที่ดีที่สุด เพราะการแก้ปัญหามันไม่ได้ขึ้นอยู่กับแค่ปัญหา แต่มันต้องเข้าใจไปถึงสภาพแวดล้อม (context) ของปัญหาด้วย มันถึงจะทำให้ปัญหานั้นถูกแก้ได้ผลดีที่สุด เอาเป็นว่าฟังหูไว้หูก็ได้นะครับ :D

ยุควัยรุ่นสร้างตัวจาก intern สู่ full-time

1. การฝึกงานคือใบเบิกทางที่ดีที่สุด เพราะเมื่อเราโชว์ฝีมือมากเท่าไหร่ ก็จะยิ่งทำให้เรามีโอกาสที่จะได้ทำงานต่อได้มากเท่านั้น

2. ถ้ามีช้อยส์มากพอ ให้เลือกบริษัทที่ให้ความคุณค่า (core values) แบบเดียวกับที่เราให้ความสำคัญ เพราะเราจะไม่รู้สึกฝืนตัวเอง

3. การเรียนรู้ที่ดีที่สุดคือการสังเกตว่าพี่ ๆ ทำอะไร แล้วเราต้องทำให้ได้แบบเขา เราจะรู้ว่าอะไรคือจุดสำคัญที่เราต้องปรับปรุงบ้าง

4. พยายามคุยกับพี่เมเนเจอร์อยู่เสมอว่าเป้าหมายของการฝึกงานคืออะไร คาดหวังอะไรจากการฝึกงานบ้าง อยากทำงานจริง? อยากทำงานอิมแพคสูง? อยากทำฟูลไทม์ต่อ?

5. Action = Reaction อย่าคาดหวังว่าพี่ ๆ จะป้อนความรู้ให้เราอย่างเดียว สิ่งเรากระตือรือร้นที่จะลอง ที่จะเรียนรู้มากเท่าไหร่ ยิ่งทำให้เราได้อะไรกลับมามากขึ้นเท่านั้น

6. Growth Mindset สำคัญมากช่วงเวลาฝึกงาน เพราะจะทำให้พี่ ๆ เห็นว่าเด็กคนนี้เติบโตได้ไปไกลแค่ไหน หรือถ้าเจออุปสรรคจะรับมือกับมันได้ไหม

7. ไม่มีใครได้ทุกอย่างที่ต้องการ แต่เมื่อได้มาต้องพิสูจน์ให้เห็นให้ได้ว่าพี่ ๆ คิดไม่ผิดที่เอางานนี้มาให้เราทำ

8. อย่าคิดว่าเราเป็นแค่เด็กฝึกงาน อะไรที่เราสามารถโชว์ความสามารถได้ จงทำ! ถ้าโอกาสไม่มี ก็จงสร้างมันขึ้นมาเอง เหมือนกับที่ตอนนั้นก็อตเสนอให้ทีมทำ AppClips สำหรับ Wongnai

9. ปัจจัยที่จะทำให้เราได้ไปต่อ ไม่ใช่แค่เรื่องสกิลของเรา แต่ยังมีเรื่อง headcount (ตำแหน่งว่างที่เปิดรับ) หรือความต้องการบริษัทด้วย เพราะฉะนั้นไม่ต้องเสียใจถ้าเราทำเต็มที่แต่ไม่ได้ดั่งใจ

10. การฝึกงานคือช่วงเวลาที่เราสามารถลองผิดลองถูกได้มากที่สุดแล้ว อยากทำอะไรให้ทำ พี่ ๆ ก็ไม่ได้คาดหวังว่าเราจะ perfect 100% อยู่แล้ว

การก้าวไปเป็น Senior ไม่ใช่เรื่องง่าย แต่ไม่ได้แปลว่าทำไม่ได้!

ช่วงนี้เป็นช่วงเปลี่ยนผ่านอะไรหลาย ๆ อย่าง ตอนแรกก็อตทำ product ฝั่งร้านค้า ที่ใครน่าจะจำกันได้ที่ทำโปรเจคท์คนละครึ่งจนยอดสมัครถล่มทะลาย จนตอนหลังรู้สึกว่าอยากพาตัวเองไปอยู่ในจุดที่ชาเลนจ์ขึ้นเลยขอ rotate มาทำ LINE MAN (Food Delivery) เลยไล่ยาวจนมาถึงทุกวันนี้

11. ไม่ว่าโปรเจกต์ที่ถือจะเล็กใหญ่มากน้อยแค่ไหน เราต้องเชื่อในสิ่งที่ตัวเราก่อน มันจะทำให้มี ownership และนี่คือจุดเริ่มต้นของความสำเร็จ

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

13. การขายไอเดียก็เหมือนกับการเก็บแต้มความน่าเชื่อถือ (credibility) ยิ่งเราขายไอเดียสำเร็จเยอะมากเท่าไหร่ ยิ่งทำให้เราคุยงานต่อ ๆ ไปได้ง่ายขึ้น

14. ไม่ใช่แค่ขายได้ แต่ต้องติดตามผลด้วย ตัวเลขเป็นยังไง ขายได้เท่าไหร่ CTR CVR OTR ดีขึ้นแค่ไหน อย่าลืมเอามาเล่าให้ทีมฟังด้วย

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

16. ถ้าเรามีของดี เราต้องประกาศให้คนอื่นรู้ ทำงานเก่งแล้ว ขายตัวเองจะยิ่งเก่งจะยิ่งทำให้เราไปถึงจุดหมายได้ไวขึ้น

17. การเขียนบทความในปี 2025 เพื่อเล่าวิธิคิดของงานตัวเอง ก็ยังเป็นวิธีที่เวิร์คอยู่ ที่จะได้โชว์ให้คนทั้งในและนอกบริษัทรู้ว่าเราเก่งแค่ไหน คนไม่ได้จดจำเราจากชื่อ แต่คนจดจำเราจาก story

18. ยิ่งใครทำ product ที่ทุกคนรู้จักอยู่แล้ว แต่คุณยังเก็บเรื่องราวเจ๋ง ๆ ที่คุณคิดเอาไว้ในหัวในหัวตัวเองก็แอบน่าเสียดาย เพราะจริง ๆ คนไม่ได้มาอ่านว่า product คุณเจ๋งแค่ไหน แต่เค้าอยากรู้ว่าคนในบริษัทใหญ่ ๆ มีวิธีคิด วิธีทำงานยังไงมากกว่า

19. ถ้าใครยังติดกับดักการเป็น Junior Level ก้าวยังไงก็ไปไม่ถึง Senior สักที ถึงเวลาแล้วที่เราจะต้องคุยกับเมเนเจอร์ว่าอะไรคือสิ่งที่เขาคาดหวัง ทำยังไงถึงจะติ๊กถูกใน criteria ต่าง ๆ

20. หลังจากที่รู้แล้วว่าเรายังขาดอะไร ทำสิ่งนั้นซ้ำ ๆ พูดถึงบ่อย ๆ เล่าให้เมเนเจอร์ฟังเยอะ ๆ ทำให้เขาเชื่อในตัวเราให้ได้ จำเอาไว้ว่าความสม่ำเสมอทำให้เกิดความเชื่อใจ

Staff ไม่ใช่แค่ต้องเก่ง แต่ต้องเป็น role model ให้ได้!

พอเราอยู่ตำแหน่งสูงขึ้น การทำงานแบบ task by task ทีละอันสองอันก็ดูไม่ได้น่าตื่นเต้นขนาดนั้นแล้ว หลาย ๆ คนอาจจะรู้สึกว่าชีวิตช่วงนี้มันแสนน่าเบื่อ ซึ่งส่วนตัวผมก็รู้สึกนะ แต่เมื่อวานผ่านไปวิธีแก้เจ้าสิ่งนี้มันคือการที่เราต้องเริ่มตั้งเป้าให้สูงขึ้น พยายามพาตัวเองไปแฝงตัวในงานต่าง ๆ เช่นเข้าไปมีส่วนร่วมกับ PM ในการคิด roadmap ของ product เริ่มพยายามยื่นมือไปช่วยเหลือ manager ในจุดที่เค้าไม่ได้ expect ว่าเราจำเป็นต้องทำ หรือแม้กระทั่งการที่ได้ทำอะไรที่มันใหญ่ขึ้นแบบที่ก็อตได้มีโอกาสติดต่อกับทาง Apple ในการส่งตัวไฟล์ของ LINE MAN Live Activities ขึ้นไปอยู่เว็บไซต์ apple.com ด้วยตัวเอง พอเรามีเป้าหมายไฟในตัวเราก็จะเริ่มกลับมาติดอีกครั้ง!

21. ยิ่งโตขึ้น ภาระงานก็ต้องเยอะขึ้นอยู่แล้ว การมองไปข้างหน้าว่าตัวเราจะช่วยทีมยังไงได้บ้าง และ initiate มันขึ้นมาด้วยตัวเอง โดยไม่มีใครมาสั่ง จะทำให้ตัวเราถูกจัดอยู่ใน exceed expectations

22. Exceed expectations เริ่มจากดูคนรอบตัวว่าทำอะไร ยังไงบ้าง นั้นคือ bare minimum ที่เราต้องทำให้ดี หลังจากนี้ถ้าเราอยากจะโดดเด่น เราต้องทำให้ได้มากกว่า โดยใช้ความคิดสร้างสรรค์

23. บางครั้งโอกาสดี ๆ มักจะมาพร้อมกับการเข้าออฟฟิศ

24. เวลาทำงาน การคิดให้จบ จะทำให้เรามีสิทธิ์ต่อรองได้มากขึ้น เช่นเราทำดีไซน์ A เราต้องคิดได้ทั้งข้อดีข้อเสียของดีไซน์ หาดีไซน์ B C D E ที่ปิดช่องโหว่นั้นไปเรื่อย ๆ ไม่ใช่ว่าออกแบบมาหลาย ๆ option แบบ randomly

25. ถ้าเราอยากจะผลักดันอะไรสักอย่าง ให้มองหาคนที่มี authority ที่ดูจะให้ความสำคัญแบบเดียวกับเรา จะทำให้ % success rate ที่จะได้ทำสิ่งนั้นสูงขึ้น

26. ทำตัวให้กว้างขวาง รู้จักกับผู้คนหลากหลาย จะทำให้การคุยงานง่ายขึ้นเยอะ ยิ่งมีข้อ 16–19 จะยิ่ง combo ความน่าเชื่อถือในตัวเราเอง

27. ดีไซน์ดีแต่ตัวเลขผลลัพธ์ (outcome) แย่ ก็ไม่ได้แปลว่าดีไซน์นี้ effective แต่ดีไซน์ที่ดีควรจะพาให้ business โตได้ด้วย ตัวดีไซน์ถึงจะมี value แต่ก็ต้องบาลานซ์ให้ดี ไม่อย่างนั้นอาจจะต้องมาแก้กันทีหลัง

28. การดูน้อง intern เป็นการ coaching ที่จะทำให้เราเติบโตแบบก้าวโดดมากขึ้น ได้เรียนรู้ที่จะเป็นผู้นำและผู้ตาม การเห็นน้องเก่งขึ้นเหมือนเฝ้าเห็นดอกไม้โตกลางใจ

29. Done is better than Perfect คำนี้ จากพี่ยอด กี่ปี ๆ ใช้ได้เสมอ บางครั้งการเริ่มต้นลงมือทำอะไรสักอย่างมีค่ากว่าการรอให้มัน perfect ก่อนแล้วถึงจะทำ… การ deliver งานที่ดีควรดูลู่ทางลมด้วย รู้ว่าตอนไหนต้องการโครง หรือตอนไหนต้องการความเนียบ

30. เราไม่มีทางได้ทุกอย่างดั่งใจหวัง เรียนรู้การ disagree and commit เพื่อให้งานเดินต่อไปได้

Staff to Lead เปลี่ยนจากงานมาเป็นคน

จริง ๆ ต้องเล่าก่อนว่าในแต่ละปีของการทำงาน ก็อตคุยกับพี่เมเนเจอร์อย่างสม่ำเสมอว่าเราอยากโตไปสาย people นะ เรารู้สึกดีที่ได้โค้ชคน รู้สึกดีที่ได้ขยับขึ้นมาดูภาพรวมมากขึ้น รู้สึกดีที่เห็นทีมทำงานกันอย่างมีความสุข เพราะงั้นเองเลยเกิดการ rotate จาก Staff มายังตำแหน่ง Lead UX/UI Design ที่ถึงแม้ว่าจะอยู่ใน Job Level เดียวกัน แต่การเป็น Lead ก็จะโฟกัสเกี่ยวกับคนและทีมมากขึ้น นั้นเลยเป็นสิ่งที่ได้ทำมาตลอดจนถึงทุกวันนี้

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

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

33. เมเนเจอร์ไม่ได้อยู่กับเราตลอด เพราะฉะนั้นการเก็บ small success มาเล่าให้เขาฟัง จะทำให้เขาเห็นว่าเราใส่ effort ไปกับอะไรบ้าง

34. เมื่อเกิด conflict อย่ากลัวปัญหา ให้พยายามเดินเข้าหา พูดคุยกันอย่างมีวุฒิภาวะ ทำความเข้าใจกัน เล่าให้ฟังถึงเจตนา และเมื่อหาทางออกร่วมกันได้ จะทำให้เราสนิทและรู้ใจกันมากขึ้น

35. เวลาคุยกับ stakeholders พยายามคิดล่วงหน้าว่า stakeholders ที่เรากำลังคุย เค้ากำลังมีเป้าหมายอะไร มีสิ่งที่กังวลอะไร และพยายามเอาสิ่งเหล่านั้นมาอยู่ในงานด้วย มันจะเป็นสิ่งเล็ก ๆ น้อย ๆ ที่แสดงถึงความใส่ใจและทำให้การคุยงานง่ายขึ้น

36. เมื่อเราโตขึ้น อย่ากลัวกับการที่ตัวเองจะบอกว่าไม่รู้ สิ่งที่สำคัญกว่าคือเราพยายามตามหาคำตอบนั้นให้กับคนถามได้มากแค่ไหน

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

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

39. ไม่มีใครชอบโดนสั่ง… บางทีการถามเพื่อให้ฉุกคิด อาจจะได้ผลมากกว่าการพูดตรง ๆ

40. Give it before you take it ก่อนที่เราจะบอกว่าเราควรได้อะไร ให้ลองกลับมาคิดว่าที่ผ่านมาเราให้อะไรกับคนอื่นบ้าง

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

ใครอ่านมาถึงตรงนี้ ก็อตอยากจะบอกว่าวันนี้ก็อตไม่ได้ทำที่ LMWN แล้ว แต่ทุกครั้งที่มองย้อนกลับมาไม่มีวันไหนเลยที่ก็อตรู้สึกเสียใจที่ได้ทำงานที่นี่ ที่นี่ยังเป็นพื้นที่ที่ดีมาก ๆ ที่หนึ่งที่เอื้อให้ต้นไม้อย่างก็อตได้เติบโตได้เป็นอย่างดี มีเพื่อน ๆ ร่วมงานที่น่ารัก มีงานที่สนุก เพราะฉะนั้นถ้าใครยังสงสัยว่าที่นี่ยังน่าสนใจอยู่ไหม ยังขอยืนยันคำเดิมว่ามันดีมาก ๆ อยากให้ทุกคนมาอยู่ในจุดที่ก็อตอยู่ ส่วนตัวก็อตเองก็อยากท้าทายตัวเองมากขึ้น อยากลองออกมาไปเติบโตในสภาพแวดล้อมอื่น ๆ บ้าง ไม่มีใครรู้ว่าอนาคตจะเป็นยังไง แต่ถึงวันนั้นก็อตคงเอาเรื่องราวดี ๆ แบบนี้มาเล่าให้กับทุกคนฟังอีกครั้งแน่นอน ขอบคุณที่ติดตามเรื่องราวของก็อตตลอดระยะเวลาการทำงานที่นี่เสมอมา (และเสมอไป ❤)

ถ้าใครมีคำถามหรืออยากให้ก็อตอธิบายเพิ่มเติมในข้อไหน สามารถทักมาถามได้ในไอจี instagram.com/padagot นะครับ ยินดีอธิบายให้ครับผมมม หรือจะ connect มาใน LinkedIn ก็ได้ ไว้เจอกันใหม่โอกาสหน้า สำหรับวันนี้ สวัสดีค้าบบ 👋

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

สวัสดีครับ 👋🏻 ผมก็อต UX/UI Designer จาก LINE MAN Wongnai หลายคนน่าจะได้ลองใช้ฟีเจอร์ใหม่ล่าสุดของเรา Live Activities ฟีเจอร์ของ iOS ที่ช่วยแสดงข้อมูลแบบเรียลไทม์ในหน้าล็อคสกรีน และใน Dynamic Island ของ iPhone 14 Pro โดยที่ปัจจุบันในไทยยังมีแอปที่รองรับน้อยมาก การมาของ Live Activities ของ LINE MAN จึงเป็นเรื่องที่น่าฮือฮาให้ชาว iOS ไม่น้อยเลย

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

เมื่อจุดเริ่มต้นและแพชชั่นบรรจบกันได้พอดิบพอดี

ย้อนหลังไปช่วง iPhone 14 เปิดตัวเมื่อเดือนกันยายนปี 65 ไฮไลท์ของงานก็คงเป็นอะไรไม่ได้ ถ้าไม่ใช่เจ้า Dynamic Island ที่สร้างเสียงฮือฮาให้กับวงการไอทีเป็นอย่างมาก เพราะน่าจะเป็นการพลิกข้อจำกัดของฮาร์ดแวร์ มาเป็นจุดเด่นของโปรดักส์โดยใช้ซอฟท์แวร์ที่สร้างขึ้นมาและผสมผสานกันอย่างลงตัว ระหว่างที่นั่งดูงานเปิดตัว Apple ก็เห็นการเอา Dynamic Island มาใช้ประโยชน์ในการแจ้งสถานะออเดอร์ของแอปประเภทส่งอาการ จากนั้นก็อตก็ไม่รอช้ากับการ mock ตัว LINE MAN ลงบน Dynamic Island แบบขำๆ แล้วก็ส่งไปในห้องที่มี iOS engineer อยู่

ด้วยความที่ก็อตเป็นแฟนคลับ Apple อยู่แล้ว เลยยิ่งทำให้เรารู้สึกว่าเราอยากทำฟีเจอร์นี้ เราอยากให้มันเกิดขึ้นมาจริงๆ ในเซสชั่น 1–1 คุยกับเมเนเจอร์ตลอดว่าเราอยากทำอะไร อยากทำฟีเจอร์ไหน ซึ่ง Live Activities เป็นหนึ่งในสิ่งที่เราอยากทำ และเป็นช่วงเวลาที่มีอีกทีมที่กำลังจะปรับปรุง widget บน iOS ใหม่พอดิบพอดี เลยทำให้ก็อตได้ถืองานชิ้นนี้แบบข้าม squad เลย!

เอาจริงๆ เริ่มต้นก็ไม่ได้ง่าย

หลังจากที่เราเคาะกันว่าจะทำฟีเจอร์ Live Activities ก็เป็นโจทย์ให้ทาง UX ว่านอกจากการใช้ติดตามสถานะการจัดส่งอาหาร มีอะไรที่สามารถเอาประโยชน์ของ Live Activities เข้ามาพัฒนาประสบการณ์ของผู้ใช้ได้อีกรึเปล่า ช่วงแรกๆ ก็คิดนอกกรอบไปหมด อย่างเช่น ทำเป็น Live Activities แนะนำเมนูโปรดหรือโปรโมชั่นโดนใจดีไหม แต่สุดท้ายก็.. ได้แต่บอกว่าอย่าฝืนเลย เพราะฟีเจอร์ Live Activities เหมือนเกิดมาเพื่อติดตามอะไรที่มันมีการขยับตลอด ไม่ว่าจะเป็นเวลา หรือสถานะอะไรบางอย่าง จนสุดท้ายก็ตกลงกันว่างั้นกลับไปอัปเดตสถานะออเดอร์ที่เป็นไอเดียแรกนั่นแหละ เพราะเอาจริง ตั้งแต่คนเริ่มกดเข้ามาในแอปไลน์แมน จนไปถึงการตักอาหารคำสุดท้ายเข้าปาก เพราะ “ช่วงเวลาแห่งการรอ” กินเวลาเกิน 50% ของช่วงเวลาทั้งหมดที่ได้ใช้ LINE MAN ดังนั้นเราเลยอยากทำให้ประสบการณ์การรอของพวกเขาดีขึ้นผ่านฟีเจอร์นี้~

สิ่งที่เกิดขึ้นหลังจากนี้มีแต่ความมันส์!

พวกเราตั้งใจว่าเราอยากจะปล่อยพร้อมกับ iOS 16.1 ซึ่งตอนนั้นมีเวลาไม่ถึง 1 เดือนที่จะต้องทำทุกอย่างตั้งแต่คิด requirements, ออกแบบ จนไปถึงพัฒนาและทดสอบเพื่อปล่อยให้ทันในวีคที่ Apple ปล่อย 16.1 แปลว่าก็อตมีเวลาออกแบบเจ้า Live Activities ประมาณ 1–2 สัปดาห์เท่านั้น และในขณะเดียวกัน engineer ก็ต้องแบ่งกันไปดู POC (proof of concept) ว่าอะไรทำได้หรือไม่ได้ยังไงบ้าง จะได้ดูความพร้อมและประเมินกำลัง (effort) ของ engineer ต่อไป

หลังจากที่เริ่มปักธงว่าจะทำ Live Activities สำหรับการบอกสถานะออเดอร์แล้ว ก็เป็นหน้าที่ของ UX ที่ต้องมาทำความเข้าใจกับ existing flow ก่อนว่าปัจจุบันมีกี่ขั้นตอน แต่ละขั้นตอนมีอะไรเป็นจุดเด่น แล้วเราจะสามารถเอา Live Activities เข้ามาทำให้มันดีขึ้นได้ยังไง ซึ่งตั้งแต่ Finding your rider จนไปถึง Arrived at destination ก็เป็นกระบวนการที่ serve user’s needs แล้ว จนเราได้มาทำความเข้าใจต่อว่าเราสามารถสั่งให้ Live Activities ปิดได้ ก็ต่อเมื่อเหตุการณ์บางอย่างถูกดำเนินแล้วจบลง เลยคิดต่อว่าจริงๆ เราสามารถทำให้ Live Activities ขึ้นค้างเอาไว้ เพื่อให้ผู้ใช้ให้คะแนนร้านค้าและไรเดอร์ได้ง่ายขึ้น เพิ่มการมองเห็น (awareness) มากขึ้น ซึ่งน่าจะทำให้จำนวนรีวิวเพิ่มขึ้นตาม ช่วยแก้ปัญหา user’s pain points และ serve Business’s needs ได้ในเวลาเดียวกัน

ทีนี้ UX อย่างเราก็ต้องไปดูการทำงานของ Live Activities ต่อว่าทำงานยังไง มีข้อจำกัดอะไรบ้าง รวมถึงดู รูปแบบการใช้งานอื่นๆ ว่าเค้าทำออกมาท่าไหน มีการแสดงผลกี่แบบ มีการแสดงแอนิเมชันยังไง ถ้าเอามาปรับใช้ให้เข้ากับของเราจะเป็นไปได้มากน้อยขนาดไหน เอาจริงๆ ของแบบนี้ปกติเราจะสามารถดูจากเอกสารของ Apple แต่เรื่องน่าเศร้าคือด้วยความที่เป็นฟีเจอร์ใหม่แกะกล่อง ที่แม้แต่ Apple เองก็ยังไม่ได้มี Design Document มาให้อ่านในตอนนั้น (เพิ่งมาปล่อยช่วงที่เรา ออกแบบเสร็จไปแล้ว T-T) ทำให้ตอนนั้นต้องพยายามทำทุกวิถีทางที่จะหาข้อมูลมา ซึ่งเอาตามตรงก็ไม่ได้เยอะ งานนี้เลยอาศัย UX ต้องคุยกับ engineer เยอะๆ

พอรู้เค้าโครงของ Live Activities แล้วก็เริ่มวางข้อมูลที่เราจะเอามานำเสนอ ว่าข้อมูลแต่ละอย่าง ควรถูกจัดวางไว้อยู่ตรงไหน หรือแม้กระทั่ง การติดตามสถานะ ควรติดตามยังไงดี ซึ่งข้อมูลที่ว่านี้ก็จะประกอบไปด้วย

• สถานะออเดอร์ (Text + Visual)
• ชื่อร้านอาหาร
• เวลาที่รอ
• ข้อมูลคนขับ (รูปภาพและชื่อ)

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

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

ในพาร์ทของการให้คะแนนร้านอาหาร ดูเผินๆ ก็อาจไม่มีอะไร แต่จริงๆ แล้ว ด้วยความที่ flow ปัจจุบันการให้คะแนนบนแอปไลน์แมน ถ้ากดให้คะแนนปุ๊ป จะเริ่มพาไปให้คะแนนไรเดอร์ก่อน แล้วค่อยพาไปให้คะแนนร้านอาหาร พอมันเป็นแบบนี้แล้วเลยส่งผลมาถึงการออกแบบ Live Activities ในช่วงที่ต้องให้ลูกค้ารีวิว ว่าเราจะออกแบบมาในท่าไหนดี ซึ่งแต่ละอันก็มีข้อดีข้อเสียไม่เหมือนกัน จนสุดท้ายเลือกแบบที่ 2 ที่เป็นรูปดาว ที่ถึงแม้ว่ากดดาวไป หน้าต่อไปที่ผู้ใช้ จะเจอหน้าน้องมูนเพื่อให้คะแนนไรเดอร์ แล้วถึงค่อยเจอหน้าให้ดาวกับร้านอาหาร เพราะว่าอย่างน้อยๆ ผู้ใช้ก็รู้ตั้งแต่หน้า Live Actitivities ว่าเห็นดาวแบบนี้ คือกดไปเพื่อให้คะแนนนะ ต่างจากอันที่ 1 ที่เป็นรูปหน้าน้องมูน ที่อาจจะ imply ได้ยากว่านี่คือการให้คะแนน ซึ่งอาจทำให้คนกดให้คะแนนน้อยลง หรือแม้กระทั่งแบบที่ 3 ที่มีเพียงแต่ปุ่มให้คะแนน ถึงแม้ว่าจะตรงไปตรงมาว่ากดแล้วจะเจออะไร แต่ก็มีข้อเสียตรงที่มันตรงเกินไป จนบางครั้งมันไม่ดึงดูดได้ดีเท่ากับการเป็นรูปดาวนั่นเอง

อีกสิ่งหนึ่งที่ต้องรองรับเพิ่มคือเคส dark mode เนื่องจากปัจจุบันแอป LINE MAN ยังไม่ได้รองรับ dark mode ได้แบบ 100% ทำให้ตอนที่ทำ Live Activities ต้องดูเพิ่ม เช่นการดูคอนทราสต์ของสี ถ้าพื้นหลังสีขาว แล้วดาวควรเป็นสีอะไรเพื่อที่ให้ไม่กลืน โดยเฉพาะการที่ทำให้พื้นหลังโปร่งใสแบบที่เราใช้กันใน Live Activities นั่นเอง

จาก Live Activities สู่ Dynamic Island

เมื่อทุกอย่างเริ่มลงตัว เราก็ค่อยๆ แปลงร่างมันให้ออกมาภายใต้ข้อจำกัดของ Dynamic Island เช่น ประกอบไปด้วย 3 รูปแบบ (Expanded, Compact, Minimal) การกำหนดสีของพื้นหลังที่ต้องเปนสีดำสนิทเท่านั้น และด้วยข้อจำกัดของพื้นที่ จึงจำเป็นต้องลดทอนรายละเอียดต่างๆ เพื่อสามารถแสดงได้ ตัวอย่างเช่น ในขั้นตอนใกล้ถึงแล้วรอรับได้เลย เมื่อแสดงในรูปแบบ minimal แล้ว โชว์ได้เพียง <1น. เพื่อยังให้ผู้ใช้ยังได้รับสารเหมือนกับภาพใหญ่ที่ต้องการให้นึกถึง

ระหว่างที่ก็อตดีไซน์ element และ stage ต่างๆ บน Live Activities และ Dynamic Island นั้น ก็ได้ส่งงานต่อให้กับน้องเบล UX Writer ที่ได้มาดูโปรเจคท์นี้ ซึ่งวันนี้เบลก็จะมาเล่าเบื้องหลังให้กับทุกคนอ่านด้วย

เติมคำลงในช่องว่าง ไม่ใช่แค่คิดให้ถูกต้อง แต่ต้องทำให้ถูกใจ!

สวัสดีค่ะทุกคน เบล UX Writer จาก LINE MAN Wongnai นะคะ วันนี้จะมาเล่าเบื้องหลังการคิด microcopy บนตัว Live Activities ให้ทุกคนได้ฟังกัน

จริง ๆ แล้วเราจะใช้คำที่อยู่ในหน้าแสดงสถานะบนแอปอยู่แล้วก็ได้ แต่เพราะว่า…

ข้อความเหล่านี้จะปรากฎอยู่บนหน้าจอล็อคสกรีนของผู้ใช้ตลอดเวลา และข้อความถือเป็นองค์ประกอบหลักบน UI ของ Live Activities เลยก็ว่าได้ เราเลยมานั่งจับเข่าคุยกับพี่ก็อต เพื่อกำหนด 3 อย่างด้วยกัน

1. Goal — อยากใช้ภาษาที่ conversational ข้อความแสดงความเข้าอกเข้าใจผู้ใช้ในแต่ละ state ได้
2. Voice — แน่นอนว่า เวลาคิดข้อความขึ้นมาเราต้องนึกว่าใครเป็นผู้พูดข้อความเหล่านั้น ตอนแรกก็มีข้อถกเถียงว่าจะให้เป็นน้ำเสียง generic ไม่เจาะจงว่าเป็นใคร? (แต่มันก็จะทื่อและเล่นอะไรได้ยากเพราะต้องเขียนกลาง ๆ) หรือว่าจะเป็นน้ำเสียงของไรเดอร์? (แต่ก็ใช้ไม่ได้เพราะจะมี state หาไรเดอร์อยู่ด้วย) เราเลยสรุปกันว่าจะเป็นน้ำเสียงของ “น้องมูน” ตัวแทนแบรนด์ LINE MAN นั่นเอง ซึ่งการเขียนโดยใช้เสียงมูนก็อาจทำให้แบรนด์แข็งแรงยิ่งขึ้น
3. Tone — ด้วยความที่เป็นฟีเจอร์ใหม่ เราเลยอยากลองปรับ mood ให้สนุกและเฟรนด์ลี่ขึ้น แต่ก็ไม่ได้ฉีก branding guideline แต่อย่างใด เพราะแต่เดิมตัวแอป LINE MAN ก็ใช้น้ำเสียงที่เฟรนด์ลี่อยู่แล้ว

พอเราเริ่มกำหนดทิศทางได้แล้วก็มาร่างดราฟต์แรกกันเลย เวลาเขียนเราจะทำ 2 อย่างหลัก ๆ

1. ดู existing problems กับ opportunities ในแต่ละ state
2. เอาข้อความเดิมมาเทียบแล้วดูว่าปรับแต่ละคำให้เฟรนด์ลี่ขึ้นได้ยังไงบ้าง

เช่น State: ไรเดอร์เดินทางไปยังที่หมาย
คำที่ใช้อยู่ปัจจุบัน: Heading to destination / กำลังเดินทางไปยังที่หมาย
Existing problem: ผู้ใช้ไม่รู้ว่าไรเดอร์อยู่ไหนและเป็นช่วงที่ user รอมาแล้วระยะนึง เราเลยใช้โอกาสนี้ เขียนคำที่แสดงถึงความเร่งรีบมากขึ้น เพื่อแสดงถึงความใส่ใจของเรา ว่าเราก็อยากให้อาหารไปถึงเขาเร็วที่สุดเหมือนกัน เลยออกมาเป็นท่าที่ว่า “ไรเดอร์กำลังรีบไปหาคุณ” / “Heading your way”

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

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

เมื่อทุกทางออก…มีปัญหา

แน่นอนว่า คำที่เราคิดมาก็ไม่ได้ผ่านฉลุยตั้งแต่ดราฟต์แรก จำได้เลยว่ามีวันนึงเข้าออฟฟิศแล้วไปนั่งคุยกับพี่ก็อตทั้งวันเพื่อที่จะสรุปคำ ถ้าถามว่ากี่ดราฟต์ บอกเลย จำไม่ได้ 5555 อาจจะเพราะเป็นงาน ครีเอทีฟระดับนึง เวลาต้องการทิศทางที่แน่ชัด มันเลยอดไม่ได้ที่ต่างคนต่างมี bias ผสมอยู่ เพราะงั้นในสถานการณ์แบบนี้ เราเลยตัดสินใจทำ guerilla test กันที่ออฟฟิศ (Guerilla test คือ การทดสอบฉบับรวดรัด โดยใช้วิธีการสุ่มเลือกและทดสอบกลุ่มเป้าหมาย ตามสถานที่ต่างๆ เพื่อเก็บฟีดแบคแบบคร่าวๆ) โดยให้คนในบริษัทนี่แหละช่วยเลือกว่าจะใช้ข้อความไหนดี เช่น ตอนนั้นเราถกกันว่าเวลาร้านกำลังเตรียมอาหารอยู่จะใช้คำไหนดีระหว่าง

A. คำสั่งซื้ออยู่ในครัวแล้ว / In the kitchen
B. กำลังจัดเตรียมคำสั่งซื้อ / Preparing your order

แน่นอนว่าแบบ A ทำให้ผู้ใช้เห็นภาพแม่ครัวกำลังผัดตะหลิวชัดกว่า แต่พอได้ลอง guerilla test กับคนในบริษัท ก็ได้ผลสรุปว่าแบบ B เป็นคำที่ผู้ใช้ชินมากกว่าและการระบุว่า “อยู่ในครัว” อาจจะใช้ไม่ได้กับกรณีที่สั่งผลไม้รถเข็น เพราะมันไม่มีครัว นี่นา นอกเหนือจากนี้ ในอนาคตอาจมีการใช้ Live Activities กับบริการอื่นอย่างเช่น LINE MAN Mart ด้วย เราเลยตัดสินใจใช้แบบ B ดีกว่า

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

ปัดกวาดเก็บงาน เตรียมส่งต่อให้ engineer!

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

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

ในช่วงที่น้องเบลกำลังดู UX Writing อยู่ ก็อตก็มีเวลามาเก็บงานให้ engineer เพื่อให้ UI ออกมาได้เนียบตามที่ออกแบบมาให้ได้มากที่สุด จะได้ไม่เสียเวลามาแก้ตอน QA Design ซึ่งอาจจะไม่ได้มีเวลาเพียงพอในการแก้ตอนนั้น

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

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

ผลลัพธ์เป็นยังไง มาดูกัน

หลังจากที่ฟีเจอร์นี้ถูกปล่อยให้คนทั่วไปได้ใช้ เริ่มมีฟีดแบ็คจากตรงโน้นที ตรงนี้ที โดยเฉพาะสื่อไอทีใหญ่ๆ บนเฟซบุ๊คทั้ง iMod, แบไต๋, Kangg, Blognone ก็เริ่มลงข่าวจนเกิดเป็นกระแสที่ทุกคนดูตื่นเต้นกันมากๆ เพราะว่า LINE MAN น่าจะเป็นแอปฟู้ดเดลิเวอรีเจ้าแรกในไทย ที่รองรับการแสดงผลแบบ Live Activities สร้างเสียงฮือฮาพอสมควร ถูกแชร์ต่อหลายร้อยแชร์ รวมถึงมียอดชมเกี่ยวกับทวิตที่พูดถึง Live Activities รวมกันมากกว่า 10 ล้านครั้ง

นอกจากนี้เจ้า Live Activities นี้ยังช่วย LINE MAN ในแง่อื่นๆ ได้ เช่น

• ในบรรดาผู้ใช้ที่เห็น Live Activities มีมากกว่า 6% ที่กดเข้าไปให้คะแนนพี่ๆ ไรเดอร์และร้านค้า ผ่าน Live Activities
• ในบรรดาผู้ใช้ที่มี Live Activities เมื่อก่อนตอนที่ยังไม่มี Live Activities มีประมาณ 20% เท่านั้นที่ให้คะแนนไรเดอร์และร้านอาหาร แต่หลังจากมี Live Activities นี้ ผู้ใช้กลุ่มนี้มีอัตราการให้คะแนนเพิ่มขึ้นมาเป็น 44% เลย
• ในบรรดาผู้ใช้ที่มี Live activities มีการกดเข้าไปดูสถานะออเดอร์เฉลี่ย 8 ครั้ง ในขณะที่ผู้ใช้ ที่ไม่มี Live activities มีการกดเข้าไปดูสถานะออเดอร์เฉลี่ยเพียง 5 ครั้ง // เอาจริงๆ ข้อนี้แอบตรงข้ามกับสมมติฐานนิดหน่อย ตอนแรกคิดว่าถ้าผู้ใช้เห็นสถานะตลอด น่าจะทำให้เค้าไม่ต้องกดเข้าไปดูบ่อยๆ แต่พอมาคิดดูดีๆ คือ 1) ผู้ใช้อาจเห็น Live Activities ทุกครั้งที่เค้าเปิดโทรศัพท์ ทำให้เค้านึกถึงออเดอร์ตลอด กดง่าย ก็เข้าไปดูง่าย 2) เมื่อมันค้างอยู่ที่สถานะใดสถานะหนึ่งนานๆ ผู้ใช้จะกดเข้าไปดูเพื่อเช็คว่ามันค้างไหม 3) เมื่อสถานะอยู่ที่ไรเดอร์กำลังเดินทางไป ผู้ใช้อาจอยากรู้ว่าอยู่ตรงไหน หรือเปิดเข้าไปเพื่อเช็คแผนที่ เป็นต้น
• ผู้ใช้ที่กดเข้าไปดูสถานะออเดอร์ผ่าน Live activities จะอยู่หน้านั้นประมาณ 10 วินาที ในขณะที่ผู้ใช้ที่กดเข้าไปดูสถานะออเดอร์ จากช่องทางอื่นๆ จะอยู่หน้านี้ประมาณ 15 วินาที โดยเฉลี่ย
• Live Activities ช่วยดึงผู้ใช้ที่ไม่ได้ใช้ LINE MAN มานานหรือใช้นานๆ ครั้ง ให้มาใช้ LINE MAN อีกครั้ง ซึ่งสังเกตได้จากค่าเฉลี่ยของจำนวนวันระหว่างออเดอร์สุดท้ายและออเดอร์ล่าสุดหลังจากมี Live Activities

ล่าสุดเมื่อช่วงกลางเดือนมีนาคมที่ผ่านมา ทาง Apple ได้นำตัวอย่างการใช้ Live Activities บน Dynamic Island ไปแสดงบนเว็บไซต์ Apple เองอีกด้วย เอาจริงๆ นับเป็นเกียรติชีวิตในฐานะที่เป็นแฟน Apple และได้มีผลงานตัวเองอยู่บนเว็บไซต์ของเรา ดีใจม๊ากกก

เล่ามายาวเหยียด เป็นยังไงบ้างครับกับบทความแรกในปี 2023 ของผม หายไปเกือบ 2 ปีกับการเขียนบทความภายใต้ LINE MAN Wongnai …

ผมเชื่อเสมอว่าบางครั้งการทำอะไรด้วยความมุ่งมั่น ความรัก ความสุข มันจะช่วยทำให้ผลงานของเราออกมานั้นดีเสมอ แต่เอาจริงๆ งานนี้มันคงไม่ได้มาถึงจุดๆ นี้ถ้าขาดทีมงานคุณภาพจาก LINE MAN ทุกคนทั้งพี่ท็อป พี่กิม ที่มาช่วย engineer งานนี้ เก็บทุกเม็ดแบบที่เรียกได้ว่าแทบไม่ได้แก้กันหลายๆรอบเลย ขอบคุณเบล UX Writer โปรเจคท์นี้ที่ได้จับคู่กันเมื่อไหร่ ก็พร้อมจะทุ่มแรงกายแรงใจให้กับงาน พยายามหาทางออกให้กับงานชิ้นนั้นๆ ให้ออกมาดีที่สุด ขอบคุณพี่ๆ QA ในทีมที่อาจจะไม่ได้ทำงานด้วยกันโดยตรง แต่ก็ช่วยกันตรวจโน้นตรวจนี่ให้สมบูรณ์ที่สุด ถึงแม้จะเป็นเรื่องใหม่ที่ต้องเรียนรู้เพิ่มด้วย สุดท้ายก็ต้องขอบคุณพี่นุ่ม พี่บอย พี่นุ๊ก ที่ให้โอกาสได้มาดูแลงานชิ้นนี้ ที่อยากจะบอกว่าแฮปปี้ม๊ากกกก 💖

นั่นก็คือทั้งหมดที่ก็อต (และเบล) อยากจะมาแชร์ให้กับทุกคนได้รู้เบื้องหลังการทำ Live Activities กัน ถ้าใครชอบก็อย่าลืมกด clap 👏 นะครับ ฮ่าๆ หรือจะย้อนกลับไปอ่านบทความเก่าๆ ของก็อตได้ (เปิดการเดินทางของ UX กับอุปสรรคคนละครึ่งที่ต้องฝ่าฟันเพื่อร้านค้าบน LINE MAN) อนาคตหวังว่าจะมีโอกาสมาแชร์เรื่องอื่นๆ ให้กับทุกคนได้ฟังกัน กดติดตาม Medium ก็อตไว้ จะได้ไม่พลาดบทความหน้า หรือถ้าใครอยากรู้เรื่องอะไรก็สามารถส่งข้อความมาคุยกันได้นะครับที่ Facebook ไว้เจอกันใหม่โอกาสหน้า ขอบคุณที่อ่านมาถึงตรงนี้นะครับ :D

เขียนโดย Pada Kanchanapinpong (Got) — UX/UI Designer และ Pattanun Punjanun (Bell) — UX Writer

พิสูจน์อักษรโดย Isriya Paireepairit (Mark) — VP of Public Affairs

พามาดูเบื้องหลังการออกแบบของ LINE MAN Live Activities แอปสั่งอาหารเจ้าแรกในไทยที่ใช้ได้! was originally published in Life@LINE MAN Wongnai on Medium, where people are continuing the conversation by highlighting and responding to this story.

สวัสดีครับทุกคนนน ผมก็อต UX/UI Designer จาก LINE MAN Wongnai อีกเช่นเคยนะครับ แต่วันนี้ไม่ได้มาเล่าอะไรเกี่ยวกับบริษัทนะ แต่อยากมาแชร์ประสบการณ์และความตั้งใจที่ก็อตทำขึ้นมาในช่วงงานรับปริญญาที่ผ่านมา เอาแบบง่ายๆ เป็นกันเอง เอาไว้อ่านเพลิน ผ่อนคลายยามว่างนะครับ 😉

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

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

“เราจะทำยังไงให้คนที่ตั้งใจจะมางานของเรา ได้รับความสะดวกสบายในทุก touchpoint ที่เค้าเจอ ไม่ว่าจะตั้งแต่ก่อนวันงานหรือแม้กระทั่งในวันงาน”

ซึ่งในบทความนี้จะแบ่งออกเป็น 3 ตอนหลักๆนะครับ

1. Research & Exploration — เพราะอยากใส่ใจ เลยอยากเข้าใจ
2. Solutions — เข้าใจแล้ว ละแก้ปัญหายังไงดี (?)
3. Result & Evaluation — สรุปแล้วที่เราทำ มันได้ผลเป็นยังไง เวิร์คไหม น่าเอาไปทำตามไหม

1. เพราะอยากใส่ใจ เลยอยากเข้าใจ

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

Key takeaways:

1. ใช้ Instagram Story ในการทำ survey เนื่องจากใน IG ก็อตมีเพื่อนที่ครอบคลุมหลากหลายกลุ่ม และสามารถทำได้ง่าย รวดเร็ว และเข้าถึงง่ายกว่าการทำ form (นึกภาพว่าถ้าเราร่อน google form ไปก็คงไม่มีใครตอบ 😂)
2. การออกแบบ Instagram Story ถามให้ชัดว่ากำลังถามใคร และอยากรู้อะไร โดยการไฮไลท์ที่ main point ของสตอรี่นั้นๆ
3. ใช้สีพื้นหลัง (A สีขาว/B สีดำ/C สีขาว) สลับกันเพื่อแยกความแตกต่างของแต่ละอัน ป้องกันคนกดข้ามเพราะคิดว่ามันเหมือนกัน และเน้นย้ำมากขึ้นโดยใช้สีที่อยู่ในแต่ละหัวข้อให้แตกต่างกัน (A สีชมพู/ B สีเขียว/ C สีม่วง)
4. จริงๆ ถาม A,B ก็เพียงพอแล้ว แต่การเพิ่มสตอรี่ C เข้ามาเพื่อเพิ่ม Engagement ผ่าน poll ที่ให้คนเลือก ซึ่งตาม algorithm ของไอจีแล้ว ยิ่งมีคนกด poll ในสตอรี่เยอะขนาดไหน ไอจีจะยิ่งดันสตอรี่เพื่อทำให้เพื่อนเราเห็นมากเท่านั้น

ซึ่งหลังจากที่ถามไปสักพักก็มีคนเข้ามาตอบสตอรีค่อนข้างเยอะเลยทีเดียว ทำให้เราได้เปิดมุมมองในหลายๆ อัน โดยเฉพาะสตอรี่ B ที่ถามถึงคนที่มาร่วมงานโดยเฉพาะ ว่าเค้ามี pain อะไรบ้าง ซึ่งนี่ก็คือ raw data ที่ได้มาจากการตอบ poll ทั้งบัณฑิตและผู้ที่มาร่วมงาน

หลังจากนั้นก็อตก็เริ่มเอาปัญหาที่มี เริ่มมาแบ่งตามหมวดหมู่ เริ่มเอามาผูกกับ user journey ว่ากว่าคนจะมาหาเรา เค้าจะเจออะไรบ้าง ในแต่ละ stage มีปัญหาอะไร แล้วอะไรบ้างที่เราสามารถช่วยพัฒนา experience เค้าให้ดีขึ้น จนกระทั่งได้มาเป็นข้อมูลด้านล่างนี่
ปล. ขอบอกไว้ก่อนว่าทั้งหมดนี้ก็อตเอามา visualize ให้ทุกคนเห็นภาพตอนก่อนที่จะเขียนบทความนี้นี่แหละ ตอนทำจริงๆ ทุกอย่างก็ประมวลผลในหัว ไม่ได้ถึงกับมานั่งเขียนแบบนี้ 555555

2. เข้าใจแล้ว ละแก้ปัญหายังไงดี (?)

ขอรวบรัดตัดตอน ก็อตแบ่งปัญหาออกได้เป็นสองพาร์ท โดยที่

• 💡 Part 1: เป็นเรื่องเกี่ยวกับการรับรู้ การประชาสัมพันธ์ การวางแผนข้อมูล ซึ่งถ้าสังเกตก็จะเป็นการทำเพื่อแก้ไขปัญหาที่เกิดขึ้นในช่วงก่อนวันงานหมดเลย
  🎯 Goal: ทำยังไงให้ผู้คนได้รับข้อมูลต่างๆ ได้ครบถ้วน ถูกต้องและอัปเดตล่าสุดอยู่เสมอ และสามารถจำได้ว่าเรามีงานวันไหน
• 💡 Part 2: เป็นเรื่องเกี่ยวกับการจัดการในวันงาน ซึ่งเอาจริงๆ ก็เป็นภาคต่อจาก Part 1 แหละ ถ้าเราวางแผนมาดี เราก็จะช่วยแบ่งเบาภาระได้ค่อนข้างเยอะ
  🎯 Goal: ทำยังไงให้คนมางาน มาหาเราเจอได้โดยอาศัยการโทรมาหาเราน้อยที่สุด และเจอเราโดยที่เค้าไม่ร้อน หาเราไม่ยาก

เริ่มกันที่ Part 1: ก่อนวันงาน

Key takeaways (Poster ซ้ายมือ):

1. ก็อตเริ่มปล่อยโปสเตอร์ผ่าน Facebook, IG ของตัวเอง โดยดีไซน์ให้เป็นเอกลักษณ์ ช่วยสร้างธีมและภาพจำเกี่ยวกับงานที่ก็อตกำลังจะพูดถึงได้ง่ายขึ้นในอนาคต
2. ตัวโปสเตอร์รูปเดียว บอกข้อมูลหลักครบ ไม่ว่าจะเป็น
   • วันงานที่ระบุไปเลยว่ามันคือวันอะไร จะได้ช่วยให้คนมางานไม่ต้องไปเดินปฏิทินเทียบดูว่าวันนั้นจะตรงกับวันหยุดไหม หรือตรงกับวันทำงานไหม
   • ระบุเวลาช่วงเวลาให้ชัดเจนว่ากี่โมงถึงกี่โมง ซึ่งดีกว่าการบอกว่า 13:00 เป็นต้นไป อาจสร้างความสับสนให้คนมางาน รวมถึงบัณฑิตได้
   • ระบุสถานที่ให้อ่านแล้วเข้าใจ จริงๆ คณะ ICT ของก็อตมีชื่อภาษาไทยด้วย ซึ่งแน่นอนว่าเวลาเค้าจะเอาไปหาใน Google เค้าก็ต้องเสิร์ชชื่อยาวๆ นั่น ซึ่งคงลำบากกว่าการเสิร์ชว่า ICT มหิดล อะไรแบบนี้
3. ให้ช้อยส์เค้าแล้ว อย่าลืมที่จะให้ suggest เค้าด้วย จะเห็นได้ว่าตรงวันที่ ก็อตมีเขียนไปตัวเล็กๆ ว่าแนะนำ แล้วชี้ไปที่วันที่ 8 เพื่อเป็นสิ่งที่ทำให้เค้าตัดสินใจได้ง่ายขึ้นว่าเค้าควรไปวันไหนดี
4. จริงๆถ้าดูรูปโปสเตอร์เต็มๆ ใหญ่ๆ จะเห็นเส้นสีขาวครึ่งวงกลมที่วาดตัดผ่าน QR Code ด้วยนะ จริงๆ ไม่ได้ใส่มาเพื่อความสวยงามอย่างเดียว แต่ทำขึ้นเพื่อสร้างจุดนำสายตาให้เค้ามาสนใจตัว QR Code ด้านล่างนี้
5. ตัว QR Code และ Link พาไปยังข้อมูลต่างๆ ที่จะช่วยประกอบการวางแผนการเดินทางและการตัดสินใจ (ที่กำลังจะพูดต่อจากนี้)

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

“คนที่มางานเรา เค้าไม่ควรจะเสียเวลาไปหาข้อมูลต่างๆ ด้วยตัวของเขาเอง เราในฐานะคนที่รู้จักสถานที่นี้ดี เราจึงต้องเป็นคนให้ข้อมูลกับพวกเขา”

จนสุดท้ายออกมาเป็น Notion ที่ให้ข้อมูลกับทุกคน
(ข้อมูลอาจจะตัวเล็กนิดนึงนะครับ ถ้าอยากดูเต็มๆ ดูได้ที่นี่)

Key takeaways:

1. เลือกใช้ Notion เพราะเป็น platform ที่สามารถจัด layout จัดข้อมูลให้อ่านได้ง่าย สามารถอัปเดตข้อมูลได้ทันที สามารถแชร์ผ่านลิงก์ได้
2. ใส่ Fun Fact ไปสักนิด เพื่อเป็น grab attention อย่างน้อยก็ช่วยสร้างบรรยากาศให้ไม่ได้รู้สึกว่าเป็นทางการเกินไป~
3. ใส่ Table of content ลงไปด้วย เพราะความต้องการของแต่ละคนมีไม่เหมือนกัน การพาทุกคนไปหาสิ่งที่ตัวเองต้องการได้เร็วที่สุด นั่นคือหัวใจสำคัญ
4. ระบุรายละเอียด เกี่ยวกับวัน/เวลาเพิ่มเติม ว่าวันไหนมีกิจกรรมอะไร แล้วข้อดีของการมาวันนั้น วันนี้คืออะไร และไม่ลืมที่จะใส่ว่าเราแนะนำวันไหน
5. มีปฏิทินให้คนมางานสามารถ Add to calendar เพื่อที่จะเป็นอีกทางที่จะช่วยเตือน เมื่อใกล้ถึงวันงาน
6. ใส่รูปสถานที่นัดหมายให้ชัดว่าหน้าตาเป็นยังไง เดินมาจากทางไหนแล้วจะเห็นอะไร เพื่อช่วยว่าวันจริง เค้าจะได้มีภาพอยู่ในหัว แล้วลดโอกาสหลง และแนบลิงก์ Google Map ไปด้วยเพื่อง่ายต่อการค้นหาต่อ
7. การเดินทาง ใส่ไปให้หมด เท่าที่จะมีทาง ทั้งรถส่วนตัว รถสาธารณะ เอารูปต่างๆ ที่มหาลัยทำไว้ มาแปะไว้อยู่ในที่เดียว เค้าจะได้ไม่ต้องไปหาเอง และแน่นอนว่าไม่ลืมที่จะแนะนำว่าช่องทางไหนดีที่สุดที่เราอยากแนะนำ
8. การเดินทางในมหาลัย ปกติจะหาข้อมูลยากมากอยู่แล้ว แต่พอเราในฐานะคนท้องที่แปะข้อมูลมาให้ จะทำให้สบายใจได้ประมาณนึงว่าสิ่งนี้มัน operate อยู่จริงๆ และจะทำให้เค้าเดินทางมาหาเราได้ง่ายและเร็วขึ้น
9. บอกให้ชัดเจนถึงของขวัญว่าอะไรเป็นสิ่งที่เราไม่ค่อยอยากได้ โดยพยายามใช้โทนให้ซอฟท์และนึกถึงใจของคนให้ได้มากที่สุด เช่น ลอง xx ดู ← เหมือนจะเป็นการปฏิเสธทางอ้อม พร้อมให้ option กับเค้าต่อ
10. อย่าลืมให้ข้อมูลการติดต่อ พร้อมทั้งระบุว่าเราอยากให้เค้าติดต่อมาทางช่องทางไหนเป็นช่องทางหลัก เพื่อง่ายในการสื่อสารและจัดงานในวันจริง
11. ข้อนี้ไม่มีอะไรแค่เป็นกิมมิกเพื่อปลุกเร้าบรรยากาศและแสดงถึงความตั้งใจว่าเราตั้งใจเจอพวกเค้าจริงๆ

นอกจาก calendar ที่เราทำลิงก์ให้คนกดเพิ่มไปปฏิทินแล้ว เราก็มีทำ reminder ในไอจีเพิ่มด้วย เป็นอีกหนึ่งฟีเจอร์ที่จะเข้าถึงคนได้ง่ายและรวดเร็วมากขึ้น โดยหลักการทำงานของมันคือ ถ้าใครกดรับการแจ้งเตือน event ไว้ มันจะช่วยเตือนก่อนล่วงหน้าวันนึง จะได้ทำให้เค้าไม่พลาดวันดีย์ๆ แบบนี้~

ต่อด้วยที่ Part 2: วันงาน

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

เอาเรื่องการตามหาบัณฑิตในวันจริงก่อน..
1–2 วันก่อนหน้า ก็อตได้โพสต์รูปๆ นึงเพื่อเป็นการทำความเข้าใจร่วมกันว่าวันจริง ก็อตจะสื่อสารกับทุกคนยังไงดี เพื่อที่จะทำให้คนที่มางานรับรู้ได้ว่าตอนนี้ก็อตอยู่ไหน และทำอะไรอยู่ โดยมีหน้าตาในรูปด้านล่างนี้

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

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

ส่วนเรื่องความหนาแน่นของคน สภาพอากาศ สถานที่
จริงๆ มอของก็อตก็งงๆ นะ จัดงานตรงกับวันธรรมดาหมดเลย (จ พ ศ) แถมวันรับจริงที่ตรงกับวันหยุดนักขัตฤกษ์ก็ไม่ให้ใครเข้าไปในมอ นอกจากบัณฑิตด้วย ทีนี้เลยเลยคิดว่าคงเป็นเรื่องลำบากที่ต้องรบกวนให้คนมางาน ถึงกับต้องลางานมาเลย

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

ทีนี้ก็เหลือแต่เรื่องสภาพอากาศและสถานที่แล้ว ว่าเราจะแก้ปัญหายังไงดี หลายคนเลยที่ตอบโพลเข้ามาแล้วบอกว่าร้อน ไม่มีที่นั่งรอ ต่างๆ นานา…

แต่ขอย้อนกลับไปตอบคำถามที่ว่า “ทำไมถึงนัดเพื่อนมาตอน 13:00–16:00 น. ด้วย ทำไมไม่นัดตอนเช้า ทำไมไม่นัดตั้งแต่เที่ยง”

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

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

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

3. สรุปแล้วที่เราทำ มันได้ผลเป็นยังไง เวิร์คไหม น่าเอาไปทำตามไหม

พาร์ทนี้ขอสรุปสั้นๆ เป็น bullet นะครับ~

• [Notion] มีคนกดเข้าไปดูข้อมูลที่ทำสรุปไว้ใน Notion ทั้งหมด 381 ครั้งเลย ซึ่งพีคที่สุดคือวันแรกที่ปล่อยโปสเตอร์ และมาพีคอีกครั้งตอนวันที่ 8 ซึ่งเป็นวันที่แนะนำให้มากันและก็เป็นวันที่คนมาเยอะที่สุด
• [Notion] มีเพื่อนๆ หลายคนทักมาเพื่อขอยืมลิงก์ Notion ของก็อตเพื่อที่จะเอาไปส่งให้เพื่อนคนอื่นบ้าง แสดงว่ามันมีประโยชน์จริงแหละ! ฮ่าๆ
• [IG] มีคนกดเข้ามาดูหน้าแอคเคาท์ในช่วงงานรับปริญญาเพิ่มขึ้น 118% เมื่อเทียบกับสัปดาห์ก่อนหน้า ซึ่งอาจจะกดเข้ามาดูลิงก์ Notion หรือดูข้อมูลที่อยู่ในไฮไลท์เป็นไปได้
• [IG] มีคนกดลิงก์ Notion ที่ทำไว้เพิ่มขึ้นจากสัปดาห์ก่อน 14.2%
• [การติดต่อ] มีคนโทรมาหาก็อตคิดเป็น 10% เท่านั้น ซึ่งส่งผลให้เราต้องถูก disrupt จากการถ่ายรูปกับเพื่อนคนอื่นรวมเพียงไม่ถึง 3 นาที ซึ่งเป็นตัวเลขที่น้อยมากๆ
• เสียดายที่ไม่ได้ทำ คือทำ satisfaction survey เพื่อดูผลว่าสรุปแล้วคนที่มางานเราเค้าแฮปปี้กันจริงๆไหม แต่เท่าที่ฟังมาก็ค่อนข้างโอเคนะครับ ยังไม่เจอใครบ่นหนักๆ ฮ่าๆ นึกถึงวันที่จบงาน ตัวเองกลับไปบ้านนอนสลบ เอาเวลาที่ไหนไปทำ :P

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

สุดท้ายจริงๆ อยากฝากคำๆ นึงเอาไว้เพราะมีเพื่อนคนนึงบอกให้รู้จักมา คือคำว่า “Cherish Relationships” ก็อตมั่นใจว่าคำๆ นี้น่าจะอธิบายตัวตนของเพื่อนๆ UX อีกหลายๆ คน ได้ดีเลยทีเดียว :D

ขอบคุณทุกคนมากๆ ที่อ่านมาถึงตรงนี้ หวังว่าจะได้มุมมองใหม่ๆ ไปบ้างแหละเนอะ ฮ่าๆ สำหรับวันนี้สวัสดีคร้าบบบบ ถ้าใครมีอะไร อยากติชม หรืออยากปรึกษา สามารถทักมาคุยกันได้ในไอจีนะครับ padagot (instagram.com/padagot) ได้เลยนะครับบ 👋

สวัสดีครับทุกคน ผมก็อต UX/UI Designer จาก LINE MAN Wongnai นะครับผม~ ห่างหายกันไปนาน แน่นอนว่าครั้งนี้ก็อตมีอะไรดี ๆ มาแบ่งปันให้กับเพื่อน ๆ อย่างแน่นอน

เรียกได้ว่าสดๆ ร้อนๆ กับโครงการคนละครึ่งเฟส 3 เพราะในที่สุดกระทรวงการคลังก็อนุมัติให้เชื่อมระบบกับ Food Delivery ได้อย่างเป็นทางการแล้ว

แต่การมาครั้งนี้ตามมาด้วยสิ่งที่ท้าทายในแง่การออกแบบ UX ให้ผู้ใช้ เพราะเป็นการเชื่อมต่อระหว่างแอปหลายตัว ทั้ง LINE MAN, Wongnai Merchant, เป๋าตัง, ถุงเงิน มีความซับซ้อนอยู่พอสมควร ทำอย่างไรจึงจะให้ผู้ใช้ง่ายที่สุด

บทความนี้ก็อตอยากมาเล่าถึง UX Challenge ที่เกิดขึ้นมาระหว่างการทำโครงการคนละครึ่งในครั้งนี้ โดยจะแบ่งหัวข้อเป็น 2 หัวข้อคือ

1. ขั้นตอนการสมัครของร้านค้าเข้าร่วมคนละครึ่ง ข้อจำกัดในการออกแบบ เมื่อ 1 ร้าน เลือก delivery platform ได้เพียงเจ้าเดียวเท่านั้น

2. ขั้นตอนการรับออเดอร์ของร้านค้า การออกแบบ user flow กับ stakeholders ทั้ง 3 และแอปทั้ง 4 จึงเกิดเป็นแนวคิด “ไฟจราจร” ให้ร้านค้าเข้าใจง่ายขึ้น

ก็อตขอเล่าในมุมมองของ UX/UI Designer ในทีมที่ดูแลแอป Wongnai Merchant App (WMA) ที่ที่พ่อค้าแม่ค้าใช้รับออเดอร์จาก LINE MAN และจัดการร้านอาหารให้กับลูกค้านั่นเอง

ถ้าพร้อมแล้ว เตรียมป็อปคอร์น แล้วไปเริ่มกันได้เลยครับ

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

1. การสมัครของร้านค้าเข้าร่วมคนละครึ่ง เมื่อ 1 ร้าน เลือก delivery platform ได้เพียงเจ้าเดียวเท่านั้น!

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

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

วันแรกที่ร้านสมัครถือเป็นการชี้ชะตาของแพลตฟอร์มหลังจากนั้นเลย สำคัญถึงขั้นที่พี่ยอด CEO เรียกวันที่ 24 ก.ย. (วันแรกที่ร้านสมัครเข้าโครงการได้) ว่าเปรียบเสมือน “วันเลือกตั้ง” เลยทีเดียว

ขั้นตอนการสมัคร ร้านค้าจะไม่สามารถกดปุ่มสมัครแบบตรง ๆ ได้ กระบวนการสมัครคือร้านค้าจะต้องมี “รหัสร้านค้า” ของแพลตฟอร์มที่ต้องการผูก และเลขประจำตัวผู้เสียภาษี (TAX ID) โดยต้องเป็นเลขเดียวกับที่ลงทะเบียนไว้ในแอปถุงเงินด้วย

เมื่อถึงวันที่เปิดรับสมัคร พ่อค้าแม่ค้าต้องเอารหัสร้านค้าที่ได้มาจากแพลตฟอร์ม ไปกรอกที่แอปถุงเงินเพื่อยืนยันว่าเป็นร้านเดียวกัน จากนั้นต้องรอถุงเงินตอบกลับว่าการสมัครเสร็จสมบูรณ์

ความยากของเรื่องนี้คือ ร้านค้าต้องหาข้อมูลรหัสร้านค้าจากแอปต้นทาง (ในที่นี้คือ Wongnai Merchant App) เพื่อไปกรอกในแอปถุงเงินเพื่อสมัครเข้าร่วมโครงการ โดยข้อมูลรหัสร้านค้าและเลขประจำตัวผู้เสียภาษีจะต้องตรงกันด้วยถึงจะลงทะเบียนสำเร็จ

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

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

เริ่มจากการสร้างทางเข้าถ้ำที่เข้าใจง่าย ที่ไม่ใช่ง่ายเฉพาะผู้ใช้ แต่ต้องง่ายต่อการสื่อสารด้วย

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

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

เพราะถ้ำมันลึก เลยต้องแจกแผนที่ไปพร้อมกับไฟฉาย

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

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

ก็อตเลยพยายามย่อยขั้นตอนวิธีการสมัครให้เข้าใจได้ง่าย ไม่ว่าใครมาเปิดอ่าน ต้องสามารถทำตามได้เลย

หน้าจอการสมัครจึงรวม “วิธีทำ” และ “สิ่งที่ต้องทำ” อยู่ในหน้าเดียวกัน ในแต่ละขั้นตอนมี checkpoint หรือ action ที่ต้องทำแตกต่างกัน ทำให้ผู้ใช้ไม่ต้องกังวลว่าของที่ตามหาอยู่ที่ไหน ไม่ต้องเปิดสลับหน้าแอปไป ๆ มา ๆ ซึ่งอาจทำให้ conversion rate ลดลง อัตราการสมัครสำเร็จต่ำลงอีกด้วยครับ

รายละเอียดการออกแบบหน้าจอสอนร้านค้าให้รู้ถึงวิธีการลงทะเบียนคนละครึ่ง มี 3 ขั้นตอน ได้แก่

เริ่มตั้งแต่

— [1 เช็ค TAX ID] ขั้นตอนแรกที่ร้านจะต้องเช็คเลข TAX ID ของตัวเองว่าตรงกับที่กรอกไว้ในแอปถุงเงิน ถ้าไม่ตรงก็ต้องไปแก้ ซึ่งจะมี process เพิ่มเข้ามาอีก (ตรงนี้ขอไม่ลงรายละเอียดนะครับ) แน่นอนว่าเราต้องไม่ลืมบอกทาง (ที่อยู่นอกเหนือจากแอป WMA) ให้ร้านรู้ว่าจะต้องเดินไปทางไหน จุดนี้คือวิธีการหาเลข TAX ID ของถุงเงิน

— [2 คัดลอกรหัสร้านค้า] ต่อไปก็ทำขั้นตอนที่สองคือ คัดลอกรหัสร้านค้าจาก WMA เพื่อเอาไปใส่ในแอปถุงเงินในวันที่สมัคร

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

— [3 สมัครบนถุงเงิน] ขั้นตอนสุดท้ายเรียกว่าจับมือทำได้เลย เมื่อร้านสลับเข้าไปในแอปถุงเงินแล้ว ต้องบอกร้านว่าต้องทำยังไงต่อบ้าง เราเลยสรุปออกมาเป็น bullet point เพื่อให้อ่านง่าย เข้าใจไม่ผิด และทำให้การสมัครนั้นเสร็จสมบูรณ์ครับผม

เมื่อสภาพแวดล้อมอำนวย เส้นชัยก็อยู่แค่เอื้อม

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

จากข้อมูลข่าวของกระทรวงการคลังประกาศไว้ 1 อาทิตย์หลังจากเปิดรับสมัคร ว่ามีร้านค้าสมัครเข้ามาทั้งสิ้น 54,000 ราย ในจำนวนนี้เป็นร้านที่เลือกลงทะเบียนกับ LINE MAN Wongnai มากถึง 42,000 ราย ทำให้ LINE MAN ขึ้นแท่นเป็นแพลตฟอร์มฟู้ดเดลิเวอรีอันดับ 1 ที่มีร้านค้าที่เข้าร่วมโครงการคนละครึ่งมากที่สุด คิดเป็น 77.78 % จากจำนวนทั้งหมด ตามเส้นชัยที่เราได้วางไว้ตั้งแต่ต้น!

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

แต่ ๆ ยังไม่จบ นี่มันแค่เริ่มต้น ขั้นตอนการสมัครร้านจบลง ขั้นต่อไปคือเตรียมความพร้อมในการรับออเดอร์ แน่นอนว่าโหดไม่แพ้กันแน่นอน..

2. การรับออเดอร์ของร้านค้า การออกแบบ User Flow กับ Stakeholders ทั้ง 3 และแอปทั้ง 4 เกิดเป็นไฟจราจรให้ร้านค้า

คนอ่านเริ่มงง เมื่อกี้พาเข้าถ้ำ มาตอนนี้เจอไฟแดงเฉย (ฮา)

ในหัวข้อที่ 2 จะพาทุกคนไปดูแนวคิดการออกแบบ UX ในการรับออเดอร์ที่มีหลายขั้นตอน โดยเราจะโฟกัสกับ user ที่เป็นร้านค้าเป็นหลักนะครับ

ในขั้นตอนรับออเดอร์มีผู้เกี่ยวข้อง (stakeholders) ทั้งหมด 3 กลุ่ม ตั้งแต่ ลูกค้า (ที่ใช้แอป LINE MAN) ร้านค้า (ที่ใช้แอป Wongnai Merchant App — WMA) และสุดท้ายคือธนาคารกรุงไทย ที่ส่งแอปเป๋าตังและแอปถุงเงิน มาให้ลูกค้าและร้านค้าเพื่อใช้สำหรับโครงการรัฐฯ

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

Flow การรับออเดอร์ต้องเริ่มมาจาก (ดูภาพประกอบด้านล่าง)

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

จาก flow ข้างบน สังเกตได้ว่าร้านอาหารเป็นตัวกลางที่สำคัญมาก ๆ ในการรับส่งสถานะของออเดอร์กับลูกค้า ร้านจะต้องพบเจอกับ state อีกทั้งหมด 3 states หลังจากกดรับออเดอร์ในแอป WMA นั่นคือ

1. สถานะให้ร้านรอลูกค้าจ่ายตัง
2. สถานะรอยืนยันคำสั่งซื้อในถุงเงิน
3. สถานะให้เริ่มทำอาหารได้

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

ดังนั้นทีม UX จึงต้องพยายามออกแบบ flow ให้ลดข้อผิดพลาดตรงนี้ลงมากที่สุด

ในฐานะ UX/UI Designer จึงพยายามจัดขั้นตอนทั้ง 3 states ให้เข้าใจได้ง่ายที่สุด เป็นที่น่าจดจำมากที่สุด จนเกิดเป็น concept ไฟจราจร 🚦 ที่เอาความสามารถในการรับรู้ภาพและสีของมนุษย์ มาแปลงและแมพเข้ากับสิ่งที่คนคุ้นเคยและได้สัมผัสอยู่ในชีวิตประจำวัน

เริ่มตั้งแต่ไฟสีเหลือง (แถบสีเหลือง) เป็นแถบที่แสดงว่าคุณต้องรอ! รอให้ลูกค้าชำระเงินให้เสร็จเรียบร้อย แล้วถึงจะดำเนินการต่อ

ตรงนี้จะเห็นว่าเรายังใส่ปุ่มโทรหาลูกค้า เป็น Call to Action ให้อีกด้วย ทั้งที่แถบด้านบนก็มีปุ่มสีส้มให้โทรหาลูกค้าอยู่แล้ว เหตุผลคือเพื่อ remind ร้านค้าว่าหากรอลูกค้าชำระเงินนานเกินไป คุณสามารถโทรหาลูกค้าได้จากปุ่มนี้ได้เลยนะ

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

Call to Action ในขั้นตอนนี้คือแจ้งให้ร้านค้าไปกดยืนยันคำสั่งซื้อในแอปถุงเงินอีกครั้ง แต่เนื่องจากติดข้อจำกัดทางเทคนิคบางประการ เลยไม่สามารถพาร้านไปเข้ายังแอปถุงเงินตรง ๆ ได้ ต้องใช้วิธีเขียนบอกแทน (จุดนี้หากในอนาคตมีการพัฒนาเพิ่มปุ่ม CTA ไปยังถุงเงินได้ จะทำให้ flow ของการรับออเดอร์ลื่นไหลและ ไร้รอยต่อมากยิ่งขึ้นครับ)

ขั้นสุดท้าย คือไฟสีเขียว (แถบสีเขียว) แสดงถึงความพร้อมเพื่อที่จะทำอะไรบางอย่าง หมายความว่าพ่อค้าแม่ค้าสามารถเริ่มทำอาหารได้แล้ว เป็นอันว่าขั้นตอนการรับเงินจ่ายเงินก็เสร็จสิ้นเป็นที่เรียบร้อย~

ผลลัพธ์ของการมีอยู่ของไฟจราจร..

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

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

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

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

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

ก็อตเชื่อว่าสิ่งที่เราตั้งใจคิด ตั้งใจทำ ถ้าเราสร้างมันด้วยเหตุผลและผล สร้างมันภายใต้หมวกที่เรียกว่า user มันจะไม่มีทางที่ทำให้ user หลงถ้ำอย่างแน่นอน 😄~

สุดท้ายขอขายของนิดนึงงง ถ้าใครสนใจอยากมาร่วมทีม UX/UI กับพวกเรา มาร่วมพัฒนา products ที่ impact ระดับประเทศ ที่มี mission คือการช่วยให้คนไทยมีชีวิตที่ดีขึ้น สามารถสมัครเข้ามาได้นะครับ ตอนนี้กำลังเปิดรับอยู่เลย ดูรายละเอียดเพิ่มเติมที่นี่ หรือถ้าใครอยากรู้ว่าที่นี่มี culture ยังไง คลิกดูที่ลิงก์นี้ได้เช่นกันครับ

ไว้เจอกันครั้งหน้า ถ้ามีโอกาสก็อตจะมาแชร์ประสบการณ์แบบนี้บ่อย ๆ ฮะ กดตุ่ม follow ก็อต (Medium/IG@padagot) ไว้ได้ จะได้ไม่พลาดบทความดีย์ ดีย์ แบบนี้อีก ฮ่าๆ สำหรับวันนี้ขอบคุณผู้อ่านทุก ๆ คนมาก ๆ คร้าบบ อย่าลืมแชร์ไปให้เพื่อน ๆ ด้วยน้าา บ้ายบายย

เปิดการเดินทางของ UX กับอุปสรรคคนละครึ่งที่ต้องฝ่าฟันเพือร้านค้าบน LINE MAN was originally published in Life@LINE MAN Wongnai on Medium, where people are continuing the conversation by highlighting and responding to this story.

สวัสดีครับทุกคน ผมก็อตนะครับ 👋 UX/UI Designer จาก LINE MAN Wongnai บทความนี้อยากจะพาทุกคนไปรู้จักกับ Tool ตัวใหม่ ที่มีชื่อว่า maze ที่ก็อตเพิ่งเจอโดยบังเอิญ ซึ่ง tool ตัวนี้จะมาช่วยอำนวยความสะดวกกับ UXers ทุกคน ให้มีชีวิตที่ดีขึ้นในการทำ Usability Testing ไม่ว่าจะเป็นแบบ online หรือว่า offline ก็ตาม~

ก่อนไปรู้จักกับ tool ตัวนั้น เรามาลองลิสต์อุปสรรคต่าง ๆ ว่าปัญหาที่พวกเราเจอเวลาจะออกไปทำ usability testing กันแต่ละที มีอะไรบ้าง สำหรับก็อตนะครับ ก็..

• คิด tasks คิดคำถาม คิดวิธีการวัดผล ดูพฤติกรรม user ฟังฟีดแบค จับเวลา จดคำตอบ user ทั้งหมดนี้ เราต้องพยายามเก็บให้ครบ เพื่อให้ได้ insight ที่เยอะและตรงกับความต้องการที่สุด!
• แต่ละอย่างที่อยู่ข้างบน ใช้ tool ต่างอันกัน เยอะแยะไปหมด เวลาคุยกับ users แค่แบ่งสมองไปให้แต่ละอย่าง ram ในหัวก็หมดแล้ว แถมถ้ายิ่งทำสิ่งต่าง ๆ ด้วยตัวคนเดียว ก็อาจจะทำได้แค่บางอย่างเท่านั้น
• บางทีข้อมูลที่ได้มา ขาด ๆ เกิน ๆ บางคนได้ส่วนนึง ขาดส่วนสำคัญไป หรือข้อมูลไม่ได้ถูกจัดออกมาให้อ่านได้ง่าย ๆ สุดท้ายก็น่าเสียดายที่ต้องบอกลาข้อมูลชุดนั้นไป

เอาเป็นว่าอุปสรรคหลาย ๆ น่าจะมี UXers อีกหลายคนบนโลกของเรากำลังประสบอยู่เหมือนกัน มันก็ (น่าจะ) เป็นที่มาของ tool นี้นั้นเอง!

1. ทำความรู้จัก maze.co ลื่นไหลเหมือนไฟลุก ~

maze.co คือเครื่องมือที่มาช่วยแก้ปัญหาต่าง ๆ จากการทำ usability testing ให้มันมี flow ที่ดีมากขึ้น แบ่งออกเป็น task ที่ให้ user ทำไปด้วยกันได้อย่างชัดเจน มีแทรกคำถามประเภทต่าง ๆ ได้ และที่สำคัญคือ interaction ทุกอย่างที่ users ทำ จะถูกบันทึกไว้ ไม่ว่าจะเป็นเวลาที่ทำในแต่ละ task, อัตราที่ user ทำ test สำเร็จ, heatmap และอีกมากมาย แบบที่ว่าเราไม่ต้องมาคอยทำเองแบบ manual อีกต่อไป ซึ่งมันจะออกมาในรูปแบบคล้าย ๆ กับ Form + Prototype เลยครับ

ก่อนที่จะเริ่มนั้น maze สามารถดึง prototype ของเราจากที่เราทำในแพลตฟอร์มต่างๆ ได้ ไม่ว่าจะเป็น Adobe Xd, Figma, Invision, Sketch โดยการใส่ link ของ prototype เรา

2. เริ่มต้นด้วยการวางแผนและการจัดการการทดสอบ

หลังจากนั้นเจ้า maze ก็จะพาทุกคนไปที่หน้าหลักที่เราจะจัดการกับ usability testing ในครั้งนี้ ซึ่งทุกคนลองนึกภาพว่าตอนที่เราทำ usability testing จริง ๆ เรามักจะมีวิธีการทดสอบหลากหลายแบบใช่มั้ยครับ นอกจากจะให้ user ทำตาม task ที่เราบอกแล้ว ยังมีคำถามที่เราจะต้องเก็บจาก user อีก เช่น คะแนนความพึงพอใจ ฟีดแบ็ค คำถามเชิงปลายเปิดต่าง ๆ ซึ่ง maze เตรียมไว้ให้ทุกคนพร้อมแล้ว~

Actions ที่เราจะสามารถทำได้ใน flow usability testing ในครั้งนี้ ประกอบไปด้วยวิธีต่าง ๆ ซึ่งหลัก ๆ ก็จะมี

• Mission — การสร้าง task ให้ user ทำ โดยอ้างอิงจาก prototype ที่เรามี
• Yes/No — ถามคำถามที่ตอบได้ว่าใช่กับไม่ใช่
• Opinion Scale — การวัดความเห็นจาก user เช่นระดับความพึงพอใจ การให้ดาว
• Multiple Choice — คำถามที่ user สามารถเลือกตอบได้หลายคำตอบ
• Open Question — เป็นคำถามที่เราอยากฟังคำตอบจาก user โดยเฉพาะคำถามที่ขึ้นด้วย why?
• อื่น ๆ อีกมากมาย

ซึ่งอยากให้ทุกคนได้ดูในรูปแบบการเทสแบบ Mission เพราะคิดว่าน่าจะเป็นพระเอกในเรื่องนี้ และวิธีการสร้าง mission ทำได้ง่ายมาก ๆ

หลังจากที่เรา import prototype มา เราจะเจอภาพ prototype ด้านขวา ซึ่งเราจะสามารถคลิกตามที่เราได้วาง flow ไว้ตั้งแต่แรก จนไปถึงจุดสิ้นสุดของ task นั้น ๆ มีที่ให้ใส่ title ของ task ว่าเป็น task เกี่ยวกับอะไร ใส่คำอธิบายเพิ่มเติมว่าจะให้ user ทำอะไร ซึ่งตรงนี้คิดว่าค่อนข้างมีประโยชน์มาก ๆ ตอนเราทำ testing เพราะ user จะรู้เสมอว่าเขาจะต้องทำอะไร และมีรายละเอียดอะไร โดยที่เขาไม่จำเป็นต้องมาถามเราหลาย ๆ รอบ (หรือบางคนก็ไม่สนใจ detail เลย) ซึ่งพอทั้งสองมันวางคู่กัน ทำให้ตัวคนสัมภาษณ์ จะโฟกัสกับ task และรายละเอียดที่ต้องทำ ก็คิดว่าน่าจะทำให้ได้ผลออกมาตรงกับความต้องการมากขึ้น ส่วนหน้าตาที่ user เห็น ก็จะหน้าตาเหมือนกับรูปทางขวามือครับ

หลังจากที่ user ทำ task แต่ละ task เสร็จ ปกติแล้วก็จะมีคำถามมาถาม user เกี่ยวกับความพึงพอใจต่าง ๆ ซึ่งทาง maze ก็ทำออกมาได้เป็นอย่างดีเลยครับ เพราะเราสามารถเลือก labels ได้เอง ระดับความต้องการ หรือแม้กระทั่ง รูปแบบของสเกลวัดครับผม

ซึ่งแต่ละอันก็มีรายละเอียดที่แตกต่างกัน ไว้ถ้าทุกคนพอมีเวลา ลองเข้าไปแล้วลองเล่นดูนะฮะ ~

สมมติว่าเราทำ usability flow ของเราครบหมดแล้ว พร้อมที่จะไปทดลองกับ user ได้แล้ว ตัว maze ก็ทำให้เราสามารถส่งเจ้าเทสตัวนี้ ผ่านไปเป็น link แบบไม่ต้องติดตั้งโปรแกรมใด ๆ เพิ่มเติม ซึ่งทุกคนสามารถเข้าไปลองเล่นตัวเดโม่ของก็อตได้จาก link นี้เลย (https://t.maze.co/40535931) แต่บอกก่อนว่า flow อันนี้ทำมาเพื่อทดสอบและรีวิวให้กับทุกคนเท่านั้น ไม่ได้เอาไปใช้งานจริงแต่อย่างใดนะครับ ;)

หรือจริง ๆ ถ้าสมมติเราหา pool ของ user ที่จะมาเทสด้วยกันไม่ได้ ตัว maze ก็มีฟีเจอร์ที่จ้างให้เค้าไปหาคนมาทำเทสให้ โดยที่เราจะสามารถกำหนดจำนวนคนที่ต้องการ เพศ อายุ และภาษา ซึ่งฟีเจอร์นี้ก็ต้องเสียตังค์เพื่อแลกกับความสะดวกสบายที่มีมากขึ้นฮะ

3. ส่งออกง่ายเป็นรายงาน

มาถึง part สำคัญ จากที่ผมได้ขายของไปสะเยอะในตั้งแต่ตอนแรกเกี่ยวกับการทำ report ว่า maze ทำออกมาได้เป็นที่น่าประทับใจสุด ๆ สามารถเก็บรายละเอียดตามที่เราต้องการได้อย่างครบครั้น

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

ซึ่งมันสามารถแบ่งออกได้ทั้งดูสรุปผลแบบทั้งหมดหรือจะดูผลรายคนก็ยังได้ ซึ่งภาพรวมก็จะประกอบไปด้วยจำนวน tester ทั้งหมด อัตราการคลิกพลาด ระยะเวลาเฉลี่ย % ที่ user ทำ task สำเร็จ เป็นต้น

การจะทำให้ report ออกมาตรง ต้องอาศัยความถูกต้องของ flow ใน prototype หากใน prototype ของเรางงๆ ก็อาจจะทำให้ user สามารถบังเอิญทำได้ แต่ไม่ได้ตรงกับ path ที่เราต้องการ และอาจทำให้สถิติของเราผิดเพี้ยนไปนั่นเอง (เหมือนกับตัวอย่างข้างล่างนี้ แหะๆ)

แล้วก็สุดท้ายอีกหนึ่งฟีเจอร์ใน report ที่ก็อตชอบมาก ๆ คือการที่เราสามารถดู heatmap ได้ว่า user กดอะไรตรงไหนบ้าง นับว่าเป็นอีกหนึ่งสิ่งที่คิดว่าหลาย ๆ คนน่าจะชอบ เพราะตัว heatmap นี้จะเป็นตัวยืนยันว่าสิ่งที่เราทำมา มันเป็นไปตามที่เราอยากให้ user ทำจริง ๆ ไหม นับเป็นอีกก้าวของการทำ usability testing ที่เราจะสามารถรับรู้ insight ได้ลึกขึ้นตั้งแต่อยู่ในขั้นของ prototype เลยครับ :D

สุดท้ายอยากจะสรุปภาพรวมกันอีกนิด พร้อมข้อแนะนำที่ควรทำก่อนที่จะมาใช้ tool ตัวนี้

• อย่างแรกเลยคือ flow ใน prototype ของทุกคนต้องเคลียร์ โดยเฉพาะอันที่เป็น action พวก bullet ต่าง ๆ เพราะอาจจะทำให้ตัว maze งงว่า user นั้นมี intention อะไร แล้วบางทีมันอาจจะตีความว่า user บังเอิญทำสำเร็จ เหมือนที่ก็อตโชว์ไปข้างบนครับ ทางที่ดีคือการ duplicate หน้านั้น แล้วเติม bullet นั้นลงไป คิดว่าน่าจะช่วยแก้ปัญหาได้ประมาณนึงครับผม
• แนะนำให้ลองเล่น demo ในเว็บ maze.co ก่อนใช้งาน เพราะจะทำให้เราเข้าใจถึงภาพรวมมากยิ่งขึ้น ลำพังอ่านแค่ blog นี้ อาจจะเห็นเป็นแค่ภาพนิ่ง ถ้าได้ลองเล่นจริง จะทำให้ทุกคนตื่นเต้นมากขึ้นฮะ หรือจะเล่นของก็อตก็ได้ แต่ทำมารีวิวแค่สอง tasks เองครับ (https://t.maze.co/40535931)
• อย่างน้อยๆ เราก็ไม่ต้องมาพะวงกับการเก็บข้อมูลแล้ว เพราะฉะนั้นขอให้ทุกคนมีความสุขกับเวลาที่ได้คุยกับ user ที่เยอะขึ้นนะครับผม ~
• ข้อดีข้อการที่เรามี tasks ที่ user ต้องทำ แล้วก็มี prototype ที่วางควบคู่ไปด้วยกัน เลยทำให้การทดสอบครั้งต่อ ๆ ไปเราสามารถทำได้ในจำนวนที่มากขึ้น เพราะเราสามารถส่งเพียงแค่ลิ้งค์ไปให้ user โดยที่เราไม่จำเป็นต้องไปนั่งประกบตัวต่อตัวอีกด้วยครับ

นั่นก็คือทั้งหมดของ tool ตัวใหม่ที่มีชื่อว่า maze ที่ก็อตภูมิใจนำเสนอให้กับทุกคนในคราวนี้ หวังว่า tool ตัวนี้จะช่วยให้คุณภาพชีวิตของเหล่า UXers ดีขึ้น มีความสุขกับการทำเทสกับ user มากขึ้น ไว้คราวหน้าก็อตไปเล่น tool ไหนแล้วถูกใจจะมารีวิวให้กับทุกคนได้ลองกัน กดตุ่ม follow ใน Medium ไว้ได้เล้ย~

ขอเป็น UX ตัวเล็ก ๆ ที่จะช่วยเติมเต็มประสบการณ์การทำงานของ UX ด้วยกันเอง ให้ดีไปอีกขั้นนึงนะครับ ไว้เจอกันฮะ

ใครมีอะไรอยากแลกเปลี่ยน หรืออยากจะแนะนำอะไร สามารถมาคุยกันได้ที่ Facebook, Instagram หรือ LinkedIn ได้นะครับผม ยินดีที่ได้รู้จักทุกคนล่วงหน้า และหวังว่าจะชอบบทความนี้นะคร้าบบบ บ้ายบายยยยย 👋

สวัสดีครับทุกคนผมก็อตนะครับ เป็น UX/UI Designer (Incoming at LINE MAN Wongnai) ครับผม จริง ๆ เห็น Figma ออก Tool ตัวใหม่มา พอดีกับมีแก๊ปเวลาว่างประมาณ 3 ชั่วโมง นั่นก็เลยเป็นที่มาของบทความนี้ที่อยากจะมาสรุปฟีเจอร์ FigJam ให้กับทุกคนได้อ่านกัน~ เดี๋ยวช่วงท้ายมีลิ้งค์ไฟล์ FigJam ให้เล่นกันด้วยนะครับ เข้าไปทักทายกันได้ ฮ่า ๆ ถ้าอย่างนั้นก็ไปต่อกันได้เลยคร้าบบ 🎉

ก่อนจะไปดูฟีเจอร์เจ้า FigJam กัน อยากจะพาลองนึกกลับไปเมื่อท้ายปี 2020 ที่มีการจัด The 2020 Designer’s Toolkit กัน แล้วภาพก็ปรากฏแบบนี้

จะเห็นได้ว่า Figma ได้รับตำแหน่งขวัญใจมหาชนจากหลากหลายแขนงใน Product Design แต่มีเพียงในส่วนของ Brainstorming และ User Testing เท่านั้นที่ทำให้ Figma ไม่สามารถเป็นแชมป์ได้อย่างเต็มภาคภูมิ ฮ่า ๆ

ซึ่งนั่นก็คงเป็นที่มาของเจ้าตัว FigJam ที่จะออกมาเพื่อต่อกรกับเจ้าพ่อ Real-time online Whiteboard อย่าง Miro นั่นเอง

มาเข้าเรื่องกันดีกว่า จริง ๆ ต้องออกตัวก่อนว่าผมก็ยังไม่ได้ลองใช้เจ้าตัว FigJam แบบจริง ๆ จัง ๆ เนื่องจากเพิ่งปล่อยออกมา แต่วันนี้อยากจะมาสรุปฟีเจอร์เด่น ๆ ว่ามีอะไรบ้าง หรือดีกว่าของเก่าอย่าง Miro ยังไง แต่เท่าที่ลองใช้เพื่อทำรูป Thumbnail มาก็พบว่าเป็นอีกหนึ่ง tool ที่น่าสนใจและจะทำให้การ collaborate มีชีวิตขึ้นมาอีกเท่าตัว!

[1] วาดได้.. สบายมาก!

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

โดยปากกาเมจิที่ FigJam ให้มามีขนาดเล็กและขนาดใหญ่ และมีสีให้เลือกทั้งหมด 8 สีตามรูปภาพ ซึ่งมองกันตาม use case จริง ๆ จากคนที่เคยใช้ Miro มาเนื่องจาก Miro มีขนาดปากกาให้เลือกค่อนข้างเยอะ เวลาที่เขียนก็จะเกิดปัญหาขนาดไม่ตรงกันบ้าง ซึ่งมันทำให้ภาพรวมของงานดูไม่เรียบร้อย พอมีมาให้แค่สอง ก็มองปั๊ปรู้เลยว่าคนอื่นใช้ขนาดเล็กหรือใหญ่ ตอนใช้จะเป็นไปในทางเดียวกันและดูเรียบร้อยมากขึ้น

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

❗️แต่พอขึ้นชื่อว่าปากกา การที่จะมาเขียนบนเมาท์หรือแทรคแพดก็ดูเป็นอะไรที่ยากลำบากอยู่พอสมควร แถมตอนนี้บนเว็บของ Figma บน iPad ก็ยังไม่ได้รองรับการเขียนด้วย Apple Pencil ด้วยสิ ตรงนี้ก็เลยแพ้ Miro ไปแบบน่าเสียดาย

แต่ผมก็พอจะมีทางที่จะเขียนบน iPad ได้ แล้วก็ทำออกมาได้ดีด้วย นั่นก็คือการเปิด FigJam บน Macbook แล้วต่อ Sidecar ไปยัง iPad เพียงเท่านี้ก็สามารถใช้ Apple Pencil เขียน Figjam บน iPad ของเราได้และง่ายขึ้นมากกก คุณภาพชีวิตดีขึ้นอีก 1

❗️ข้อเสียอีกอย่างคือเวอร์ชันนี้ยังไม่มียางลบ เวลาที่เขียนแล้วต้องการลบมีเพียงสองวิธี คือ 1)กด ⌘ + Z เพื่อ undo ไป หรือไม่ก็ 2) เลือกรูปแบบเมาท์เป็น cursor แล้วก็ลากแล้วก็กด delete ซึ่งอาจจะต้องใช้หลายขั้นตอนหน่อย ลองใช้ไปคิดว่าน่าจะชินไปเอง~

[2] แปะ แปะ แปะ ไม่ใช่เสียงปรบมือ แต่เป็นโพสต์อิทและสติกเกอร์!

อุปกรณ์ขั้นพื้นฐานในการระดมไอเดียนั่นก็คือโพสต์อิทนั่นเอง ซึ่งแน่นอนว่าทาง FigJam ก็จัดมาให้แบบเต็มสตรีม ไม่ว่าจะเป็น

• รูปทรงเรขาคณิต ที่มีมาให้มากถึง 8 แบบ สามารถปรับแต่ง Outline/Fill รวมถึงใส่ Text ก็ได้เช่นกัน
• โพสต์อิท ที่มีมากมายหลากหลายสี มาพร้อมกับการใส่ข้อความหรือ Bullet Point และปรับขนาดและรูปแบบของตัวอักษรได้

นอกจากตัวรูปทรงเรขาคณิตและโพสต์อิทแล้ว FigJam ยังเพิ่มสติกเกอร์มาให้เราให้ใช้กันเยอะและหลากหลายรุปแบบมากกก

แต่ ๆ ไฮไลท์ของการแปะสติกเกอร์ไม่ได้อยู่แค่นี้ ก็ด้วยความที่ FigJam เป็นของ Figma อ่ะเนอะ ก็เลยเอาความสามารถของ Figma มาใช้นิดหน่อย นั่นก็คือเราสามารถแปลง Component ใน Design System มาเป็นสติ๊กเกอร์ได้! บริษัทไหนมีมาสคอต ได้เห็นกันเช้ายันเย็นแน่ ๆ เลยฮะ ฮ่า ๆ 👀

[3] พิมพ์ Text เขียน Flow แปะรูป ชิลมาก!

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

ต่อมาการวาด Flow ใน FigJam ก็ดูกลายเป็นเรื่องง่าย ๆ แค่ลากต่อ ลากต่อจบ มันทำให้การทำ User Jouney หรือ Flow Chart ง่ายขึ้นเยอะมาก ๆ และผมเชื่อว่าอีกไม่นานคนก็จะมาวาด Flow กันในนี้เพราะถ้า Flow พื้นฐาน ตัว FigJam สะดวกกว่า Lucidchart, draw.io ค่อนข้างมาก และที่สำคัญ สวยด้วยครับ~

ซึ่งการโยง Flow ใน FigJam สามารถปรับได้หลากหลายรูปแบบผสมผสานได้แก่

• การปรับสี, ขนาดของเส้น
• การเพิ่มตัวอักษรบนเส้น
• การเพิ่มรูปแบบหัวลูกศรทั้งต้นและปลาย
• รูปแบบการหักเลี้ยวของเส้น เป็นแบบโค้งสี่เหลี่ยม หรือโยงแบบระยะกระจัด

อีกอันในหัวข้อที่สามนั่นก็คือการแปะรูป ที่ใส่มาให้ เผื่อตอนเรา Brainstorming จะมีแปะรูปภาพบรรยากาศการสัมภาษณ์ users ก็สามารถทำได้ง่าย ๆ ผ่าน icon แกลอรี่ล่างขวาได้เลย หลังจากที่เราเลือกรูปภาพเสร็จก็มีเมนูให้เลือกอยู่สองอัน นั่นก็คือ Replace รูป และ Crop รูปในรูปแบบต่าง ๆ ไม่ว่าจะเป็นซูมเข้าออก จัตุรัส วงกลม ผืนผ้าแนวตั้งแนวนอน ได้หมด!

[4] การทำ Tool ที่ดีไม่ใช่ “แค่ทำได้” แต่ต้องทำได้ดี สนุกและมีชีวิต!

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

ต่อมาสิ่งที่จะทำให้การ Brainstorm ของเรามีสีสันมากขึ้นเหมือนราวมีเพื่อนร่วมงานมานั่งข้าง ๆ นั่นก็คือตัว Chat Cursor และ Emote นั่นเอง โดยที่ตัว Cursor ของเราจะทำหน้าที่เป็นเหมือนการแชท ที่เราสามารถพิมพ์โต้ตอบกับเพื่อนได้แบบเรียลไทม์แบบที่ไม่ต้องพิมพ์ลงบนงานเหมือนที่พวกเราทำกันมา 🤣 (จริง ๆ ทีม Figma อาจจะแอบดูพวกเราอยู่เลยสร้างสิ่งนี้ขึ้นมา ฮ่า ๆ)

สำหรับอย่างสุดท้ายนั่นก็คือ Emote ที่แสดงหน้าที่เป็น Emoji Reaction แบบเรียลไทม์นั่นเอง ยิ่งเรากดนานเท่าไหร่ เจ้าอิโมจิก็จะออกมาเยอะมากเท่านั้น และที่สำคัญเพื่อนก็เห็นแอนิเมชั่นแบบที่เราเห็นด้วยเช่นกัน

และนั่นก็เป็นทั้งหมดของ FigJam เครื่องมือ Brainstorming ตัวใหม่ ที่สร้างมาให้มีชีวิตชีวามากขึ้น และทำให้การระดมความคิดแบบออนไลน์สะดวกกว่าที่เคยมีมา!

สุดท้ายนี้ไม่มีอะไรเกี่ยวกับ UX/UI Design จะฝากครับ มีเพียงแค่ ถ้าใครชอบถ่ายรูป 📸 หรือชอบท่องเที่ยว 🏞 ก็มาติดตามก็อตได้ที่

• Facebook Page: Padagot
• Instagram: @padagot

ไว้เจอกันใหม่โอกาสหน้า รวมถึง Meetup ที่จะเกิดขึ้นในอนาคต
สำหรับวันนี้สวัสดีครับ :-)
ปล.อย่าลืมแชร์ต่อไปให้เพื่อน ๆ น้าา 😂

สำหรับเด็กมหิดลฯ น่าจะเจอปัญหาเรื่องการแก้ไขเอกสารพวก Word, Excel, Powerpoint กัน คือ Login ได้ แต่แก้ไขไม่ได้ วันนี้จะมาไขปัญหานี้ ราวกับเสกเวทย์มนต์กันเลยทีเดียว 🤣

อย่ารอช้า มาเริ่มกันเลยดีกว่า

1. เข้าที่เว็บไซต์ Office 365 เพื่อ Login
2. ให้กรอก Email มหาวิทยาลัยลงไปช่องด้านล่าง (กรณีของม.มหิดลให้ใช้ xxx.xxx@student.mahidol.edu) แล้วกดเริ่มต้นการใช้งาน

3. หลังจากกดเริ่มต้นการใช้งานแล้ว จะมีหน้าขึ้นโชว์ว่าเป็นนักเรียนหรือครู ในกรณีนี้ผมจะพูดถึงกรณีนักเรียนอย่างเดียวนะครับ เพราะฉะนั้นกด “I’m a student”

4. พอกดเข้ามา หน้าต่อไปจะมีให้กด Sign up แล้วหลังจากนั้น จะมีหน้าต่างให้กด Create your account ขึ้นมา ก็กรอกข้อมูลให้ครบ ตรงที่เป็น Verification code ให้เข้าไปดูในอีเมลที่ลงสมัครไว้ตอนแรก จะเห็นเลข 6 หลักก็ให้นำเลขนั้นมาใส่

5. หลังจากระบบจะใช้เวลาสักพักในการประมวลผล เป็นอันเสร็จขั้นตอน

6. คราวนี้ก็ไป Login อีเมลนี้ในแอพ Word, Powerpoint หรือ Excel แล้วก็แก้ไขเอกสารได้ตามสบายเลย 🎉

“ หวังว่าหลาย ๆ คนก็จะได้ปลดล็อกฟีเจอร์นี้ หลังจากที่แอบส่องแต่แก้ไขอะไรไม่ได้มาตั้งนาน (ฮ่า ๆ ) เสร็จแล้วอย่าลืมกด clap แล้วกดแชร์เพื่อแบ่งปันให้เพื่อน ๆ นะคร้าบบบบบ 🎉”

หลายคนคงมีคำถามมากมายเกี่ยวกับการทำงานประเภท Office บน iPad ว่ามันจะแทนกันได้จริง ๆ หรอ แต่ก่อนถึงขั้นนั้น วันนี้ผมจะมาเล่าวิธีการติดตั้ง Font ไทยราชการลงบน iPad แบบง่าย ๆ และฟรี ๆ กันไปเลย

แต่ก่อนอื่นผม ต้องขอขอบคุณแหล่งทรัพยากรอันล้ำค่าจาก “วิทยาลัยเทคโนโลยีพงษ์สวัสดิ์” ที่มี profile ของ Font ราชการไทยให้โหลดกันไว้ใช้ได้ฟรี ๆ

• อันดับแรกเลย เข้าไปที่ เว็บนี้ (http://intra.pongsawadi.ac.th/2014/11/11/install-font-thai/) แล้วเริ่มขั้นตอนต่อไปได้เลย

• หลังจากเข้ามาที่หน้าเว็บนี้แล้ว ให้เลือก “Font_Thai01.mobileconfig” ได้เลย หลังจากนั้นจะมี pop up ขึ้นมา ให้เลือก Allow

• หลังจากที่ทุกคนกด Allow แล้ว ตัวแอพจะเด้งไปที่หน้าการตั้งค่าโปรไฟล์ดังภาพ ให้กดติดตั้งไปแบบไม่มีปัญหา ^^

• กด Install > Install > Done คราวนี้เป็นการเสร็จสิ้นการติดตั้ง Font ไทย
• หลังจากนี้ก็สามารถใช้ Font ไทยเพื่อทำงานเอกสารบน iPad ได้แล้ว บรรดา TH Sarabun New, TH SarabunPSK, TH Krub and etc. กว่า 81 Fonts มาหมดดดดด

เห็นมั้ยละครับ ใช้เวลายังไม่ถึง 1 นาทีด้วยซ้ำ ก็ติดตั้งเสร็จแล้ว ส่วนวิธีการถอนการติดตั้งให้ทำดังนี้ครับ

วิธีถอนการติดตั้ง Profile Font ไทย

• ให้เข้าไปที่ Setting (การตั้งค่า) ของตัวเครื่องนะครับ
• เลือก General (ทั่วไป)
• เลื่อนลงมาด้านล่างสุด เลือก Profile (โปรไฟล์)
• กด Remove โปรไฟล์
• เท่านี้ก็เสร็จสิ้นขั้นตอนการถอนการติดตั้ง Font ไทยแล้วครับผม

สุดท้ายนี้ขอขอบคุณ วิทยาลัยเทคโนโลยีพงษ์สวัสดิ์ อีกครั้งที่ได้จัดทำ Profile Font ดี ๆ แบบนี้นะครับผม ^^ แล้วก็อย่าลืมแชร์ทริคดี ๆ แบบนี้ให้คนอื่นได้รู้ด้วยน้าา สำหรับวันนี้ สวัสดีคร้าบบบบบบ

“ ผมก็หวังว่าทุก ๆ คนจะได้ใช้ iPad ที่ซื้อมา ให้คุ้มค่า ให้สมกับที่ Apple เคยโฆษณาไว้เลยยย 💸”

ติดตามผลงานได้ทาง Instagram: @padagot

หรือทาง Facebook Page: Padagot นะครับ