กรณีศึกษา UI/UX — ปรับปรุง MRT-J

Dec 01 2022
บทนำ โครงการนี้จัดทำขึ้นเพื่อความท้าทายใน UI/UX Design Bootcamp ที่จัดขึ้นโดย Binar Academy นี่คือกรณีศึกษาที่ไม่เกี่ยวข้องกับ MRT จาการ์ตา
Cover Challenge Revamp MRT-J

บทนำ

โครงการนี้จัดทำขึ้นเพื่อความท้าทายใน UI/UX Design Bootcamp ที่จัดขึ้นโดย Binar Academy นี่คือกรณีศึกษาที่ไม่เกี่ยวข้องกับ MRT จาการ์ตา โครงการนี้มีไว้สำหรับโครงการสุดท้าย

ภาพรวม

ปัจจุบัน MRT เป็นระบบขนส่งสาธารณะยอดนิยมในจาการ์ตา ผู้คนใช้ MRT เป็นประจำทุกวัน ดังนั้นจะสะดวกยิ่งขึ้นหากมีแอปที่สร้างมาเพื่อผู้โดยสาร MRT-J หรือที่เราเรียกกันว่า MRT Jakarta เป็นแอปที่สร้างขึ้นสำหรับผู้โดยสาร MRT ซึ่งช่วยให้พวกเขาทำธุรกรรมโดยตรงผ่านสมาร์ทโฟนได้อย่างปลอดภัยและง่ายดาย อย่างไรก็ตาม มีปัญหาบางอย่างที่ผู้ใช้ MRT-J ต้องเผชิญ เช่น ความต้องการการออกแบบ UI ที่เป็นมิตรกับผู้ใช้มากขึ้น ฟีเจอร์การสแกน QR เพื่อวิธีการชำระเงินที่เร็วขึ้น การแจ้งเตือนแบบพุชสำหรับการติดตามแผนที่สด และกระเป๋าเงินในแอปเพื่อช่วยให้ผู้ใช้ประหยัดงบประมาณในการเดินทาง เงิน. ดังนั้น เป้าหมายของทีมเราคือการปรับปรุงการออกแบบ UI อัปเกรดคุณสมบัติ และเพิ่มคุณสมบัติใหม่ให้กับแอพนี้ การวิจัยนี้เป็นความร่วมมือระหว่างทีม UI/UX และทีมผู้จัดการผลิตภัณฑ์

พื้นหลัง

เราต้องการอัปเกรด MRT-J ให้เป็นแอปที่เป็นมิตรต่อผู้ใช้มากขึ้นสำหรับผู้โดยสาร MRT จากการสำรวจโดยทีม PM เปอร์เซ็นต์ความพึงพอใจของลูกค้าสำหรับแอป MRT-J อยู่ที่ 45% เท่านั้น เราต้องการปรับปรุงการออกแบบ UI โฟลว์ และคุณสมบัติเพื่อเพิ่มเปอร์เซ็นต์นี้

บทบาท:

  • Scrum Master: คริสเตียน เฟอร์เรียนโต
  • ผู้จัดการผลิตภัณฑ์: Shelly Salfatira, Muhammad Akbar Syahwana
  • ผู้ออกแบบ UI: Rizqi Ananda
  • นักวิจัย UX: Alexander Justine Santiago , Kirana Norma Chandra

กระบวนการออกแบบ: การคิดเชิงออกแบบ

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

กระบวนการคิดเชิงออกแบบ

1️. เห็นอกเห็นใจ

ในขั้นตอนนี้ เราจะทำ 3 สิ่งหลัก ได้แก่เป้าหมายการวิจัย วัตถุประสงค์การวิจัย และคำถามการวิจัย กระบวนการเริ่มต้นนี้เป็นขั้นตอนในการค้นหาปัญหาของ MRT-J App

แอพที่มีอยู่

การออกแบบที่มีอยู่ของ MRT จาการ์ตา (2565)

วัตถุประสงค์การวิจัย:

ทำความเข้าใจพฤติกรรมของผู้ใช้ในขั้นตอนการซื้อตั๋วและ UI ที่ไม่พึงประสงค์

รีวิว MRT-J บน App Stores และ Play Store

เป้าหมายการวิจัย:

จะออกแบบขั้นตอนการซื้อตั๋วใหม่และปรับปรุง UI

คำถามวิจัย :

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

หลังจากทำการวิจัย เราได้สิ่งที่ผู้ใช้ต้องการ และปล่อยให้เราตั้งสมมติฐานเพื่อสร้างข้อสังเกตเพิ่มเติม

บุคลิกของผู้ใช้

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

บุคลิกของผู้ใช้

2. กำหนด

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

จุดปวด

เมื่อเราเข้าใจ Pain point ของผู้ใช้แล้ว เราจะระบุว่าเราจะแก้ปัญหาเหล่านั้นได้อย่างไร ในการวางแผนจุดหมายพื้นฐานของเรา เราใช้ How-Might-We

เป็นไปได้อย่างไร

3. ความคิด

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

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

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

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

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

คุณสมบัติผังงาน

โครงลวด

หลังจากที่เราทำงานกับโฟลว์ผู้ใช้เสร็จแล้ว เราก็ทำงานบนโครงลวดทันทีโดยใช้ Miro

โครงลวด MRT-J

ระบบการออกแบบ

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

ออกแบบระบบ MRT-J

หลังจากระบบการออกแบบเสร็จสมบูรณ์ ต้นแบบตามระบบการออกแบบและโครงลวดจะถูกสร้างขึ้น

ความเที่ยงตรงสูง MRT-J

ต้นแบบ

รายการประสบการณ์ต้นแบบ:

  • เข้าสู่หน้าจอหลัก
  • สแกนรหัส QR ที่สถานี MRT และตำแหน่งสด
  • เติมเงินในแอป Wallet
  • กิจกรรมประวัติศาสตร์

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

การทดสอบการใช้งาน

การทดสอบเป้าหมาย:คุณสมบัติใหม่ของ MRT-J ตอบสนองความต้องการของผู้ใช้หรือไม่?
คำถามสำคัญ:บทบาทของ MRT-J สำหรับผู้ใช้ MRT

การใช้งาน UT:

  • การทดสอบการใช้งานที่ไม่ผ่านการกลั่นกรองกับผู้ใช้ MRT-J
  • การใช้ "เขาวงกต" สำหรับสถานการณ์และการทดสอบความสามารถในการใช้งาน
  • คำอธิบายทั้งหมดเกี่ยวกับบทนำ กฎ และสถานการณ์อยู่ในเขาวงกต
  • เข้าสู่หน้าจอหลัก
  • สแกน QR Code ที่สถานีรถไฟฟ้า MRT
  • ตำแหน่งสด
  • เติมเงินในแอป Wallet
  • กิจกรรมประวัติศาสตร์
  • ผลเขาวงกต
  • จอแสดงผลที่เข้าถึงได้และใช้งานได้จริง
  • รายละเอียดการทำงานของคุณสมบัติการจ่ายเงิน
  • ขนาดตัวอักษรในเมนู “Aktivitas” ไม่ใหญ่พอ
  • ที่ตั้งรถไฟฟ้าสาย
  • สร้างหน้าบทช่วยสอน

หลังจากวิเคราะห์ปัญหาที่ผู้ใช้ MRT-J ต้องเผชิญ เราพบว่าปัญหาส่วนใหญ่เกิดจาก UI ที่ออกแบบมาไม่ดีและคุณสมบัติที่ต้องแก้ไข หลังจากออกแบบการออกแบบ MRT-J ใหม่ให้ใช้งานง่ายขึ้นและทดสอบต้นแบบรวมถึงคุณสมบัติใหม่ เราพบว่าเวอร์ชันที่ออกแบบใหม่โดยทีมงานของเราได้คะแนนดีเพียงพอจากผู้ใช้ นอกจากนี้ เรายังได้รับข้อเสนอแนะที่ดีจากผู้ใช้ของเรา ซึ่งสามารถช่วยนักพัฒนา MRT-J ในการปรับปรุงแอปของตนให้ดีขึ้นได้

ขอบคุณที่อ่าน หากคุณมีข้อเสนอแนะใด ๆ ฉันอยากได้ยินจากคุณ ทักทายได้ที่[email protected] หรือติดต่อที่Behance , Dribbble , Linkedin