ในบทความนี้ ฉันพูดถึงกระบวนการทำงานของฉันในหนึ่งในโครงการขนาดใหญ่ที่ปรับปรุงเครื่องมือภายในของ Probo (เราเรียกว่า Cerebro ) เพื่อการสนับสนุนลูกค้าที่ดียิ่งขึ้น

เซเรโบรคืออะไร?

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

ส่วนรายละเอียดผู้ใช้คือฐานข้อมูลของผู้ใช้ ซึ่งทีม CX สามารถตรวจสอบข้อมูลเกี่ยวกับข้อร้องเรียนของผู้ใช้และเปลี่ยนกลับเป็นผู้ใช้

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

บทสรุป

การออกแบบส่วนรายละเอียดผู้ใช้ใหม่บน Cerebro เพื่อปรับปรุง UX และประสิทธิภาพการทำงานสำหรับทีมสนับสนุนลูกค้าของ Probo

ทำความเข้าใจกับปัญหา

ทีมสนับสนุนใช้ Cerebro เพื่อตรวจสอบกิจกรรมของผู้ใช้ที่ทำในแอป

สำหรับงานนี้ ก่อนอื่นฉันระบุโฟลว์ผู้ใช้หลัก จากนั้นค้นหาปัญหา UX ในพวกเขา:

ขณะที่ฉันนั่งร่วมกับทีมสนับสนุนเพื่อสังเกตเวิร์กโฟลว์และระบุปัญหาด้านการใช้งาน ฉันได้แก้ไขตั๋วบางส่วนด้วยตัวเอง นี่เป็นช่วงฤดูกาล IPL ที่เราได้รับตั๋วมากกว่า 1,000 ใบต่อผู้บริหารชุมชนหนึ่งคน ดังนั้นภาระงานของพวกเขาจึงมหาศาล

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

ปัญหาหลักที่ระบุ:

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

แอปและเว็บไซต์ของ Probo ได้รับการปรับปรุงใหม่เมื่อไม่กี่เดือนก่อนด้วยการสร้างแบรนด์ใหม่ ซึ่งถึงเวลาแล้วสำหรับเครื่องมือภายในแบบเดียวกัน

มาดู Before vs After ของบางหน้ากัน:

การออกแบบ — ก่อน vs หลัง

ดังนั้นเรามาแยกย่อยการออกแบบใหม่เหล่านี้ทีละรายการ

ก่อน vs หลัง — รายละเอียดการออกแบบ

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

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

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

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

ตอนนี้ดำน้ำในรายละเอียดเพิ่มเติม:

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

นี่คือการออกแบบ Before vs After สำหรับสองตารางที่ซับซ้อนที่สุด - ประวัติยอดคงเหลือและประวัติการค้า

เพื่อทำให้การสแกนข้อมูลง่ายและรวดเร็ว 4 ประเด็นกว้างๆ ได้รับการดูแล:

• ความสามารถในการ สแกนอย่างรวดเร็วสำหรับการค้นหาข้อมูลที่เกี่ยวข้องผ่านการเข้ารหัสสีและการเพิ่มลำดับชั้นและ prox i m i ty เพื่อแยกข้อมูล
• การ จัดกลุ่มข้อมูลที่คล้ายคลึงกันเข้าด้วยกัน
• ขจัดข้อมูลซ้ำ
• จัดเรียงข้อมูลใหม่เพื่อการเปรียบเทียบอย่างรวดเร็ว

มันทำงานอย่างไร?

การออกแบบใหม่พร้อมกับการแก้ไขข้อบกพร่องบางอย่างได้รับการวางแผนสำหรับการพัฒนา และจากผลการทดสอบความสามารถในการใช้งาน คาดว่าจะเพิ่มประสิทธิภาพการทำงานได้ถึง 2 เท่า

เนื่องจากยังอยู่ระหว่างการพัฒนา จึงไม่สามารถแบ่งปันประสิทธิภาพขั้นสุดท้ายและ KPI ได้ในขณะนี้ แต่ฉันจะอัปเดตที่นี่ทันทีที่เผยแพร่

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

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

ป.ล. ฉันยังเรียนรู้ที่จะบันทึกขั้นตอนการออกแบบอย่างสม่ำเสมอ เพราะกรณีศึกษานี้ใช้เวลาเขียนนานเกินไป

อะไรต่อไป?

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

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

ขอบคุณทีมออกแบบที่ยอดเยี่ยมของฉัน ❤️ รวมถึงเจ้าของผลิตภัณฑ์ทุกคนที่ช่วยให้ข้อเสนอแนะและคำแนะนำอันมีค่าแก่ฉันตลอดมา

ขอบคุณที่อ่าน! แล้วพบกันใหม่กับกรณีศึกษา

ทักทาย กับ Nidhi บนLinkedIn • Instagram • Twitter