Khi Thiết kế gặp gỡ Kỹ thuật tại Traveloka

Đây không phải là một câu chuyện tình yêu thông thường.

Lưu ý: Đây chỉ là một trong những tương tác giữa Thiết kế và Kỹ thuật. Tôi đang nói từ một phổ nhỏ của tất cả các tương tác giữa Thiết kế và Kỹ thuật trong Traveloka. Và đây là câu chuyện của tôi.

Thời gian trôi qua, Traveloka đã tồn tại được 6 năm. Trong hành trình này, chúng tôi thừa nhận rằng chúng tôi có rất nhiều lỗi hình ảnh đã tồn tại khá lâu, như các sắc thái khác nhau của màu cam cho các nút hoặc lề không nhất quán giữa các thẻ.

Nhóm thiết kế đã khởi xướng nỗ lực chuẩn hóa ngôn ngữ hình ảnh của chúng tôi bằng cách xây dựng bộ thiết kế của riêng chúng tôi để ngăn chặn bất kỳ sự dị thường hình ảnh mới nào lệch khỏi tiêu chuẩn của chúng tôi. Chúng tôi đã cố gắng, nhưng bằng cách nào đó vấn đề này không bao giờ giải quyết. Ngay cả sau khi chúng tôi có bộ thiết kế riêng, chúng tôi vẫn thấy những mâu thuẫn thị giác trên các sản phẩm của chúng tôi.

Mặt khác, các kỹ sư của chúng tôi cần phải làm việc hiệu quả hơn. Họ thích xây dựng các thành phần tương tự từ đầu thay vì tìm kiếm để tìm ra thành phần tương tự để tái sử dụng. Bởi vì tìm kiếm các thành phần này là một ma sát trong quy trình làm việc hiện tại của họ.

Tất cả những lần này, nhóm Thiết kế và nhóm Kỹ thuật đã cố gắng giải quyết vấn đề của riêng họ mà không liên lạc với nhau. Nó đặt ra câu hỏi về khả năng Thiết kế và Kỹ thuật làm việc cùng nhau để giải quyết vấn đề mà cả hai chúng ta gặp phải mỗi ngày. Ai biết rằng Thiết kế và Kỹ thuật có thể đi tay trong tay và phát triển tình yêu trong quá trình này?

Lần đầu tiên họ gặp nhau là khi nào?

Cuộc hội đàm bắt đầu vào đầu năm 2018 khi nhóm Kỹ thuật thực hiện một số nghiên cứu về React Native và React Native Web (React Native là một khuôn khổ để xây dựng các ứng dụng di động sử dụng JavaScript). Khi nghiên cứu này bắt đầu, các nhà phát triển giao diện người dùng web từ nhóm Thiết kế đã tham gia.

Trong quá trình này, nhóm Engineering đã có ý tưởng sử dụng React Native làm cơ sở để phát triển đa nền tảng. Điều này bao gồm sự phát triển của Mobile Web trong đó Web UI Developer có thể liên quan để tạo các thành phần trên nó.

Khi sáng kiến ​​này bắt đầu, chúng tôi đã rất hào hứng khi học React Native và tận dụng tốt nhất vì chúng tôi có thể tạo ra tác động đáng kể hơn và tạo các thành phần cho tất cả nền tảng có sẵn từ một nguồn mã duy nhất. Và đây là nơi đầu tiên chúng ta làm quen với nhau.

Tình yêu lớn lên như thế nào?

Chúng tôi đã gặp nhau một vài lần sau đó, nhưng không có gì nổi lên trong tim. Nhưng sau đó, tia lửa nổi lên khi chúng tôi có thực tập sinh này. Tất cả bắt đầu đơn giản như một dự án thực tập.

Thực tập sinh này là một kỹ sư React Native và được giao xây dựng bất cứ thứ gì có thể làm trơn tru sự hợp tác giữa Thiết kế và Kỹ thuật. Ông bắt đầu xây dựng một thư viện thành phần, một số bổ sung phác thảo cho các nhà thiết kế và nghiên cứu các khả năng hợp tác khác giữa Thiết kế và Kỹ thuật.

Bên cạnh đó, nhóm Thiết kế cũng có sáng kiến ​​tạo ra một nguồn sự thật (SSOT) dựa trên mã cho các mã thông báo và các thành phần thiết kế. Hai phong trào này đã truyền cảm hứng cho chúng tôi hợp tác trong nhiệm vụ này. Đây là nơi tình yêu tia lửa, và chúng tôi tin rằng chúng ta đang cùng nhau hướng đến một tương lai tươi sáng hơn.

Tình yêu dẫn chúng ta đi đâu?

Sau vài lần hẹn hò (đọc: gặp gỡ), cuối cùng chúng tôi cũng đồng ý đưa mối quan hệ của chúng tôi lên một tầm cao mới. Nó không phải là một con đường dễ dàng để đi bộ, nhưng chúng tôi tin rằng đây là một trong những phù hợp với chúng tôi. Hiểu nhau là chìa khóa thiết yếu cho một mối quan hệ tốt, phải không? Và đó là những gì chúng tôi đã làm khi chúng tôi quyết định hợp tác.

Chúng tôi bắt đầu bằng cách hiểu cách làm việc của nhau. Và sau những đêm đầy ác mộng và những con đường đầy chướng ngại vật, cuối cùng chúng ta cũng hướng tới sự hợp tác tốt hơn. Dưới đây là các cam kết của chúng tôi để đạt được sự hợp tác tốt hơn giữa Thiết kế và Kỹ thuật:

1. Hệ thống thiết kế dựa trên mã.

Sự hợp tác giữa Thiết kế và Kỹ thuật đã khá khó khăn. Cầu nối giữa thiết kế và mã không đủ mạnh và nó khiến công việc trở nên khó khăn giữa chúng tôi.

Sau đó chúng tôi có ý tưởng để tạo ra một hệ thống thiết kế dựa trên mã. Chúng tôi đặt mã thông báo thiết kế của mình vào JavaScript, đây là cách dễ nhất để kỹ sư sử dụng, nhưng vẫn đủ đơn giản để nhà thiết kế quản lý.

Chúng tôi đang hợp tác để xây dựng các bộ phận thủ công của riêng chúng tôi đáp ứng tiêu chuẩn Thiết kế và Kỹ thuật. Những thành phần đó sẽ được sử dụng trên tất cả các nền tảng để thiết lập tính nhất quán trên thiết kế của chúng tôi.

2. Các plugin phác thảo.

Các plugin phác thảo này hoạt động giống như cầu nối giữa thiết kế và mã. Về mặt Thiết kế, điều này làm cho việc cộng tác trở nên dễ dàng hơn vì các nhà thiết kế không cần phải tạo ra các thành phần tương tự lặp đi lặp lại. Điều này cũng sẽ giúp nhà thiết kế xây dựng giao diện người dùng của họ dựa trên các thành phần được tiêu chuẩn hóa.

Về phía Kỹ thuật, plugin này sẽ dịch giao diện người dùng thành các mã có thể dễ dàng thực hiện bởi kỹ sư. Điều này sẽ cắt giảm thời gian làm việc của kỹ sư vì họ không cần phải tìm kiếm các thành phần hiện có từ thiết kế trước đó.

3. Thiết kế kẻ nói dối và thử nghiệm hình ảnh tích hợp.

Sau khi làm việc với giao diện người dùng và mã, bước tiếp theo là đảm bảo rằng cả hai đều được chuẩn hóa. Đây là nơi mà kẻ nói dối thiết kế và thử nghiệm hình ảnh tích hợp đã tham gia. Chúng tôi hiện đang nghiên cứu khả năng phát triển kẻ nói dối thiết kế và thử nghiệm trực quan tích hợp để hoạt động như một mạng lưới an toàn cho cả giao diện và mã người dùng của chúng tôi. Từ phía thiết kế, kẻ nói dối thiết kế sẽ khuyến khích UI Designer sử dụng các thành phần được tiêu chuẩn hóa. Trong khi đó từ phía kỹ thuật, thử nghiệm trực quan sẽ làm giảm khả năng dị thường thị giác khi sản phẩm được phát hành. Điều này sẽ làm cho cuộc sống của cả nhà thiết kế và kỹ sư trở nên dễ dàng hơn trong tương lai.

4. Tài liệu thiết kế hệ thống.

Khi cộng tác với các nhóm khác nhau, thật tốt khi có một hướng dẫn mà cả hai bạn có thể tham khảo. Tài liệu hệ thống thiết kế hoạt động như kinh thánh thiết kế mà tất cả các bên liên quan có thể truy cập, bao gồm Quản lý sản phẩm, kỹ sư và nhà thiết kế đồng nghiệp. Điều này rất quan trọng để đảm bảo rằng tất cả mọi người đều ở trên cùng một bảng về lý do tại sao quyết định thiết kế được đưa ra. Điều này cũng sẽ giúp tránh mọi bất đồng về thiết kế giữa nhóm vì mọi thiết kế đều được thực hiện chu đáo với sự cân nhắc kỹ lưỡng.

Minh họa bởi Ralistu Hayu Pratiwi

Với tất cả các bước bé này, chúng tôi tin rằng chúng tôi có thể hợp tác và hòa nhập tốt hơn trong tương lai với nhau. Sự hợp tác cũng sẽ mở ra những khả năng để tạo ra những sản phẩm tốt hơn.

Cuối cùng, thiết kế một sản phẩm không chỉ là cách làm cho nó trông đẹp và thú vị. Ngoài ra còn có rất nhiều nỗ lực kỹ thuật để làm cho thiết kế hoạt động hoàn hảo. Điều này cho thấy tầm quan trọng của sự hợp tác giữa Thiết kế và Kỹ thuật; vì chúng ta có thể sống mà không cần nhau để xây dựng một sản phẩm tốt. Như Steve Jobs đã nói,

Thiết kế không chỉ là những gì nó trông giống như và cảm thấy như thế nào. Thiết kế là cách nó hoạt động."