TCASter: Design Case Study

เมื่อปีที่แล้ว รัฐบาลเปลี่ยนรูปแบบการคัดเลือกนักเรียนเข้าศึกษาต่อในระดับมหาวิทยาลัยเป็นแบบใหม่ (อีกแล้ว🤔) ทำให้นักเรียนระดับชั้นม.ปลายทั่วประเทศประสบปัญหาด้านการรับมือกับการสอบแบบใหม่นี้

ในบทความนี้เราจะพาไปดู Design Process ของแอปที่ช่วยให้เด็กกว่า 100,000 คน เข้าถึงข้อมูลข่าวสารทางการศึกษาอย่างเท่าเทียมกันได้

แต่ก่อนอื่นเลย…

TCAS คืออะไร ?

TCAS ย่อมาจาก Thai University Center Admission System คือระบบการสอบคัดเลือกบุคคลเข้าศึกษาต่อในระดับมหาวิทยาลัยแบบใหม่ที่เริ่มใช้ในปีนี้ (พ.ศ. 2561) รูปแบบการรับนักศึกษาจะแบ่งออกเป็น 5 รอบ โดยแบ่งเป็น

  • รอบ 1 การยื่น Portfolio
  • รอบ 2 การยื่นโควตา
  • รอบ 3 รับตรงร่วมกัน
  • รอบ 4 Admission
  • รอบ 5 รับตรงอิสระ

Empathize: Understanding Pain Points

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

ตัวอย่างข้อมูล เฉพาะของมหาวิทยาลัยเกษตรศาสตร์

ความซับซ้อนของข้อมูล
ข้อมูลหลักๆ ประกอบไปด้วยข้อมูลการเปิดรับกว่า 80 มหาวิทยาลัย 4,000 กว่าสาขาและอีก 125,000 ที่นั่งสอบ ซึ่งการเข้าถึงข้อมูลในปัจจุบันนั้นมีความซับซ้อนและไม่เป็นระเบียบ

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

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

Define Scope and Target Users

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

Ideate

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

เราเริ่มตั้งแต่เรียงลำดับความสำคัญของแต่ละฟีเจอร์ ตามความต้องการของนักเรียน โดยแบ่งเป็นลำดับได้เป็น

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

Prototype

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

First Lo-fi Prototype

Usability Test

ซึ่ง feedback เร็วๆ ที่ได้คือน้องๆ สนใจฟีเจอร์คณะในดวงใจ ช่วยให้น้องๆ ไม่ต้องเสียเวลาไปหาในอินเตอร์เน็ต ฟีเจอร์ค้นหาคณะช่วยให้น้องเห็นรอบการสอบและเกณฑ์การรับต่างๆ ได้อย่างง่ายกว่าการเข้าไปหาใน Google แบบเดิม

Usability test ครั้งที่ 1

สิ่งที่ไม่ชอบก็มีเรื่อง Visual (ซึ่งอาจเป็นเพราะเป็น Lo-fi prototype ด้วย) ข้อมูลที่ยังอ่านยากอยู่ อยากให้มีข้อมูลของคนที่สนใจคณะเดียวกันด้วยประมาณกี่คน เป็นต้น

UI Design

Challenge

  • TCASter เป็น brand ใหม่ทำอย่างไรให้ standout จากคู่แข่ง ?
  • การออกแบบต้องง่ายต่อการพัฒนาด้วย React Native แล้วรองรับการ scale ในอนาคตบนอุปกรณ์ในหลายขนาด
  • จะลดปัญหาเรื่องการเข้าถึงข้อมูลที่ซับซ้อนได้อย่างไร ? จะต้องแสดงข้อมูลในรูปแบบไหน ?
  • จะทำอย่างไรให้นักเรียนแต่ละคน เข้าถึงสิ่งที่ตัวเองสนใจได้สะดวกมากยิ่งขึ้น ?

Visual Design

หลังจากได้ feedback ครั้งแรก ทีมก็รู้เลยว่า visual design คือสิ่งนึงที่สำคัญมากสำหรับการทำผลิตภัณฑ์สำหรับนักเรียน เพราะน้องๆ หลายคนมีความเบื่อหน่ายกับการค้นหาข้อมูลที่มีแต่ตัวหนังสือ เราเลยให้ความสำคัญกับ visual and motion graphic มากเป็นพิเศษ

แนวคิดหลักในการออกแบบ visual คือ minimal, friendly และ fun เราจึงเลือกใช้ flat graphic เป็นสไตล์ในการออกแบบ เนื่องจากสามารถทำได้ง่าย เอา graphic element มา recompose ได้เรื่อยๆ อีกทั้งยังเลือกสี monotone เพื่อให้ง่ายต่อการจดจำ

Design System

เนื่องจากทีม Skooldio เลือกใช้ React Native เป็นเทคโนโลยีที่ใช้พัฒนา Front End เราจึงใช้ Component-based UI เป็นแนวทางการออกแบบเพื่อให้ง่ายต่อการนำ component ต่างๆ ไปใช้ซ้ำ อีกทั้งยังช่วยลดเวลาพัฒนาผลิตภัณฑ์ได้อีกด้วย

Information Architecture (IA)

เราลดปัญหาการเข้าถึงข้อมูลที่ซับซ้อนได้ ด้วยการวาง IA ให้เป็นระบบ ซึ่งรูปแบบการเข้าถึง (Navigation) ข้อมูลของนักเรียน สามารถแบ่งออกได้ 2 รูปแบบคือ

แบบที่ 1: นักเรียนที่มีเป้าหมายอยู่แล้ว ซึ่งนักเรียนกลุ่มนี้มัก ค้นหาข้อมูลจากมหาวิทยาลัย > คณะ > สาขาวิชา

เราจึงวาง Structure การเข้าถึงข้อมูลตามพฤติกรรมของผู้ใช้

User Interface ของการ Search แบบที่ 1: มหาวิทยาลัย > คณะ > สาขาวิชา

แบบที่ 2: นักเรียนที่ยังไม่รู้ว่าอยากเข้าที่ไหนแต่มีกลุ่มคณะหรือวิชาชีพที่สนใจอยู่แล้ว

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

เราจึงวาง Structure เป็น กลุ่มคณะ > มหาวิทยาลัยที่เกี่ยวข้อง > คณะที่เกี่ยวข้อง แล้วตามด้วยสาขา

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

User Interface ของการ Search แบบที่ 1: กลุ่มคณะ > มหาวิทยาลัยที่เกี่ยวข้อง > คณะที่เกี่ยวข้อง แล้วตามด้วยสาขา

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

Key Feature

คณะในดวงใจถือเป็นอีกหนึ่งฟีเจอร์หลักของแอป ที่มาของฟีเจอร์นี้เกิดจากการที่เราพยายามจะแก้ปัญหาจาก Insight ที่ว่า ‘เข้าถึงข้อมูลที่ยากและใช้เวลาค้นหานาน

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

More Prototype and More Test

ซึ่งก่อนที่จะ Launch ผลิตภัณฑ์ทีมของเราก็ยังเข้าหาผู้ใช้งานจริง อีกทั้งยังเอา product จริงไปทำ Usability test ด้วยเพื่อเก็บ Feedback ในเชิง Technical

ซึ่ง Feedback ที่ได้ก็มีตั้งแต่น้องลบคณะในดวงใจไม่เป็น มือถือ Android บางรุ่นมีปัญหา น้องๆ อยากได้ฟีเจอร์โน้นนี้เพิ่มในอนาคต

ซึ่งการทำ Usability ก่อน Launch นั้น จะทำให้เราเห็นปัญหาจริงที่จะกำลังเกิดขึ้น แล้วแก้ไขและพัฒนาได้ตรงจุด ตามความต้องการของผู้ใช้ในอนาคต

Recap

เราใช้ Design Thinking ในการเข้าไปช่วยแก้ไขปัญหาให้ตรงตามความต้องการของผู้ใช้

  • Empathize ทำให้เราเข้าใจปัญหาของน้องๆ ได้ดียิ่งขึ้น
  • การ Define ปัญหาให้ชัดเจน จะช่วยแก้ไข้ปัญหาได้ตรงจุด
  • ช่วยกัน Ideate เพราะหลายหัวดีกว่าหัวเดียว แล้วจัดลำดับความสำคัญของฟีเจอร์ ไม่ใช่จะทำหมดทุกฟีเจอร์ เพราะ Software Product สามารถอัปเดทได้
  • Always start with Lo-fi prototype เพราะครั้งแรกไม่มีทาง perfect ยิ่งเราล้มเหลวเร็วเท่าไหร เรายิ่งเรียนรู้และพัฒนาต่อได้เร็วขึ้น
  • Prototype ไม่ใช่แค่ช่วยในเรื่องการทดสอบ แต่ช่วยในการสื่อสารกับ Developer ด้วย
  • อยากให้ Workflow ดี ควรให้ Developer มีส่วนร่วมในโปรเจคให้มาก เพราะสามารถให้ feedback เร็วๆ กับ Designer ได้ก่อนว่าฟีเจอร์ไหนหรือดีไซน์อะไรทำยากง่าย เพื่อให้ง่ายต่อการพัฒนา
  • Test บ่อยๆ ฟังว่าคนใช้ต้องการหรือมีปัญหาอะไร แล้วหมั่นพัฒนาตามอยู่เสมอ

ส่งท้าย

“User-centered design means working with your users all throughout the project.” — Donald A. Norman

หลังจากเปิดตัวเมื่อเดือนตุลาคมปีที่แล้ว ปัจจุบันแอป TCASter มียอดผู้ใช้แล้วมากกว่า 150,000 คน แล้วน้องๆ หลายคนก็เริ่มติดคณะที่ตัวเองใฝ่ฝัน

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

“นี่คือสิ่งที่ผู้ใช้ ต้องการจริงๆ หรือเปล่า ?”

สุดท้ายขอขอบคุณน้องๆ ทุกคน ที่ให้ความไว้วางใจ และขอบคุณสำหรับคำติชมต่างๆ ของผู้ใช้ทุกคน

ทีม Skooldio หวังว่าแอป TCASter นี้จะเป็นก้าวหนึ่งในการปฏิรูปการศึกษาไทย ที่แม้จะเป็นก้าวเล็กๆ แต่ก็เป็นการก้าวไปข้างหน้า

มาร่วมเป็นส่วนหนึ่งในการเปลี่ยนแปลงการศึกษาไทย

ถ้าคุณเป็นคนที่ให้ความสำคัญกับ

  • Craftmanship (ขอแปลเป็นไทยว่า “งานละเอียด”) ทั้งในมุมเทคโนโลยีและ
    การออกแบบ
  • Lifelong Learning การทำงานทุกวันคือการเรียนรู้ จากงานที่ท้าทาย จากเพื่อนร่วมงานเก่งๆ (ex-Facebook, ex-Reuters, ex-Agoda) และจาก Instructor เทพๆ ที่มาร่วมสอนกับเรา
  • Education for better future การศึกษาและการพัฒนาบุคลากรของชาติ

ดูรายละเอียดเพิ่มเติมได้ที่ https://www.blognone.com/node/101951

ถ้าอยากร่วมงานกับเรา แต่หาสิ่งที่อยากทำไม่เจอ Write your own Job Description! แล้วส่งมาหาเราได้เลย !

Leave a Reply

Your email address will not be published. Required fields are marked *