Design

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

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

จบไปแล้วกับงาน 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 อยู่ตลอด เราจะมีโอกาสเรียนรู้ ทดลอง และยอมรับข้อผิดพลาด เพื่อนำบทเรียนเหล่านั้นกลับมาพัฒนาตัวเองให้ดีขึ้นได้

 

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

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

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

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

 

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

Beta Conference 2019 Branding Identity: https://dribbble.com/shots/6397277-Beta-Conference-Branding

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

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

 

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

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

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

 

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

Beta Challenge Game

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/

 

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

Beta Challenge Dashboard

Prototype

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

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

 

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

Beta Challenge Wireframe

 

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

Beta Challenge Design System

 

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

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

 

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

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

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

 

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

Beta Challenge Dashboard

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

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

 

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

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

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

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

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

 

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

Skooldio Flow Chart ที่ทำมาเพื่อช่วยหาคำตอบให้กับองค์กรว่ายังต้องการเสริมสกิลในจุดไหน

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

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

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

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

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

You may also like

UX Writing คืออะไร
Design

ไขข้อข้องใจ! UX Writing คืออะไร ทำไมสำคัญกับ Product พร้อมตัวอย่างน่าสนใจ

UX Writing คืออะไร? ทำไมต้องรู้จักคำนี้ด้วยนะ? คุณอาจจะเคยผ่านการใช้งาน Application มากหน้าหลายตาในแต่ละวัน ซึ่งแอปฯ บางตัวก็ทำให้คุณรู้สึกดีตลอดการใช้งาน เข้าแล้วไม่อยากออก เข้าแล้วอยากเข้ามาใช้บ่อยๆ ทุกวัน แต่กลับกันกับแอปฯ บางตัวที่ทำให้คุณหงุดหงิดใจตลอดการใช้งาน อยากออกแทบตาย ...
Web Design Font Pairing
Design

เทคนิคการจับคู่ฟอนต์ไม่ให้เละ ฉบับ Web Designer มือโปร

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

More in:Design

ui-design-Cover Design

ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง เช่นเดียวกันกับการออกแบบ ...
psychology ux ui blog cover Design

หลักจิตวิทยากับการช่วยออกแบบ UX UI ให้ชีวิต User ง่ายขึ้น

ใครที่กำลังทำงานหรือศึกษาเรื่อง UX UI น่าจะเคยผ่านตาเรื่องของหลักจิตวิทยาการออกแบบที่นำมาใช้กับ UX UI กันบ้างแล้ว แต่เอาเข้าจริงแล้วในฐานะคนที่เป็นหรืออยากเป็น UX/UI Designer ควรมีความรู้พื้นฐานด้านจิตวิทยามากน้อยแค่ไหน โดยหลักการแล้วหลักจิตวิทยาจะช่วยให้ User ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ...
Business

ทำความรู้จัก Design Thinking – สกิลมาแรงที่บริษัทชั้นนำทั่วโลกกำลังมองหา

Design Thinking ไม่ใช่แค่ชื่อวิชาในคลาสเรียนของเด็กออกแบบ แต่เป็นสกิลที่กำลังเป็นที่ต้องการของบริษัทชั้นนำในหลายประเทศทั่วโลก เช่น Apple, Google , Microsoft, Tesla หรือ Startup ไทยอย่าง Bitkub อีกด้วย ...
Business

วิธีสร้าง Pitch แบบโอมากาเสะ – ด้วย Storytelling Framework

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

Comments are closed.