Travelokaでデザインとエンジニアリングが一致するとき

これは普通のラブストーリーではありません。

注:これは、設計とエンジニアリングの相互作用の1つにすぎません。 Travelokaでの設計とエンジニアリングのすべての相互作用の1つの小さなスペクトルから話しています。これが私の話です。

時が経つにつれて、Travelokaは6年前から存在しています。この旅では、ボタンのオレンジ色の濃淡やカード間のマージンの不一致など、かなり以前から存在していた多くの視覚的なバグがあることを認めています。

設計チームは、独自の設計キットを構築して、標準から逸脱した新しい視覚的な異常を防ぐことにより、視覚言語を標準化する取り組みを開始しました。試しましたが、どういうわけかこの問題は解決しませんでした。独自のデザインキットを作成した後でも、製品の視覚的な不一致が見られます。

一方、エンジニアはより効率的に作業する必要があります。同じコンポーネントを検索して再利用するのではなく、最初から同様のコンポーネントを構築することを好みます。これらのコンポーネントの検索は、現在のワークフローでの摩擦であるためです。

これらすべての時間において、設計チームとエンジニアリングチームは、互いに通信することなく、独自の問題を解決しようとしていました。それは、デザインとエンジニアリングが協力して、私たち両方が毎日遭遇する問題を解決する可能性についての質問を引き起こしました。デザインとエンジニアリングが手を携えて歩み、その過程で愛を育てることができることを誰が知っていましたか?

彼らは最初に会ったのはいつですか?

講演は、エンジニアリングチームがReact NativeとReact Native Web(React NativeはJavaScriptを使用してモバイルアプリを構築するためのフレームワーク)についていくつかの研究を行った2018年の初めに始まりました。この調査が始まると、デザインチームのWeb UI開発者が関与しました。

プロセス中、エンジニアリングチームは、クロスプラットフォーム開発のベースとしてReact Nativeを使用するというアイデアを思いつきました。これには、Web UI開発者がモバイルコンポーネントの作成に関与できるモバイルWebの開発が含まれます。

このイニシアチブが始まったとき、React Nativeを学び、それを最大限に活用できることに興奮しました。より大きな影響を与え、単一のコードソースから利用可能なすべてのプラットフォームのコンポーネントを作成できるからです。そして、これは私たちが最初にお互いを知ることになる場所です。

愛はどのように成長しましたか?

その後数回会いましたが、心に火がつきました。しかし、その後、このインターンがあると火花が出ます。それはすべて、インターンプロジェクトと同じくらい簡単に始まりました。

このインターンはReact Nativeエンジニアであり、設計とエンジニアリングの間のコラボレーションを円滑にすることができるものを構築するために割り当てられます。彼は、コンポーネントライブラリ、デザイナー向けの驚くべきスケッチプラグインの構築を始め、デザインとエンジニアリングの間の他のコラボレーションの可能性を調査しました。

それとは別に、設計チームは、設計トークンとコンポーネントのコードベースの単一の真実の情報源(SSOT)を作成するイニシアチブも持っていました。これらの2つの動きは、このミッションで協力するように私たちを刺激しました。ここが愛の火花であり、私たちは一緒に明るい未来に向かっていると信じています。

愛は私たちをどこに導いたのですか?

数回デートした後(読んで:会議)、私たちは最終的に関係を次のレベルに引き上げることに同意します。歩くのは簡単ではありませんでしたが、これは私たちにとって正しいものであると信じていました。お互いを理解することは、良い関係を築くための重要な鍵ですよね?そして、それが私たちが協力することにしたときのことです。

私たちは、お互いがどのように機能するかを理解することから始めました。そして、悪夢に満ちたこれらの夜と障害物に満ちた道路の後、私たちは最終的により良いコラボレーションに向かっています。設計とエンジニアリングの間のより良いコラボレーションを達成するためのコミットメントは次のとおりです。

1.コードベースの設計システム。

設計とエンジニアリングのコラボレーションは非常に困難です。設計とコードの橋渡しは十分に強力ではなく、作業が困難になりました。

次に、コードベースの設計システムを作成するというアイデアを得ました。設計トークンをJavaScriptに入れます。これは、エンジニアにとって最も使いやすい方法ですが、設計者にとってはまだ管理が簡単です。

私たちは、デザインとエンジニアリングの標準を満たす独自の手作りコンポーネントを構築するために協力しています。これらのコンポーネントはすべてのプラットフォームで使用され、設計の一貫性を確立します。

2.プラグインをスケッチします。

このSketchプラグインは、デザインとコードの橋渡しのように機能します。設計側では、デザイナーが同じコンポーネントを繰り返し生成する必要がないため、コラボレーションが容易になります。これは、設計者が標準化されたコンポーネントに基づいてユーザーインターフェイスを構築するのにも役立ちます。

エンジニアリング側では、このプラグインはユーザーインターフェイスを、エンジニアが簡単に実装できるコードに変換します。これにより、以前の設計から既存のコンポーネントを検索する必要がないため、エンジニアの作業時間が短縮されます。

3.リンターと統合視覚テストを設計します。

ユーザーインターフェイスとコードを使用した後、次の手順は、両方が標準化されていることを確認することです。これは、設計リンターと統合視覚テストが参加した場所です。現在、デザインリンターと統合ビジュアルテストを開発して、ユーザーインターフェイスとコードの両方に対するセーフティネットのように機能する可能性を調査しています。デザインサイドから、デザインリンターはUI Designerが標準化されたコンポーネントを使用することを奨励します。一方、エンジニアリング側から見ると、視覚テストにより、製品のリリース時に視覚異常が発生する可能性が低くなります。これにより、将来デザイナーとエンジニアの両方の生活が楽になります。

4.システムのドキュメントを設計します。

別のチームと協力する場合、両方が参照できるガイドラインがあると便利です。設計システムのドキュメントは、プロダクトマネージャー、エンジニア、仲間のデザイナーを含むすべての利害関係者がアクセスできる設計聖書として機能します。これは、設計決定が行われる理由について全員が同じ委員会に参加することを確認するために重要です。また、これはすべての設計が慎重に考慮されて行われるため、チーム間の設計の不一致を回避するのに役立ちます。

ラリスト・ハユ・プラティウィによるイラスト

これらすべての赤ん坊のステップで、私たちはお互いの将来のより良いコラボレーションと統合を行うことができると信じています。このコラボレーションは、より良い製品を作成する可能性も開きます。

結局のところ、製品の設計は、単に見栄えを良くする方法ではありません。また、設計を完璧に機能させるための多くのエンジニアリング努力があります。これは、設計とエンジニアリングの間のコラボレーションの重要性を示しています。良い製品を作るためにお互いなしでは生きられないからです。スティーブ・ジョブズが言ったように、

「デザインは、見た目や雰囲気だけではありません。デザインがその仕組みです。」