Wenn Design bei Traveloka auf Engineering trifft

Dies ist keine gewöhnliche Liebesgeschichte.

Hinweis: Dies ist nur eine der Wechselwirkungen zwischen Design und Engineering. Ich spreche aus einem kleinen Spektrum aller Interaktionen zwischen Design und Engineering in Traveloka. Und das ist meine Geschichte.

Traveloka gibt es schon seit 6 Jahren. Auf dieser Reise geben wir zu, dass wir viele visuelle Fehler haben, die schon eine ganze Weile da waren, wie verschiedene Orangetöne für Knöpfe oder inkonsistente Ränder zwischen Karten.

Das Designteam hat die Bemühungen zur Standardisierung unserer visuellen Sprache eingeleitet, indem es ein eigenes Design-Kit erstellt hat, um neue visuelle Anomalien zu vermeiden, die von unserem Standard abweichen. Wir haben es versucht, aber irgendwie hat sich dieses Problem nie gelöst. Selbst nachdem wir unser eigenes Design-Kit haben, sehen wir immer noch diese visuellen Inkonsistenzen auf unseren Produkten.

Andererseits müssen unsere Ingenieure effizienter arbeiten. Sie ziehen es vor, ähnliche Komponenten von Grund auf neu zu erstellen, anstatt nach der gleichen Komponente für die Wiederverwendung zu suchen. Denn die Suche nach diesen Komponenten ist eine Reibung in ihrem aktuellen Arbeitsablauf.

In all diesen Momenten versuchten das Designteam und das Entwicklerteam, ihr eigenes Problem zu lösen, ohne miteinander zu kommunizieren. Es stellte sich die Frage, ob Design und Engineering zusammenarbeiten können, um das Problem zu lösen, dem wir beide täglich begegnen. Wer hätte gedacht, dass Design und Technik Hand in Hand gehen und dabei die Liebe wachsen können?

Wann haben sie sich das erste Mal getroffen?

Die Gespräche begannen Anfang 2018, als das Engineering-Team Nachforschungen zu React Native und React Native Web anstellte (React Native ist ein Framework zum Erstellen mobiler Apps mit JavaScript). Als diese Recherche begann, beteiligten sich die Web-UI-Entwickler des Designteams.

Während des Prozesses hatte das Engineering-Team die Idee, React Native als Basis für die plattformübergreifende Entwicklung zu verwenden. Dies umfasst die Entwicklung von Mobile Web, in die Web UI Developer das Erstellen von Komponenten einbeziehen kann.

Als diese Initiative begann, waren wir so aufgeregt, React Native kennenzulernen und das Beste daraus zu machen, da wir eine größere Wirkung erzielen und Komponenten für alle verfügbaren Plattformen aus einer einzigen Codequelle erstellen können. Und hier lernen wir uns zuerst kennen.

Wie die Liebe wuchs

Danach haben wir uns ein paar Mal getroffen, aber nichts hat in unserem Herzen gewirkt. Aber dann entsteht der Funke, wenn wir diesen Praktikanten haben. Alles begann so einfach wie ein internes Projekt.

Dieser Praktikant ist ein Ingenieur von React Native und hat den Auftrag, alles zu entwickeln, was die Zusammenarbeit zwischen Design und Engineering erleichtern kann. Er begann mit dem Aufbau einer Komponentenbibliothek, atemberaubenden Sketch-Plugins für Designer und der Suche nach weiteren Möglichkeiten für die Zusammenarbeit zwischen Design und Engineering.

Abgesehen davon hatte das Designteam auch die Initiative, eine Code-basierte Single Source of Truth (SSOT) für Designtoken und -komponenten zu entwickeln. Diese beiden Bewegungen haben uns dazu inspiriert, bei dieser Mission zusammenzuarbeiten. Hier entzündet sich die Liebe und wir glauben, dass wir zusammen in eine bessere Zukunft rennen.

Wohin hat uns die Liebe geführt?

Nach mehrmaligem Dating (sprich: Treffen) sind wir uns endlich einig, unsere Beziehung auf die nächste Ebene zu heben. Es war keine leichte Straße, auf der man laufen konnte, aber wir waren der Meinung, dass dies die richtige für uns ist. Sich gegenseitig zu verstehen ist der Schlüssel zu einer guten Beziehung, oder? Und genau das haben wir getan, als wir uns für eine Zusammenarbeit entschieden haben.

Wir begannen damit, zu verstehen, wie einander funktioniert. Und nach diesen Nächten voller Albträume und Straßen voller Hindernisse machen wir uns endlich auf den Weg zu einer besseren Zusammenarbeit. Hier sind unsere Verpflichtungen, um eine bessere Zusammenarbeit zwischen Design und Engineering zu erreichen:

1. Code-basiertes Designsystem.

Die Zusammenarbeit zwischen Design und Engineering war ziemlich herausfordernd. Die Brücke zwischen Design und Code ist nicht stark genug und hat die Arbeit zwischen uns hart gemacht.

Wir hatten dann die Idee, ein Code-basiertes Design-System zu erstellen. Wir haben unser Designtoken in JavaScript abgelegt. Dies ist die einfachste Methode für Ingenieure und dennoch für Designer einfach genug, um es zu verwalten.

Wir arbeiten zusammen, um unsere eigenen handgefertigten Komponenten zu bauen, die dem Design- und Engineering-Standard entsprechen. Diese Komponenten werden auf allen Plattformen verwendet, um die Konsistenz unseres Designs zu gewährleisten.

2. Plugins skizzieren.

Diese Sketch-Plugins funktionieren wie die Brücke zwischen Design und Codes. Auf der Design-Seite erleichtert dies die Zusammenarbeit, da Designer nicht immer wieder dieselben Komponenten generieren müssen. Dies hilft dem Designer auch dabei, seine Benutzeroberfläche auf der Grundlage der standardisierten Komponenten zu erstellen.

Auf der Engineering-Seite übersetzt dieses Plugin die Benutzeroberfläche in Codes, die vom Ingenieur einfach implementiert werden können. Dies verkürzt die Arbeitszeit des Ingenieurs, da er nicht nach vorhandenen Komponenten aus dem vorherigen Entwurf suchen muss.

3. Design Linter und integrierte visuelle Tests.

Nachdem Sie mit der Benutzeroberfläche und dem Code gearbeitet haben, müssen Sie sicherstellen, dass beide standardisiert sind. Hier nahmen Design Linter und integrierte visuelle Tests teil. Wir forschen derzeit an der Möglichkeit, Design Linter und integrierte visuelle Tests zu entwickeln, die als Sicherheitsnetz sowohl für unsere Benutzeroberfläche als auch für unsere Codes fungieren. Auf der Design-Seite wird Design Linter UI Designer ermutigen, standardisierte Komponenten zu verwenden. In der Zwischenzeit wird die Möglichkeit von visuellen Anomalien bei der Produktfreigabe durch visuelle Tests verringert. Dies wird das Leben von Designer und Ingenieur in Zukunft einfacher machen.

4. Systemdokumentation entwerfen.

Wenn Sie mit einem anderen Team zusammenarbeiten, ist es schön, eine Richtlinie zu haben, auf die Sie sich beide beziehen können. Die Dokumentation des Entwurfssystems fungiert als Entwurfsbibel, auf die alle Beteiligten zugreifen können, einschließlich Produktmanagern, Ingenieuren und Designerkollegen. Dies ist wichtig, um sicherzustellen, dass alle Mitglieder der gleichen Gruppe sind und wissen, warum eine Entwurfsentscheidung getroffen wird. Dies wird auch dazu beitragen, Design-Meinungsverschiedenheiten zwischen dem Team zu vermeiden, da jedes Design sorgfältig und mit Bedacht erstellt wird.

Illustration von Ralistu Hayu Pratiwi

Mit all diesen kleinen Schritten glauben wir, dass wir die zukünftige Zusammenarbeit und Integration untereinander verbessern können. Die Zusammenarbeit eröffnet auch Möglichkeiten zur Schaffung besserer Produkte.

Letztendlich ist das Entwerfen eines Produkts nicht nur eine Methode, um es hübsch und interessant aussehen zu lassen. Es gibt auch viele technische Anstrengungen, damit das Design einwandfrei funktioniert. Dies zeigt, wie wichtig die Zusammenarbeit zwischen Design und Engineering ist. da wir beim Aufbau eines guten Produkts nicht ohne einander leben können. Wie Steve Jobs sagte,

„Design ist nicht nur das, wonach es aussieht und sich anfühlt. So funktioniert Design. “