เมื่อการออกแบบตรงตามวิศวกรรมที่ Traveloka

นี่ไม่ใช่เรื่องราวความรักธรรมดา

หมายเหตุ: นี่เป็นเพียงหนึ่งในการโต้ตอบระหว่างการออกแบบและวิศวกรรม ฉันพูดจากการโต้ตอบระหว่างการออกแบบและวิศวกรรมใน Traveloka เล็กน้อย และนี่คือเรื่องราวของฉัน

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

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

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

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

พวกเขาเจอกันครั้งแรกเมื่อไหร่?

การเจรจาเริ่มต้นเมื่อต้นปี 2561 เมื่อทีมวิศวกรรมได้ทำการค้นคว้าเกี่ยวกับ React Native และ React Native Web (React Native เป็นกรอบในการสร้างแอปมือถือโดยใช้ JavaScript) เมื่อการวิจัยเริ่มต้นขึ้นนักพัฒนา Web UI จากทีมออกแบบมีส่วนร่วม

ในระหว่างกระบวนการทีมวิศวกรรมมีแนวคิดที่จะใช้ React Native เป็นฐานในการพัฒนาข้ามแพลตฟอร์ม ซึ่งรวมถึงการพัฒนาเว็บบนมือถือที่ Web UI Developer สามารถสร้างส่วนประกอบขึ้นมาได้

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

ความรักเติบโตอย่างไร

เราเจอกันสองสามครั้งหลังจากนั้น แต่ไม่มีอะไรเกิดขึ้นในใจของเรา แต่แล้วประกายไฟก็เกิดขึ้นเมื่อเรามีผู้ฝึกหัดนี้ ทุกอย่างเริ่มต้นง่ายเหมือนโครงการฝึกงาน

นักศึกษาฝึกงานนี้เป็นวิศวกรของ React Native และมอบหมายให้สร้างสิ่งใดก็ได้ที่สามารถทำให้การทำงานร่วมกันระหว่างการออกแบบและวิศวกรรมเป็นไปอย่างราบรื่น เขาเริ่มสร้างห้องสมุดองค์ประกอบปลั๊กอินร่างที่น่าทึ่งสำหรับนักออกแบบและวิจัยความเป็นไปได้ในการทำงานร่วมกันระหว่างการออกแบบและวิศวกรรม

นอกเหนือจากนั้นทีมงานออกแบบก็มีความคิดริเริ่มที่จะสร้างแหล่งความจริงเดียวบนพื้นฐานของรหัส (SSOT) สำหรับโทเค็นการออกแบบและส่วนประกอบ การเคลื่อนไหวทั้งสองนี้เป็นแรงบันดาลใจให้เราร่วมมือกันในภารกิจนี้ นี่คือที่ที่ประกายไฟแห่งความรักและเราเชื่อว่าเรากำลังวิ่งไปสู่อนาคตที่สดใสด้วยกัน

ความรักทำให้เราอยู่ที่ไหน

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

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

1. ระบบการออกแบบตามรหัส

ความร่วมมือระหว่างการออกแบบและวิศวกรรมนั้นค่อนข้างท้าทาย สะพานเชื่อมระหว่างการออกแบบและรหัสไม่แข็งแรงพอและทำให้การทำงานเป็นเรื่องยากระหว่างเรา

จากนั้นเราก็มีความคิดในการสร้างระบบการออกแบบที่ใช้รหัส เราวางโทเค็นการออกแบบของเราใน JavaScript ซึ่งเป็นวิธีที่ง่ายที่สุดสำหรับวิศวกรในการใช้งาน แต่ก็ยังง่ายพอสำหรับนักออกแบบในการจัดการ

เรากำลังร่วมมือกันในการสร้างส่วนประกอบงานฝีมือของเราเองที่ตรงตามมาตรฐานการออกแบบและวิศวกรรม ส่วนประกอบเหล่านั้นจะถูกใช้บนแพลตฟอร์มทั้งหมดเพื่อสร้างความสอดคล้องในการออกแบบของเรา

2. ร่างปลั๊กอิน

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

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

3. การออกแบบ linter และการทดสอบภาพแบบบูรณาการ

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

4. ออกแบบระบบเอกสาร

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

ภาพประกอบโดย Ralistu Hayu Pratiwi

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

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

“ การออกแบบไม่เพียง แต่ดูเหมือนและให้ความรู้สึก การออกแบบเป็นวิธีการทำงาน”