กรณีศึกษา: Nexivo แอปผู้ช่วยอัจฉริยะสำหรับงานอีเวนต์ Connect-IT25

ที่ We Do Dev Work เราเชี่ยวชาญในการสร้างโซลูชันซอฟต์แวร์ที่ออกแบบมาเพื่อแก้ปัญหาในโลกแห่งความเป็นจริงโดยเฉพาะ เมื่อเราได้ร่วมงานกับผู้จัดงาน Connect-IT25 เราได้รับมอบหมายให้สร้างแอปที่จะช่วยยกระดับประสบการณ์ของผู้เข้าร่วมงานอย่างเป็นรูปธรรม ผลลัพธ์ที่ได้คือ Nexivo แอปผู้ช่วยสำหรับงานอีเวนต์ที่ใช้งานง่าย ออกแบบมาเพื่อช่วยให้ผู้เข้าชมงานค้นหาเส้นทางในสถานที่จัดงาน สร้างตารางเวลาของตัวเอง และเชื่อมต่อกับผู้เข้าร่วมงานคนอื่นๆ ได้แบบเรียลไทม์

ด้วยกรอบเวลาที่กระชั้นชิดเพียง 5 สัปดาห์ เราจึงให้ทีมออกแบบเริ่มงานทันที เราจัดทำ Wireframe อย่างละเอียดซึ่งช่วยให้เราสามารถหารือและสรุปขอบเขตงานที่ชัดเจนได้ภายในเวลาเพียงไม่กี่วัน เมื่อทราบความต้องการที่แน่นอนแล้ว เราจึงเริ่มออกแบบประสบการณ์ผู้ใช้ (UX) และอินเทอร์เฟซ (UI) ของแอปพลิเคชัน โชคดีที่ Connect-IT25 มีอัตลักษณ์ของแบรนด์ที่ชัดเจนอยู่แล้ว ทำให้เราสามารถมุ่งเน้นไปที่ประสบการณ์การใช้งานแอปเป็นหลักได้

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

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

ภายในเวลาเพียง 3 สัปดาห์ เรามีโซลูชันที่พร้อมทดสอบบนสภาพแวดล้อม Beta ซึ่งทาง Connect-IT25 ได้ใช้เพื่อให้คำแนะนำที่มีคุณค่า นั่นทำให้เรามีเวลาอีก 2 สัปดาห์ในการขัดเกลาแอปพลิเคชันและเพิ่มฟีเจอร์เสริมอื่นๆ! ส่งผลให้เราสามารถส่งมอบงานที่สมบูรณ์แบบได้ทันเวลาก่อนเริ่มงานพอดี

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

การตัดสินใจด้านการออกแบบ

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

นี่คือแนวทางที่เราใช้
ขั้นตอนที่ 1 - รวบรวมความต้องการจากลูกค้า: กระบวนการของเราเริ่มจากการประชุม Discovery Session อย่างละเอียดกับผู้จัดงาน
ขั้นตอนที่ 2 - การหารือภายในทีมและกำหนดขอบเขต: เมื่อได้ข้อมูลจากผู้จัดงานแล้ว เราได้จัดเวิร์กชอปความร่วมมือระหว่างทีมผลิตภัณฑ์ ทีมออกแบบ และทีมพัฒนา
ขั้นตอนที่ 3 - การวิเคราะห์คู่แข่ง: เพื่อทำความเข้าใจมาตรฐานอุตสาหกรรมและความคาดหวังของผู้ใช้ให้ดียิ่งขึ้น
ขั้นตอนที่ 4 - การทำ Wireframe: เราใช้ Low-fidelity Wireframe ใน Figma เพื่อวางแผน Flow และ Layout หลักๆ ก่อนจะขยับไปสู่ UI แบบ High-fidelity
ขั้นตอนที่ 5 - การตัดสินใจด้านดีไซน์: จากการวิจัยของเรา หลักการออกแบบต่อไปนี้คือสิ่งที่กำหนดทิศทางของ UI ขั้นสุดท้าย:

การนำทางที่เรียบง่าย: มีเพียง 5 แท็บด้านล่าง ได้แก่ หน้าหลัก (Home), ปฏิทิน (Calendar), ข้อมูล (Info), ผู้คน (People) และโซเชียล (Social)
หน้าหลักที่เน้นบริบท: แสดงข้อมูลสำคัญ เซสชันปัจจุบันและที่กำลังจะมาถึง พร้อมปุ่มดำเนินการด่วน
ลำดับความสำคัญของข้อมูล: เวลาของเซสชัน ข้อมูลห้อง และชื่อวิทยากรต้องอ่านง่ายและสแกนสายตาได้รวดเร็ว

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

แม้ว่า Nexivo จะถูกออกแบบมาสำหรับ Connect-IT25 แต่เรารู้ตั้งแต่ต้นว่าแอปนี้จำเป็นต้องนำกลับมาใช้ใหม่ได้ในงานอีเวนต์อื่นๆ ในอนาคต ซึ่งแต่ละงานก็จะมีแบรนด์ สี และอัตลักษณ์ทางภาพที่แตกต่างกัน เพื่อแก้ปัญหานี้ เราจึงสร้าง Nexivo บนโครงสร้างการออกแบบที่ยืดหยุ่น ซึ่งสามารถปรับให้เข้ากับอัตลักษณ์องค์กร (CI) ใดๆ ได้ง่ายโดยไม่ต้องเปลี่ยนโครงสร้างหลักของแอป เราใช้ระบบ Theme ที่ช่วยให้ผู้จัดงานสามารถใส่สีแบรนด์หลักและสีรอง รวมถึงรูปแบบตัวอักษรที่ต้องการได้ ส่วนประกอบทั้งหมด เช่น ปุ่ม การ์ด แถบนำทาง และแท็บ จะใช้กฎระยะห่างและ Layout ที่สอดคล้องกัน โดยใช้ Token สำหรับ Padding, สี และขนาดฟอนต์

นอกจากนี้ หนึ่งในจุดแข็งหลักของ Nexivo คือความง่ายในการใช้งานและการโต้ตอบแบบเรียลไทม์ระหว่างผู้เข้าร่วมงาน ซึ่งเหมือนกับสิ่งที่คุณจะพบในแพลตฟอร์มการสื่อสารสมัยใหม่ เราได้เพิ่มแท็บ Social โดยเฉพาะในแถบนำทางด้านล่าง ซึ่งประกอบด้วยเครื่องมือสองอย่างคือ Community และ Direct Message ฟีเจอร์ Community ช่วยให้เกิดการสนทนาตามช่องทางต่างๆ เพื่อการพูดคุยแบบเปิดและแบ่งปันประสบการณ์ ส่วน Direct Messaging ช่วยให้ผู้ใช้เชื่อมต่อกันเป็นการส่วนตัว ทำให้การสร้างความสัมพันธ์และการสร้างเครือข่ายมีความหมายมากขึ้น

การเลือกเทคโนโลยี

การตัดสินใจด้านสถาปัตยกรรมที่สำคัญ ได้แก่ การเลือกใช้ Backend, Frontend Framework และสถานที่ในการ Deploy แอปพลิเคชัน เรามีข้อจำกัดสำคัญที่ต้องพิจารณาดังนี้:
แอปต้องรองรับผู้ใช้จำนวนมากพร้อมกันได้
ต้องรองรับการใช้งานบนมือถือ
Framework และเทคโนโลยีที่เลือกต้องเอื้อต่อการพัฒนาที่รวดเร็ว

ดังนั้น เมื่อพิจารณาจากข้อจำกัดเหล่านี้ เราจึงตัดสินใจเลือกดังนี้

เนื่องจาก Backend ของเราต้องรองรับการยืนยันตัวตน (Authentication), Websockets, การจัดการข้อมูลอีเวนต์และผู้ใช้ (CRUD) ทั่วไป รวมถึงการจัดเก็บไฟล์ เราจึงตัดสินใจเลือกใช้ Supabase ซึ่งเป็น Open source backend ที่มาพร้อมกับฟีเจอร์ที่เราต้องการมากมาย นี่เป็นข้อดีอย่างมาก เพราะการใช้สิ่งที่มาพร้อมกับระบบช่วยให้เราประหยัดเวลาที่ปกติต้องใช้ในการเขียนระบบจัดการ Auth, การอัปโหลดไฟล์, API และอื่นๆ Supabase สามารถติดตั้งเองได้ (Self-hosted) แต่เราเลือกใช้แผน Cloud-hosted เพื่อที่เราจะได้ไม่ต้องจัดการโครงสร้างพื้นฐานเอง ซึ่งช่วยประหยัดเวลาเพื่อนำไปใช้ในการพัฒนาส่วนอื่นๆ ได้อีก

สำหรับ Frontend เราเลือกที่จะสร้างเป็น PWA แทนการใช้ Native Framework หรือ Platform Agnostic Mobile Framework เรารู้ว่าผู้ใช้ส่วนใหญ่จะใช้งานผ่านอุปกรณ์มือถือ แต่เพื่อความรวดเร็วในการพัฒนา เราต้องการ Framework ที่ทำงานได้หลายแพลตฟอร์ม นั่นคือเหตุผลที่เราตัดการพัฒนาแบบ Native ด้วย Kotlin และ Swift ออกไป และสุดท้ายเราเลือก PWA เพราะระบบการยืนยันตัวตนที่ออกแบบไว้: ผู้ใช้จะได้รับอีเมลพร้อม Token ที่ช่วยให้เข้าสู่ระบบได้ทันที การใช้ PWA ช่วยให้ผู้ใช้ล็อกอินได้เลยโดยไม่ต้องถูกส่งไปยัง App Store เพื่อดาวน์โหลดแอปก่อน แล้วค่อยกลับไปที่อีเมลเพื่อคลิกลิงก์อีกครั้ง

เราเลือก NextJS ในการสร้าง PWA นี้ เนื่องจากการทำ Server Side Rendering ช่วยให้เรามีความยืดหยุ่นในการแสดงผลแอป เราสามารถแคชข้อมูลบนเซิร์ฟเวอร์เพื่อเพิ่มความเร็วในการโหลด ทำให้ผู้ใช้ได้รับประสบการณ์ที่ลื่นไหลเหมือนใช้งานแอปจริงๆ หน้าเว็บสามารถถูก Pre-fetch ไว้ล่วงหน้าพร้อมข้อมูลอีเวนต์และโปรไฟล์ ซึ่งช่วยให้ประสิทธิภาพการทำงานยอดเยี่ยมมาก เนื่องจากที่ We Do Dev Work เรามีความคุ้นเคยกับ NextJS เป็นอย่างดี เราจึงสามารถส่งมอบฟีเจอร์ต่างๆ ได้อย่างรวดเร็วและมีเวลาเหลือสำหรับการเพิ่มประสิทธิภาพ

สำหรับการโฮสต์ Frontend เราเลือก Deploy บน AWS Amplify เนื่องจากมีการกำหนดค่า CDN และ Deployment Pipelines มาให้ในตัว นอกจากนี้ยังรองรับการขยายตัวอัตโนมัติ (Auto-scales) ช่วยลดภาระในการจัดการโครงสร้างพื้นฐานที่สำคัญ

อย่างไรก็ตาม ไม่ใช่ทุกอย่างจะราบรื่นเสมอไปแม้จะใช้เทคโนโลยีเหล่านี้ และนี่คือบทเรียนที่เราได้รับ:

• ประเภทของ Token ที่เราต้องการสำหรับการยืนยันตัวตนไม่ใช่ Magic Link แบบใช้ครั้งเดียวทิ้งทั่วไป เราต้องพัฒนา Time-based Token ของเราเองที่สามารถใช้งานได้ตลอดระยะเวลาการจัดงาน สิ่งนี้ช่วยให้ผู้ใช้สามารถเปิดแอปในเบราว์เซอร์อื่นหรือเปิดใช้งานหลายครั้งในระหว่างวันได้

• อีกปัญหาหนึ่งที่พบบ่อยคือ การเปิดคีย์บอร์ดในหน้าแชททำให้ PWA ปรับขนาดหน้าจอไม่ถูกต้อง ซึ่งเราแก้ไขได้ด้วยการเพิ่ม Custom Resize Handlers ปัญหานี้จะไม่เกิดขึ้นหากทำงานกับ Native Framework

• Server Side Rendering เพิ่มความซับซ้อนในการสร้างแอปพลิเคชัน เราใช้เวลาค่อนข้างมากในการปรับแต่งประสิทธิภาพซึ่งจริงๆ แล้วสามารถนำไปใช้พัฒนาฟีเจอร์ได้ เราพอใจกับผลลัพธ์ที่ได้ แต่นี่เป็นไปได้เพราะเรามีประสบการณ์ที่เชี่ยวชาญกับ NextJS อยู่แล้วเท่านั้น