แนวคิด Sense of Worth สู่เส้นทางการสร้าง Dashboard ใหม่สุดเทพ

ในที่สุดวันที่ทุกคนรอคอยก็มาถึง! หลังจากก่อนหน้านี้ที่เราได้มีบทความ มารู้จักทีม Engineer ของโกลบิชกัน ไปแล้ว คราวนี้เราจะมา Update ผลงานล่าสุดที่พึ่งคลอดจากทีม Engineer แห่ง Globish กัน

วันนี้เราจะมาพูดถึงตัว Dashboard ใหม่ใน Learning Platform ของเราที่ทำให้ผู้เรียนสามารถติดตาม Progress การเรียนของตัวเองได้ ทีม Engineer ที่เปรียบเหมือน Suicide Squad ของ Globish จะมาเล่าว่ากว่าจะได้ออกมาเป็น Dashboard ที่เราภูมิใจ มีใครทำในส่วนไหน และพวกเขาได้ทำอะไรกันบ้าง

โดย Project นี้เริ่มมาจากช่วงกลาง ๆ ของ Quarter 2 เราตั้งเป้าว่าอยากเพิ่ม Repurchase/Retention ของผู้เรียน จึงเกิดการ Brainstrom กับ เพื่อที่จะ Crack ให้ได้ว่า ปัจจัยอะไรบ้างที่จะทำให้ผู้เรียนของเรากลับมาใช้ Product ของเราต่อ ทำให้เราได้ข้อสรุปออกมาเป็น 4 ประเด็น

1. Product first adoption
2. Completion
3. Performance
4. Sense of worth

โดยที่เราจะเจาะลึกลงไปในหัวข้อ Sense of worth เป็น Idea หลัก เพราะว่าเวลาเราจะซื้ออะไรสักอย่างเนี่ย นอกจากราคา และคุณสมบัติของสินค้ามันต้องเจ๋งแล้ว ในด้านความรู้สึกจะต้องให้ Sense ของความรู้สึกว่าคุ้มค่าเงิน หรือได้รับความคุ้มค่าจากสินค้านั้น ๆ เราเลยหยิบหัวข้อ Sense of worth มาลองดูว่าจะทำให้ผู้เรียนของเรารู้สึกคุ้มค่าในมุมไหนได้บ้าง

เราได้ไป Research เรื่อง Small wins เพื่อนำมาประกอบ Idea ว่าการสร้าง Win เล็ก ๆ ระหว่างทางจะทำให้ผู้เรียนเกิด Motivation และความรู้สึกถึงการพัฒนาได้ ซึ่งเราเห็นตรงกันว่าการสร้าง Sense of Progress ให้ผู้เรียนรู้สึกถึงการพัฒนา จะทำให้ผู้เรียนรู้สึก Worth เลยออกมาเป็น Assumption ที่เราตั้ง Goal ไว้ว่า “Create Sense of Progress to make customers feel the worth”

จากนั้นในขาของ Opportunities เราได้ทำการแยกออกมาเป็น 4 หัวข้อใหญ่ ๆ

1. As a student, I want obviously see it myself that I have developed.

2. As a student, I want someone to tell me if I have developed myself.

3. As a student, I want to FEEL that I have developed something.

4. As a student, I want to be rewarded for my discipline and effort.

ขอเปรียบเทียบให้เข้าใจง่ายจาก Concept การลดน้ำหนักให้เห็นชัด ๆ

1. ชั่งน้ำหนักแล้วเห็นด้วยตัวเองว่าน้ำหนักลดลง

2. มีคนอื่นบอกว่าผอมขึ้น

3. ส่องกระจกแล้วรู้สึกผอม รู้สึกกางเกงหลวม

4. คุมอาหาร ออกกำลังกายได้ตามเป้า

หน้า Interface ของ Learning platform ก่อนที่จะมี Dashboard ใหม่สุดเทพ

ซึ่ง Learning Progress Dashboard มี Objective ว่าทำยังไงให้ผู้รู้สึกถูก Motivate จากการเห็น Progress ของตัวเอง และเห็น Product อื่น ๆ ของเรา ทำให้เขาอยากรักษา Continuity ในการเรียน และเรียนจบได้เร็วขึ้น

เราก็เลยคิด Solution ที่จะเอามาใช้ทดลองกันบน 2 ช่องทางหลัก คือ E-mail และ Dashboard แสดง Ticket used/total (Learning progress) และ Continuity (Weekly streak) บน Website ซึ่งเราขอเล่าในส่วนของ Dashboard เป็นหลักแล้วกัน

เมื่อเราได้ Objective มี Assumption และก็ Solution ของ Project แล้ว เราก็จะส่งต่อให้กับทางฝั่ง UX/UI ต่อ

ซึ่งในช่วง Wireframe เราก็ทำไว้ค่อนข้างหลาย Version ได้มีการทำ A/B Testing และการขอความคิดเห็นในรูปแบบรายบุคคล จนสรุปมาในระดับหนึ่ง หลังจากนั้นทางทีมจึงได้ทำการตกแต่งออกมาในหลายรูปแบบมาก ๆ ไม่ว่าจะเป็นการที่พยายามจัดให้อยู่ในบรรทัดเดียวยาว ๆ หรือการที่จัดในรูปแบบของการเน้นเรื่องของ Percentage Display เป็นลำดับแรก

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

หลังจากทุกอย่างเสร็จเรียบร้อย และทุกฝ่ายเห็นตรงกัน ทางทีมจึงได้มีการทำ Assets แยกออกมาเพื่อที่จะส่งต่อให้ Front-end นำไปขึ้น Website จริงต่อไป

Back-end Development Part

โดยส่วนใหญ่แล้ว ในทีม Engineer เราเขียน Typescript เป็นหลัก เพราะงั้น Framework สำหรับ Back-end ที่ใช้จึงเป็น NestJS เพราะมี Community ที่ค่อนข้างใหญ่ ทำให้สามารถ Search หาปัญหาต่าง ๆ เกี่ยวกับ NestJS ได้ง่าย, Setup project ได้ง่ายขึ้น ถ้าเทียบกับการที่จะทำให้ Express เขียน Typescript ได้, มีการวาง Structure ของ Code มาให้แล้ว เหมาะกับคนที่เคยเขียน OOP เพราะมีการเขียนในรูปแบบของ Class และทำ Dependency Injection, Document อ่านง่าย

ในส่วนของ Business Logic จะแบ่งออกเป็น 2 ส่วนใหญ่ ๆ คือ
1. Ticket used/total (Learning progress)

Learning Progress ตรงนี้มีการทำที่ไม่ซับซ้อน หลัก ๆ ก็แค่หาว่าผู้เรียนมีตั๋วทั้งหมดเท่าไหร่ และใช้แต่ละ Type ของ Ticket ไปกี่ใบแล้วใน และเอามาคำนวณหาเป็น Percentage แค่นั้นง่าย ๆ เลย

2. Continuity (Weekly streak)

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

ซึ่งในการหาว่า ณ Week ปัจจุบัน มีวันแรกและวันสุดท้ายเป็นวันที่เท่าไหร่ หาได้โดยใช้ Library Moment-timezone เข้ามาช่วย ทำให้ประหยัดเวลาในการคิด Logic เอง ส่วนที่เหลือก็แค่ทำการ Recursive function ที่หาว่าวันแรกจนถึงวันสุดท้ายของ Week ผู้เรียนคนนั้นมีเรียนมั้ย และใส่เงื่อนไขในการ Recursive เป็นการ Subtract week ลงไปเรื่อย ๆ จนกว่าจะเจอว่าผู้เรียนคนนั้นไม่มีเรียน

ในส่วนของการ Test ทางทีมได้ใช้ Jest ซึ่งเป็น BuiltIn Library ของ NestJS มาใช้ในการทำ Unit test ซึ่งช่วยเพิ่มประสิทธิภาพในการ Maintenance code ได้ดีขึ้นในกรณีที่มีการเรียกใช้ Function นั้นในหลาย ๆ ที่ และในอนาคต ถ้าต้องการที่จะเปลี่ยน Logic ใน Function นั้น Unit test จะทำให้รู้ว่ามีผลกระทบกับจุดไหนบ้าง ส่วน Back-end ก็จะเป็นประมาณนี้

Front-end Development Part

ในฝั่ง Front-end เราได้ใช้ Vue.js Frameworkในการ Implement เหตุผลที่เลือกใช้ Vue.js เพราะง่ายต่อการเขียน CSS หรือ SCSS มากกว่า React.js การจัด Styling ต่าง ๆ ให้ตรงตามที่ UI/UX ที่ Design มาก่อนหน้าทำได้อย่างลื่นไหล บวกกับการเขียนแบบ BEM ถือว่าทำได้อย่างยอดเยี่ยม (อันนี้ไม่ได้อวย Vue.js นะ แต่ถ้านับเฉพาะเรื่องจัด Styling แล้ว Vue.js เขียนได้ถนัดมือมากกว่า React.js จริง ๆ)

สำหรับมือใหม่ที่สงสัยว่า BEM คืออะไร ตามลิ้งนี้ไปได้เลย What is BEM?

หน้าที่หลักของ Front-end ส่วนใหญ่จะวุ่นอยู่กับ UI logic เป็นหลัก เพราะงาน UI/UX ทาง Designer เขาทำมาให้แล้ว ส่วน Business Logic จะคำนวณมาตั้งแต่ฝั่ง Back-end มาให้เรียบร้อยแล้ว เพราะฉะนั้น งานนี้จึงเป็น Pure Front-end Skill แน่นอน

หน้าตา Dashboard ใหม่ พร้อมแสดงผล Learning progress และ Weekly streak

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

การสร้าง Sense of worth ให้กับผู้เรียนนั้น นอกจากมันจะทำให้เกิดการ Repurchase/Retention แล้ว สิ่งสำคัญที่สุดคือมันเสริมสร้าง Experience ของผู้เรียนให้ดีขึ้น เขาได้เห็น Progress ได้เห็นการพัฒนาการจากความทุ่มเทของตัวเอง สามารถทำให้เขา Focus กับการเรียนได้มากขึ้น

หากเพื่อน ๆ คนไหนกำลังหาวิธีในการคิด Product ใหม่ หรือพัฒนา Product ของตัวเองให้ดียิ่งขึ้นกว่าเดิม ก็สามารถนำไปใช้ Sense of worth ไปใช้ในทีมได้เลย ส่วนใครที่อยากเข้ามาเป็นส่วนหนึ่งของทีม Engineer ที่ Globish สามารถทักเข้ามาคุยกับพวกเราได้เลยที่ Globish Workspace | Facebook

หรือใครที่อยากมาร่วมเป็นส่วนหนึ่งกับเรา สมัครเข้ามาเลยได้ที่: >คลิก<