‘Always in Beta’ เบื้องหลังการออกแบบ Beta Conference 2019

จบไปแล้วกับงาน Beta Conference 2019 เมื่อวันที่ 31 มีนาคม 2562 ที่ผ่านมา สำหรับผู้ที่พลาดงานไปไม่ต้องเสียใจไป สามารถตามอ่านสรุปทอล์คจาก Speaker ได้ที่นี่ https://medium.com/@Sutham/สรุปเนื้อหาที่เกิดขึ้นในงาน-beta-conference-2018-by-skooldio-always-in-beta-aa23c4ffd51e

วันนี้เราทีมออกแบบ Skooldio อยากจะมาแชร์อีกด้านหนึ่งของเบื้องหลังคำว่า “Beta” พร้อมกับกระบวนการออกแบบงานตั้งแต่เริ่มจนจบงานตลอดระยะเวลา 2 เดือน ให้ได้ฟังกัน

Beta /ˈbādə/ (n.)

The final stage of its development that helps us test and prepare ourselves for the real release.

Beta Conference 2019 ในธีม “Always in Beta” สะท้อนถึงสถานะที่อยู่ในระหว่างการพัฒนาก่อนที่จะนำไปใช้งานจริง เปรียบเทียบกับขั้นตอนของการพัฒนาตัวเองที่ต้องเรียนรู้ในทุก ๆ วัน อยู่เรื่อย ๆ เมื่อเราวางตัวอยู่ในเวอร์ชั่น Beta อยู่ตลอด เราจะมีโอกาสเรียนรู้ ทดลอง และยอมรับข้อผิดพลาด เพื่อนำบทเรียนเหล่านั้นกลับมาพัฒนาตัวเองให้ดีขึ้นได้

 

ภาพบรรยากาศในงาน Beta Conference

อยากให้ผู้เข้าชมงานได้รับประสบการณ์แบบไหน?

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

ก่อนที่จะเริ่มดีไซน์เราได้รับโจทย์มาว่างานนี้จะชื่อ “Beta” เริ่มจากระดมความคิดก่อนว่า คำว่า Beta มันจะสื่อถึงอะไรได้บ้าง มันมาจบที่ไอเดียของ ‘การเตรียมตัวเองให้พร้อมอยู่ตลอดเวลา และไม่หยุดอยู่กับที่’ ซึ่งไม่ต่างอะไรกับการเตรียมตัวก่อนลงสนามแข่งกีฬา นักกีฬาเองก็ต้องพัฒนาตัวเองอยู่เสมอเพื่อให้ได้ชัยชนะ

ไอเดียของการดีไซน์ Key Visual จึงมาจากการดึง Element ของสนามกีฬาต่าง ๆ ซึ่งเราเห็นว่า สนามกีฬา เป็นศูนย์กลางของกีฬาทั้งหมด เป็นสถานที่ที่นักกีฬาทุกคนจะมาพัฒนาตัวเอง เราจึงเลือกสนามวิ่งจึงเป็นกราฟิกหลักในงานนี้ สีที่เลือกใช้ก็อยากให้ดูสดใส และดูคลีน แต่ก็ยังต้องสื่อถึงความรู้สึกของความเป็นงาน Tech ไว้ด้วย จึงเลือกใช้กลุ่มสีฟ้า/เขียว/ส้ม เป็นระบบสีหลัก เพื่อแสดงถึงความเคลื่อนไหวไม่หยุดนิ่ง

 

Beta Conference Website: https://beta.skooldio.com

ชิ้นงานแรกที่ทางทีมดีไซน์ต้องเริ่ม deliver มาก่อนก็จะเป็น website หลักของงาน เราปรึกษากันในทีมว่าจะต้องมีฟีเจอร์อะไรบ้างแล้วก็เริ่มโค้ดกันเลย! ต้องขอบคุณพี่ต้าที่ปล่อยให้ทางดีไซน์เนอร์ลองมั่วโค้ดเองอยู่นาน แม้สุดท้ายจะโดนแก้ยับจากทาง Dev ก็ตาม ซึ่งมันจะได้สมกับ concept ของการอยู่ในโหมด Always in Beta (😅😎ยังไงล่ะ)

Beta Challenge Game

หนึ่งในกิจกรรมที่พวกเราคิดขึ้นมาเพื่อสร้างความเพลิดเพลินและเชื่อมโยงผู้ร่วมงานเข้าด้วยกัน รู้จักตัวตนของตัวเองให้มากขึ้นผ่าน 6 ทักษะสมัยใหม่ จึงเกิดเป็นเกม Beta Challenge ขึ้น ตัวเกมเล่าถึง 6 ทักษะแห่งอนาคต ได้แก่ Business Analytics, Customer Experience Design, Software Development, Digital Business, Learning Machine and A.I. และ New Ways of Working

ใครอยากลองเล่น คลิกลิงก์นี้เลย! 👉🏻 https://beta-challenge.skooldio.com/

 

Beta Challenge Dashboard

Prototype

เราเริ่มจากการวาง Flow ของเกมโดยคร่าว ๆ ก่อน เพื่อสื่อสารกับทั้งทีม Dev และ BD (Business Development) ก่อน ว่าต้องการโปรโมทอะไรและอยากเก็บข้อมูลผู้ใช้อะไรบ้าง แล้วจึงเริ่มคิดว่าผู้ใช้งานจะมีประสบการณ์ตั้งแต่เริ่มต้นจนจบอย่างไร จากนั้นจึงออกแบบ Navigation อย่างเป็นระบบ เพื่อให้การใช้งานไม่ติดขัด เกิดเป็นประสบการณ์ที่ดี

เพื่อความง่ายในการทำงานร่วมกันทั้งทีม Design และทีม Dev ไปพร้อม ๆ กัน เราจึงวาง Design System เพื่อเป็นตัวสื่อสารหลัก ซึ่งสอดคล้องไปกับธีมหลักที่กำหนดทั้งสีและฟ้อนต์ และออกแบบ User Interface ที่มีลักษณะเป็นเกม เพื่อให้เกิดความสนุกไม่น่าเบื่อ

 

Beta Challenge Wireframe

 

Beta Challenge Design System

 

Beta Challenge Game UI: https://dribbble.com/shots/6407408-Beta-Challenge-Game

 

Beta Challenge Game — Motion: https://dribbble.com/shots/6407569-Beta-Challenge-Game-Motion

ในตัวเกมผู้เข้าร่วมงานจะต้องประเมินระดับทักษะทั้ง 6 อย่าง ระบบจะสร้างคาแรคเตอร์โดยคำนวณจากทักษะที่มีคะแนนสูงสุด 3 ลำดับ แล้วเชื่อมโยงกับผู้ร่วมงานคนอื่น ๆ ผ่าน Challenge Board พร้อมทั้งช่วยแนะนำให้ว่าควรจะเรียนอะไรเพิ่มด้วย คอร์สเรียนจาก Skooldio 🤟 แถมยังสามารถแลกรับส่วนลดคอร์สและของรางวัลติดไม้ติดมือกลับบ้านเมื่อแชร์คาแรกเตอร์ที่ตัวเองได้ลงบน Social Network อีกด้วย

 

Beta Challenge Dashboard

ไม่เพียงแต่เกมที่สร้างความสนุกสนานและได้เชื่อมโยงกับเพื่อน ๆ ในงาน เรายังเชิญชวนให้ผู้ร่วมงานเขียนถึงภาพในอนาคตของตัวเองผ่านบอร์ด Where do you see yourself in 3 years? ซึ่งนอกจากจะได้ทบทวนตัวเองแล้วก็ยังจะได้เห็นมุมมองของเพื่อน ๆ อีกด้วย

 

Sharing Board: Where do you see yourself in 3 years?

สำหรับการพัฒนาในองค์กรเราก็ยังมี Skooldio Flow Chart เครื่องมือช่วยวิเคราะห์ด้วยว่า ควรปรับเพิ่มกลยุทธ์หรือทักษะอะไรที่จะรับมือกับการเปลี่ยนแปลงของยุคนี้ได้

บทสรุป… แต่ไม่ใช่ตอนจบ

สำหรับการจัดงาน Beta Conference 2019 ในครั้งนี้ เป็นโอกาสให้ผู้ร่วมกิจกรรมกว่า 400 คน ทั้ง Software Developer, Designer, Product Owner และ Marketer ได้มาเจอกัน ได้รับความสนุก แรงบันดาลใจและสาระประโยชน์ แลกเปลี่ยนความรู้และประสบการณ์ระหว่างกัน ซึ่งการจัดงานครั้งนี้เองทางทีมดีไซน์ก็ยังมีหลายจุดที่ยังต้องปรับปรุงแก้ไขมากมาย และนี่คือบทเรียนที่เราได้จากงานนี้…

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

อย่างที่เราเกริ่นในตอนต้นว่าเราสามารถนำข้อบกพร่องเหล่านั้นมาพัฒนาให้ดียิ่งขึ้นไปอีก แล้วเจอกันปีหน้า See you in 2020!

FYI โพสนี้เขียนโดยดีไซน์เนอร์สี่คนด้วยกันมี เจน ทิวไผ่ มะยม พี่ปุ้ม ขอบคุณทีมที่ช่วยกันปลุกปั้นกันจนเสร็จฮะ 🙌🏻