Tasarım Traveloka'da Mühendislik ile Buluştuğunda

Bu sıradan bir aşk hikayesi değil.

Not: Bu, Tasarım ve Mühendislik arasındaki etkileşimlerden yalnızca biridir. Traveloka'daki Tasarım ve Mühendislik arasındaki tüm etkileşimlerin küçük bir spektrumundan bahsediyorum. Ve bu benim hikayem.

Zaman geçtikçe, Traveloka 6 yıl civarında olmuştur. Bu yolculukta, düğmeler için farklı turuncu tonları veya kartlar arasındaki tutarsız marjlar gibi uzunca bir süredir var olan görsel hataların olduğunu kabul ediyoruz.

Tasarım ekibi, standartlarımızdan sapan yeni görsel anomalileri önlemek için kendi tasarım kitimizi oluşturarak görsel dilimizi standartlaştırma çabasını başlattı. Biz denedik, ama bir şekilde bu problem hiç çözülmedi. Kendi tasarım kitimize sahip olduktan sonra bile, ürünlerimizdeki görsel tutarsızlıkları hala görüyoruz.

Öte yandan, mühendislerimizin daha verimli çalışması gerekiyor. Yeniden kullanmak üzere aynı bileşeni bulmak için aramak yerine benzer bileşenleri sıfırdan oluşturmayı tercih ederler. Çünkü bu bileşenleri aramak mevcut iş akışlarında sürtünmedir.

Bunca zaman, Tasarım ekibi ve Mühendislik ekibi birbirleriyle iletişim kurmadan kendi sorunlarını çözmeye çalışıyorlardı. Her gün karşılaştığımız sorunu çözmek için birlikte çalışarak Tasarım ve Mühendislik olasılığı üzerine bir soru ortaya attı. Tasarım ve Mühendisliğin el ele yürüyebileceğini ve bu süreçte sevgiyi geliştirebileceğini kim bilebilirdi?

İlk ne zaman tanıştılar?

Görüşmeler, 2018'in başında, Mühendislik ekibinin Yerli Tepki ve Yerli Tepki Tepki ile ilgili bir araştırma yaptığında (Yerli Tepki, JavaScript'i kullanarak mobil uygulamalar oluşturmak için bir çerçevedir) başladı. Bu araştırma başladığında, Tasarım ekibinden Web Kullanıcı Arabirimi Geliştiricileri dahil oldu.

Bu süreç boyunca, Mühendislik ekibi, çapraz platform geliştirme için temel olarak React Native kullanma fikrini buldu. Bu, Web UI Geliştiricisinin üzerinde bileşen oluşturmak için içerebileceği Mobil Web'in geliştirilmesini içerir.

Bu inisiyatif başladığında, React Native'ı öğrenmek ve bundan daha iyi bir etki yapmak ve mevcut tüm platformlar için tek bir kod kaynağından bileşenler oluşturmak için elimizden gelenin en iyisini yapmaktan heyecan duyduk. Ve burası birbirimizi ilk tanıdığımız yer.

Aşk nasıl büyüdü?

Ondan sonra birkaç kez tanıştık, ama kalbimizde hiçbir şey yolunda gitmedi. Ama sonra, bu stajyer olduğunda kıvılcım ortaya çıkar. Her şey bir stajyer projesi kadar kolay başladı.

Bu stajyer bir Tepki Yerlisi mühendisi ve Tasarım ve Mühendislik arasındaki işbirliğini yumuşatacak her şeyi inşa etmek için görevlendirildi. Bir bileşen kütüphanesi, tasarımcılar için kafa karıştırıcı eskiz eklentileri oluşturmaya ve Tasarım ve Mühendislik arasındaki diğer işbirliği olanaklarını araştırmaya başladı.

Bunun yanı sıra, Tasarım ekibi, tasarım belirteçleri ve bileşenleri için kod tabanlı tek bir doğruluk kaynağı (SSOT) oluşturma girişiminde bulundu. Bu iki hareket bize bu görevde işbirliği yapma konusunda ilham verdi. Burası sevginin püskürtüldüğü yerdir ve birlikte daha parlak bir geleceğe girdiğimize inanıyoruz.

Aşk bizi nereye götürdü?

Birkaç kez çıktıktan sonra (okuma: toplantı), ilişkimizi bir sonraki seviyeye çıkarmayı kabul ediyoruz. Yürümek kolay bir yol değildi, ama bunun bizim için doğru olduğuna inandık. Birbirini anlamak, iyi bir ilişkinin temel anahtarıdır, değil mi? Ve işbirliğine karar verdiğimizde yaptığımız şey buydu.

Birbirimizin nasıl çalıştığını anlayarak başladık. Ve bu gecelerden sonra kabuslar ve engellerle dolu yollardan sonra nihayet daha iyi işbirliğine gidiyoruz. Tasarım ve Mühendislik arasında daha iyi bir işbirliğine ulaşmak için verdiğimiz taahhütler:

1. Kod tabanlı tasarım sistemi.

Tasarım ve Mühendislik arasındaki işbirliği oldukça zor olmuştur. Tasarım ve kod arasındaki köprü yeterince güçlü değil ve aramızdaki işleri zorlaştırdı.

Daha sonra kod tabanlı bir tasarım sistemi oluşturma fikrini elde ettik. Tasarım kodumuzu, mühendisin yararlanmasının en kolay yolu olan, ancak tasarımcının yönetmesi için yeterince basit olan JavaScript'e koyduk.

Tasarım ve Mühendislik standartlarını karşılayan el yapımı bileşenlerimizi oluşturmak için işbirliği yapıyoruz. Bu bileşenler tasarımımızda tutarlılık sağlamak için tüm platformlarda kullanılacaktır.

2. Çizim eklentileri.

Bu Sketch eklentileri tasarım ve kodlar arasındaki köprü gibi çalışır. Tasarım tarafında, bu işbirliğini kolaylaştırır, çünkü tasarımcıların aynı bileşenleri tekrar tekrar üretmeleri gerekmez. Bu aynı zamanda tasarımcının standart bileşenlere dayanarak kullanıcı arayüzünü oluşturmasına yardımcı olacaktır.

Mühendislik tarafında, bu eklenti kullanıcı arayüzünü mühendis tarafından kolayca uygulanabilecek kodlara çevirir. Bu, mühendisin çalışma süresini kısaltacaktır, çünkü önceki tasarımdaki mevcut bileşenleri aramaları gerekmez.

3. Tasarım linter ve entegre görsel test.

Kullanıcı arayüzü ve kod ile çalıştıktan sonra, bir sonraki adım her ikisinin de standartlaştırıldığından emin olmaktır. Tasarım Linter ve entegre görsel test yer aldı. Şu anda hem kullanıcı arayüzümüz hem de kodlarımız için bir güvenlik ağı gibi çalışmak üzere tasarım linter ve entegre görsel test geliştirme olasılığını araştırıyoruz. Tasarım açısından, tasarım linter UI Designer'ı standart bileşenler kullanmaya teşvik edecektir. Bu arada, mühendislik tarafından yapılan görsel testler, ürün piyasaya sürüldüğünde görsel anormallik olasılığını azaltacaktır. Bu, gelecekte tasarımcı ve mühendisin hayatını kolaylaştıracak.

4. Sistem dokümantasyonunu tasarlayın.

Farklı ekiple işbirliği yaptığınızda, her ikisine de başvurabileceğiniz bir kılavuza sahip olmak güzeldir. Tasarım sistemi dokümantasyonu, Ürün Yöneticileri, mühendis ve diğer tasarımcılar da dahil olmak üzere tüm paydaşlar tarafından erişilebilen tasarım incili olarak çalışır. Bu, bir tasarım kararının neden alındığı konusunda herkesin aynı panoda olduğundan emin olmak için önemlidir. Bu, aynı zamanda, her tasarım dikkatlice düşünülerek yapıldığından, takım arasındaki tasarım uyuşmazlığının önlenmesine yardımcı olacaktır.

Çizim Ralistu Hayu Pratiwi

Tüm bu bebek adımlarıyla birlikte, gelecekte daha iyi işbirliği ve birbirimizle entegrasyon sağlayabileceğimize inanıyoruz. İşbirliği ayrıca daha iyi ürünler yaratmak için olanaklar sunacak.

Sonunda, bir ürünü tasarlamak sadece nasıl güzel ve ilginç görünmesini sağlamıyor. Ayrıca, tasarımın kusursuz çalışmasını sağlamak için birçok mühendislik çalışması vardır. Bu, Tasarım ve Mühendislik arasındaki işbirliğinin önemini göstermektedir; iyi bir ürün oluşturmak için birbirimiz olmadan yaşayamayacağımız gibi. Steve Jobs'un dediği gibi

“Tasarım sadece göründüğü ve hissettirdiği şey değildir. Tasarım nasıl çalıştığıdır. ”