Skillvul Challenge: Mentor on Demand — กรณีศึกษา UI/UX

Nov 27 2022
ข้อจำกัดความรับผิดชอบ: กรณีศึกษานี้เป็นส่วนหนึ่งของการท้าทาย Mentor on Demand จากโปรแกรม Skilvul: UI/UX Design Mastery พื้นหลัง Skilvul เป็นแพลตฟอร์มการศึกษาที่ใช้เทคโนโลยีซึ่งจัดเตรียมสื่อการเรียนรู้ออนไลน์ผ่านเนื้อหาแบบโต้ตอบ วิดีโอตามความต้องการ และที่ปรึกษาตามความต้องการ Mentor on Demand เป็นบริการบน Skillvul ที่ช่วยให้นักเรียนจองเซสชันกับพี่เลี้ยงเพื่อช่วยให้เรียนรู้การเขียนโค้ดและ UI/UX

ข้อจำกัดความรับผิดชอบ: กรณีศึกษานี้เป็นส่วนหนึ่งของการแข่งขัน Mentor on Demand จากโปรแกรม Skilvul: UI/UX Design Mastery

พื้นหลัง

Skilvul เป็นแพลตฟอร์มการศึกษาที่ใช้เทคโนโลยีซึ่งให้บริการสื่อการเรียนรู้ออนไลน์ผ่านเนื้อหาแบบโต้ตอบ วิดีโอออนดีมานด์ และที่ปรึกษาตามความต้องการ Mentor on Demand เป็นบริการบน Skillvul ที่ช่วยให้นักเรียนจองเซสชันกับพี่เลี้ยงเพื่อช่วยให้เรียนรู้การเขียนโค้ดและ UI/UX ปัญหาของบริการนี้คือระบบหลักสูตรออนไลน์โดยทั่วไปมีจำนวนอาจารย์ที่ปรึกษาไม่สมส่วนกับจำนวนนักศึกษา จึงทำให้อาจารย์มีเวลาสื่อสารกับนักศึกษาทีละคนอย่างจำกัด ทำให้นักศึกษารู้สึกว่าไม่ได้รับคำแนะนำอย่างเต็มที่ ดังนั้นบริการนี้จึงตอบโจทย์เหล่านี้ได้ ไม่เพียงแต่สำหรับนักเรียนเท่านั้น Skillvul ยังมีปุ่ม "ลงทะเบียน" สำหรับนักพัฒนาที่มีประสบการณ์เพื่อเป็นที่ปรึกษา เมื่อการลงทะเบียนได้รับการยอมรับ ชื่อผู้ให้คำปรึกษาและรายละเอียดอื่น ๆ จะปรากฏบนหน้าผู้ให้คำปรึกษา

เป้าหมายที่ Skillvul ต้องการบรรลุมีดังนี้:

  • การลงทะเบียนสำหรับพี่เลี้ยง
  • นักเรียนสามารถเลือกที่ปรึกษาและค้นหาค่าใช้จ่ายได้
  • หน้าชำระเงิน
  • รายละเอียดโดยย่อสำหรับโปรไฟล์ที่ปรึกษา
  1. ระบุประสิทธิภาพของการลงทะเบียนที่ปรึกษา การจ้างที่ปรึกษา และกระแสการให้คำปรึกษาส่วนตัว
  2. รู้ระดับความพึงพอใจของผู้ใช้กับการจ้างที่ปรึกษาและคุณสมบัติการให้คำปรึกษาส่วนตัว
  3. รู้ระดับความสะดวกของผู้ใช้ต่อการลงทะเบียนที่ปรึกษาและขั้นตอนการชำระเงิน
  4. ทราบถึงความเหมาะสมของคุณลักษณะการแจ้งเตือนกับความต้องการของผู้ใช้

ฉันทำงานเป็นนักออกแบบ UI/UX ร่วมกับสมาชิกในทีม 3 คน คือAbdul Aziz Muhammad Ghifari , Farid Ajie Syahputraและ20-106 Dara Fadilah ในโครงการนี้เรารับผิดชอบร่วมกัน

  1. ค้นหาข้อมูลเกี่ยวกับบริการให้คำปรึกษาที่จำเป็นสำหรับผู้ใช้เป้าหมาย
  2. ระดมความคิดและคุณสมบัติแนวคิดจากผลงานวิจัย
  3. สร้างโฟลว์คุณลักษณะที่เป็นมิตรต่อผู้ใช้
  4. การออกแบบส่วนต่อประสานเว็บไซต์และคุณสมบัติล่าสุดด้วยการออกแบบที่ใช้งานง่ายและเป็นไปตามลักษณะของ Skillvul
  5. สร้างต้นแบบเชิงโต้ตอบที่ใช้งานง่าย
  6. ทำการสัมภาษณ์ผู้ใช้เพื่อค้นหาข้อดีและข้อเสียของคุณสมบัติล่าสุด

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

1 — เอาใจใส่

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

ก. การวิจัยเบื้องต้น

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

  • การวิจัยผู้ใช้กระตุ้น
  • สัมภาษณ์
  • การวิจัยเบื้องต้นแบบสัมภาษณ์เชิงลึก

สามารถชมวิดีโอสัมภาษณ์ได้ที่ลิงค์ด้านล่าง

  • บันทึกข้อมูล
บันทึกข้อมูลการวิจัยผู้ใช้

2 — กำหนด

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

ก. จุดปวด

Pain point เป็นจุดรวมของปัญหาที่เราต้องแก้ไข จากผลการสัมภาษณ์ในการวิจัยเบื้องต้น เราสามารถระบุปัญหาและความยากลำบากเฉพาะที่ผู้ใช้ต้องเผชิญ ในขั้นตอนนี้ ปัญหาต่างๆ จะถูกจัดกลุ่มเป็นหมวดหมู่ ซึ่งจะถูกเลือกโดยการลงคะแนนเสียงของสมาชิกในกลุ่ม สมาชิกแต่ละคนสามารถลงคะแนนได้สูงสุด 3 ประเด็น หัวข้อที่ได้รับการโหวตมากที่สุดจะได้เข้าสู่เวที How-might we

จุดปวด

ข. เราอาจเป็นอย่างไร

How-Might We คือเวทีที่เราเปลี่ยนปัญหาที่มีอยู่ให้เป็นคำถาม คำถามสามารถครอบคลุมปัจจัยที่มีอิทธิพลต่อการออกแบบและคุณสมบัติต่างๆ แต่หลีกเลี่ยงการบอกใบ้เป็นนัยหรือวิธีแก้ปัญหา เพื่อให้เราสามารถสำรวจแนวคิดในการแก้ปัญหาได้อย่างอิสระและไม่จมอยู่กับคำตอบโดยนัย ในขั้นตอนนี้ นักออกแบบคาดว่าจะมีแรงจูงใจในการแสวงหาวิธีแก้ปัญหาที่นำเสนออย่างแข็งขัน

เราอาจเป็นอย่างไร

3 — ไอเดีย

Ideate เป็นกระบวนการสร้างแนวคิดและแนวคิดใหม่ในวงกว้างตามหัวข้อเฉพาะ ในขั้นตอนนี้เราต้องตอบปัญหาของผู้ใช้ด้วยวิธีแก้ปัญหาที่สร้างสรรค์ เป้าหมายหลักของ Ideate คือการเปิดมุมมองและแนวคิดที่ไม่เคยมีใครทำมาก่อน

ก. แนวคิดการแก้ปัญหา

จากคำถามที่เกิดขึ้นในเวที how-may เราสามารถนึกถึงแนวคิดการแก้ปัญหาได้มากที่สุดเท่าที่จะเป็นไปได้แต่ยังอยู่ในขอบเขตของปัญหา ขั้นตอนแนวคิดการแก้ปัญหาช่วยให้เราตรวจสอบและทดสอบแนวคิดของเรา เพื่อให้เราสามารถหาวิธีที่ดีที่สุดในการแก้ปัญหา ในขั้นตอนนี้ เราแบ่งแนวคิดการแก้ปัญหาออกเป็น 3 ประเภท ได้แก่ การลงทะเบียนผู้ให้คำปรึกษา คุณลักษณะการให้คำปรึกษาส่วนตัว และคุณลักษณะด้านสุขอนามัย

แนวคิดการแก้ปัญหา

ข. แนวคิดการจัดลำดับความสำคัญ

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

เมทริกซ์การจัดลำดับความสำคัญ

4 — การสร้างต้นแบบ

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

ก. การไหลของผู้ใช้

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

ข. โครงลวด

Wireframe เป็นกรอบหน้าสำหรับการออกแบบเค้าโครงของรายการหรือคุณสมบัติบนเว็บไซต์ รายการที่เกี่ยวข้องหมายถึงข้อความ รูปภาพ ปุ่ม ฯลฯ Wireframe มีวัตถุประสงค์เพื่อให้ภาพรวมของแนวคิดและรูปลักษณ์ของเว็บไซต์โดยทั่วไป ดังนั้นเราจึงจำเป็นต้องสร้างโครงร่างธรรมดาที่ประกอบด้วยกล่อง เส้น และข้อความโดยไม่มีสี โดยคำนึงถึงความต้องการและการไหลของผู้ใช้ ในการออกแบบโครงลวดนี้ เราจำเป็นต้องตรวจสอบทุกองค์ประกอบบนเว็บไซต์ Skivul เพื่อปรับขนาดและรูปร่าง

ค. ระบบการออกแบบ

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

ง. การออกแบบ UI

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

อี ต้นแบบ

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

การสร้างต้นแบบในการออกแบบ Figma

ฉ. ต้นแบบเชิงโต้ตอบ Mockup ดิจิทัล

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

5 — การทดสอบ

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

ก. การเตรียมการวิจัยผู้ใช้

  • การวิจัยผู้ใช้กระตุ้น

ข. ปฏิบัติการวิจัยผู้ใช้

  • สัมภาษณ์
การทดสอบการสัมภาษณ์เชิงลึก

คุณสามารถรับชมวิดีโอสัมภาษณ์ได้ที่ลิงค์ด้านล่าง:

  • บันทึกข้อมูล
การวิจัยผู้ใช้บันทึกข้อมูล

บทสรุป

Skilvul เป็นแพลตฟอร์มการศึกษาที่ใช้เทคโนโลยีซึ่งนำเสนอเนื้อหาการเรียนรู้ด้านไอทีโดยใช้วิธีการเรียนรู้แบบผสมผสาน Skilvul มีบริการ Mentor on Demand ที่ช่วยให้นักเรียนจองเซสชันกับที่ปรึกษาเพื่อช่วยเรียนรู้การเขียนโค้ดและ UI/UX แต่การบริการยังไม่เหมาะสม ทำให้เกิดปัญหากับนักศึกษาและอาจารย์ที่ปรึกษา เพื่อแก้ปัญหานี้ Skillvul จำเป็นต้องเพิ่มฟีเจอร์ Mentor on Demand เพื่อเพิ่มประสบการณ์และความสะดวกสบายในการเรียนรู้และการสอน เรากำลังดำเนินการเพื่อให้คุณลักษณะเหล่านั้นเกิดขึ้นผ่านโครงการนี้ เราได้ออกแบบเว็บไซต์ข้างต้นให้ดีที่สุดเท่าที่จะเป็นไปได้เพื่อสร้างประสบการณ์ที่ดีให้กับผู้ใช้ที่มีศักยภาพ ในกระบวนการนี้ เราผ่านหลายสิ่งหลายอย่าง เริ่มตั้งแต่ความยุ่งที่หลีกเลี่ยงไม่ได้ของสมาชิกแต่ละคน บล็อกศิลปะ การสูญเสียแรงจูงใจ และอื่นๆ อีกมากมาย อย่างไรก็ตาม, ในที่สุดเราก็สามารถฝ่าฟันไปได้และจบโปรเจ็กต์นี้ไปได้ด้วยดี จากโครงการนี้เราได้รับความรู้และทักษะมากมาย เช่น การทำงานเป็นทีม การออกแบบ การคิดวิเคราะห์และสร้างสรรค์ การสื่อสาร และอื่นๆ อีกมากมาย แม้ว่าจะไม่สมบูรณ์แบบ แต่เราหวังว่าผลลัพธ์ที่ได้รับจะสามารถสร้างแรงบันดาลใจให้กับผู้อ่านได้

คำแนะนำถัดไป

หลังจากผ่านกระบวนการวิจัยเบื้องต้น การคิดเชิงออกแบบ และการวิจัยผู้ใช้แล้ว เราพบวิธีแก้ปัญหาสำหรับการพัฒนาคุณสมบัติเว็บไซต์ Skills ดังนี้:

  1. อัปเดตรูปลักษณ์เพื่อให้ใช้งานได้สะดวกยิ่งขึ้นสำหรับผู้ใช้ (การแจ้งเตือน)
  2. เพิ่มคุณสมบัติที่สามารถช่วยเหลือผู้ใช้แต่ยังไม่มี (ปุ่มย้อนกลับในหน้าป๊อปอัพเลือกกำหนดการและกำหนดเวลาใหม่)
  3. การออกแบบคุณสมบัติใหม่ที่รู้สึกว่ามีประสิทธิภาพน้อยลง (ตัวกรองราคาที่ปรึกษา)