เมื่อการไหลของผู้ใช้กลายเป็นหัวใจหลักของระบบจัดเก็บสุดทรงพลังใน Figma (และมันไม่ได้หลงทางเหมือนไฟล์บนคอมพิวเตอร์คุณแน่นอน!) 📂

เมื่อ User Flows กลายมาเป็นหัวใจของระบบจัดเก็บไฟล์สุดทรงพลังใน Figma

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

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

สำหรับผู้ที่ไม่คุ้นเคย Bonjour RATP เป็นแอปมือถือที่ทำให้การเดินทางทั่วปารีสและบริเวณรอบ ๆ ง่ายขึ้น มันพยายามที่จะให้ข้อมูลการเดินทางที่ดีที่สุดแบบเรียลไทม์ ลดความยุ่งยากในการซื้อตั๋ว และส่งเสริมการเดินทางที่เป็นมิตรกับสิ่งแวดล้อมในภูมิภาค Île-de-France

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

ปัญหาและการแก้ไข

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

- ไม่มีตรรกะที่ชัดเจนในการตั้งชื่อและโครงสร้างของไฟล์

- มีหลายหน้าจอที่ไม่มีในไฟล์ออกแบบ แต่มันมีอยู่ในแอป

- ประวัติการแก้ไขไฟล์ไม่ชัดเจน บางครั้งมีการออกแบบที่ไม่ตรงกับสิ่งที่อยู่ในแอป

เราจึงต้องการระบบจัดเก็บไฟล์ใหม่ที่เน้น:

1. ง่ายต่อการนำทาง

2. ครอบคลุมทั้งหมด

3. อัปเดตตลอดเวลา

ระบบนี้จะทำให้ทุกคนในทีมมีภาพรวมที่ถูกต้องของประสบการณ์ผู้ใช้ทั้งหมดในแอป

วิธีการจัดระเบียบ

1. แบ่งไฟล์ตามการนำทางของแอป:ไฟล์แต่ละไฟล์จะตรงกับคุณสมบัติหลักที่แตกต่างกัน

2. แบ่งไฟล์ตาม User Flows: สร้างหน้าจอสำหรับแต่ละเส้นทางผู้ใช้ที่แตกต่างกัน

3. แยก User Flows ที่ยาวและซับซ้อนออกเป็นไฟล์เฉพาะ: เพื่อการจัดการที่ง่ายขึ้น

กฎทอง 6 ประการสำหรับ User Flows

1. จุดเริ่มต้นเดียว มีหลายทางออก

2. อ่านจากซ้ายไปขวา บนลงล่าง

3. ใช้ Conditional Nodes ในการแยกความแตกต่าง

4. ออกแบบสำหรับ Android ก่อน แล้วค่อย iOS ถ้าจำเป็น

5. ระบุการโต้ตอบครั้งเดียวพอ

6. กำหนดเส้นทางที่ดีที่สุด (Optimal Path)

เราได้เปิดไฟล์งานของเราใน Figma สำหรับการดูสาธารณะเพื่อให้คุณเข้าใจระบบนี้ได้ดียิ่งขึ้น

พลังของ Figma

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

คำทิ้งท้าย

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

หากคุณมีคำถามหรือต้องการพูดคุยในหัวข้ออื่น ๆ อย่าลังเลที่จะติดต่อเรา ทีมออกแบบ Bonjour RATP จะยินดีที่จะพูดคุยกับคุณ

#UXDesign #FigmaHacks #RATPSmartSystems

อ่านเพิ่มเติม ได้จาก Link นี้ 🔗 : https://medium.com/@RATP_Smart_Systems/how-user-flows-became-the-core-of-our-powerful-filing-system-in-figma-c6c49a5b3eba