TGA เป็นแอปพลิเคชันที่มีฟีเจอร์หลัก คือ คำนวณคะแนน และรายการสถิติการเล่นกอล์ฟโดยเฉพาะ นอกจากนี้ยังสามารถสมัครสมาชิกโดยเป็นประเภทแบ่งตามช่วงอายุของผู้เล่น บัตรสมาชิกในรูปแบบ virtual card อีกทั้งยังสามารถติดตามกิจกรรมข่าวสารการจัดแข่งขันกีฬากอล์ฟทั้งในไทย และต่างประเทศ
Thailand Golf Association (TGA)
2019-2020
โปรเจกต์นี้ริเริ่มจากการที่สมาคมต้องการปรับเปลี่ยนระบบการคำนวณใช้อยู่ ณ ตอนนั้นก็คือการให้นักกีฬากอล์ฟส่งเอกสารการสมัครที่เป็นกระดาษมาทางไปรษณีย์ จากนั้นเจ้าหน้าที่จะกรอกข้อมูลการเล่นแต่ละรอบเพื่อคำนวณในระบบ และประกาศคะแนนทางเว็บไซต์ของสมาคมให้สมาชิกได้ทราบ ด้วย process ที่ค่อนข้างจะยุ่งยากเลยต้องปรับให้มีความสะดวกมากขึ้นในด้านการใช้งานทั้งในฝั่งเจ้าหน้าที่สมาคม และนักกีฬากอล์ฟที่เป็นสมาชิกรวมถึงที่จะมาเป็นสมาชิกในอนาคต
โปรเจกต์นี้ลำดับแรกเลย คือ เริ่มต้นด้วยการทำความเข้าใจปัญหาเดิมที่เป็นอยู่ รวมถึง requirement จากลูกค้าก่อนเลยค่ะ ลูกค้าจะ brief มาคร่าว ๆ อยากได้ mobile app ที่ใช้สำหรับคำนวณคะแนนแต้มต่อ (คะแนนของนักกอล์ฟแต่ละคนที่ใช้ไปยื่นแข่งขันในรายการต่าง ๆ ) มีการสมัครสมาชิก และจ่ายค่าสมาชิกรายปี ต้องบอกก่อนว่าลูกค้าไม่จำกัดนะคะว่าอยากให้มีฟังก์ชันอะไร ค่อนข้างเปิดกว้างมาก
ค่อนข้างต้องทำการบ้านอย่างหนักเลยค่ะ ด้วยการ Research ข้อมูลเกี่ยวกับกีฬากอล์ฟว่ามีกิจกรรมอะไรบ้างที่ต้องทำในการเล่นกีฬานี้ เช่น หาสนามไปออกรอบ ไปสนามซ้อม หรือแม้กระทั่งซื้ออุปกรณ์ กติกาการเล่นคร่าว ๆ เป็นยังไง เลยต้องขอความช่วยเหลือจากคุณพ่อ และเพื่อน ๆ ของเขาที่เล่นกอล์ฟจึงมีข้อมูลเรื่องนี้อยู่บ้าง เลยมี User ที่พอจะเป็นผู้ใช้จริงให้สัมภาษณ์ รวมถึงการเก็บข้อมูลจากแหล่งที่ใกล้ตัวรองจากคุณพ่อก็ search engine อย่าง Google มาเป็นข้อมูลประกอบ เพื่อมาวิเคราะห์และกำหนดฟังก์ชันที่จำเป็นต้องมีในแอปพลิเคชันจนได้ wireframe เวอร์ชันแรกออกมาค่ะ
First Wireframe
หลังจากนั้นก็มีการ Discuss กับลูกค้าทั้งเรื่องฟังก์ชันที่ควรจะมีในแอปพลิเคชัน Flow การใช้งานต่าง ๆ อยู่หลายครั้งเลย จนได้ wireframe เวอร์สุดท้ายที่ก่อนจะเป็น prototype จริงออกมา ต้องขออธิบายเพิ่มเติมนะคะว่านักกอล์ฟเช่นกัน เพราะฉะนั้นก็เป็นกลุ่มผู้ใช้จริงที่ให้ feedback การใช้งานได้ค่อนข้างดีเลยละค่ะ
Final Wireframe
เนื่องจากแอปพลิเคชันนี้เป็นของสมาคมกีฬากอล์ฟ (TGA) ค่ะ เลยเลือกออกแบบให้ดูเรียบ ๆ และเน้นการใช้โทนสีเดียวกันกับเว็บไซต์ของสมาคม จะได้มีความเป็น Identity ผู้ใช้จะได้คุ้นชินและรู้ได้ว่าเป็นระบบเดียวกันกับอันเดิม และพวก CI ของสมาคมเป็นหลัก
Photo taken in March 2022
Theme Color
มีความท้าทายอย่างหนึ่งเวลาที่มีสีแดงเป็นสีรองจะไม่ค่อยหยิบมาใช้ค่ะ เพราะสีแดงจะมีความหมายเกี่ยวข้องกับเรื่อง error แต่ถ้ามีสีแดงเป็นสีหลักตรงนี้ก็ไม่ได้หมายความว่าจะเอามาออกแบบไม่ได้นะคะ ก็จะใช้สัญลักษณ์หรือ UX Writing ทำให้ user เข้าใจแทนค่ะ
Font
สมาชิกของสมาคมมีชาวต่างชาติเข้ามาใช้งานเยอะ เลยเลือกใช้ฟอนต์ที่รองรับได้หลายภาษาเพื่อต่อยอดในอนาคตได้
นำ Wireframe ที่ออกแบบไว้มาเพิ่มองค์ประกอบด้าน UI เพื่อปรับให้สมบูรณ์ จากนั้นจึงสร้าง Prototype สำหรับการทดสอบการใช้งานกับกลุ่มผู้ใช้งานค่ะ
ตัวอย่างงานใน Figma
ในโปรเจกต์นี้ เราได้สร้าง Prototype ใน Figma และนำไปทดสอบกับผู้ใช้งาน โดยให้พวกเขาลองกดตาม Flow ที่ออกแบบไว้ พร้อมทั้งสังเกตพฤติกรรมของผู้ใช้ว่าพวกเขาสามารถทำตาม Flow ได้หรือไม่ รวมถึงรับฟังความคิดเห็นและข้อสงสัยที่เกิดขึ้นระหว่างการใช้งาน
ในส่วนนี้ขอแบ่งปันภาพของแอปพลิเคชัน TGA เพื่อให้ได้เห็นภาพผลงานการออกแบบได้มากขึ้น
สามารถใช้งานสามารถโดยดาวน์โหลดได้ทั้งระบบ Android และ iOS
ต้องขอบอกว่าโปรเจกต์นี้เป็น case study ที่ดีอย่างหนึ่งเลยค่ะ เพราะว่าได้เรียนรู้ process การทำงาน UX/UI ตั้งแต่เริ่มต้นทั้งหมดด้วยตัวเองเลย เป็นครั้งแรกที่ต้องวางแผนทุกอย่าง (design process) ว่าแต่ละขั้นตอนที่เราจะต้องทำ เริ่มที่อะไรก่อน
ตั้งแต่เก็บข้อมูลเอาวิเคราะห์ว่าข้อมูลที่เราได้มาจะทำให้งานของเราออกมาเป็นยังไงได้บ้างให้เหมาะกับกลุ่มผู้ใช้งานหลัก หน้าตาของแอปพลิเคชันออกแบบยังไงให้ user ของเราเข้าใจวิธีใช้และดูน่าใช้งาน
ขอเล่าตัวอย่างของ Case study เรื่องการ login และ Register นะคะ แอปที่ผ่านตาส่วนใหญ่ปุ่ม Register จะอยู่ที่หน้า Login คือ ถ้าจะสมัครก็ต้องกดเข้าไปที่หน้า Login ก่อน
ตัวอย่างหน้า login ของ Google
ถ้าเป็นคนที่คุ้นเคยกับการใช้งานแอปพลิเคชันที่มีการสมัครสมาชิกแบบนี้อยู่แล้วก็จะรู้ค่ะว่าปุ่ม Register อยู่ในหน้า Login แต่คนที่สมัครสมาชิกในแอปพลิชันที่ TGA ส่วนใหญ่จะเป็นผู้ใช้ช่วงอายุ 40 50 ไปแล้วค่ะ เลยมีมาถามบ่อย ๆ ว่าต้องกดสมัครตรงไหน ตอนนั้นก็ตกใจอยู่เหมือนกันค่ะ เลยแก้ปัญหาด้วยการเอาออกมาไว้หน้าแรกคู่กันไปเลย
ปุ่มไปหน้า login แบบแรก (ซ้าย) ปุ่มไปหน้า login ที่ได้แก้ไข (ขวา)
ในบางจุดที่เราคิดว่า user น่าจะมีความเคยชินอยู่ และกลุ่มผู้ใช้เราพูดคุยหรือขอ feedback เขาอาจจะไม่ได้ให้มุมมองหรือข้อสงสัย ณ ตรงนั้น ต้องบอกเลยว่าขึ้นกับประสบการณ์การใช้งานของแต่ละคนมาจริง ๆ ค่ะ
อีกอย่างเลยที่รู้สึกว่าตัวเองมีทักษะเพิ่มขึ้น คือ การส่งต่อสิ่งที่เราออกแบบให้ programmer พัฒนาให้ออกมาเหมือนในสิ่งที่เราออกแบบ และต้องการจะสื่อออกมา ต้องขอขอบคุณทีมงานมาก ๆ นะคะที่ร่วมกันทำงานจนได้แอปพลิเคชันที่ชื่อ TGA อันนี้ออกมา
และนอกจากนี้ยังเห็นได้ชัดเลยว่าสิ่งที่เราได้ออกแบบไปนั้น ต่อให้ทดลองกับกลุ่มผู้ใช้ที่เราคิดว่าเป็นเป้าหมายแล้วก็ยังมีจุดที่ให้เราพัฒนาเพิ่มให้ดีขึ้นอีกได้เรื่อย ๆ เราจะเห็นได้มากขึ้นหลังจากที่มีคนเข้ามาใช้งานจริง
