Όταν το Design συναντά την Engineering στο Traveloka

Αυτή δεν είναι μια συνηθισμένη ιστορία αγάπης.

Σημείωση: Αυτή είναι μόνο μία από τις αλληλεπιδράσεις μεταξύ Σχεδιασμού και Μηχανικής. Μιλώ από ένα μικρό φάσμα όλων των αλληλεπιδράσεων μεταξύ Σχεδιασμού και Μηχανικής στο Traveloka. Και αυτή είναι η ιστορία μου.

Με την πάροδο του χρόνου, η Traveloka βρίσκεται εδώ και 6 χρόνια. Σε αυτό το ταξίδι αναγνωρίζουμε ότι έχουμε πολλά οπτικά σφάλματα που υπήρχαν εδώ και αρκετό καιρό, όπως διαφορετικές αποχρώσεις του πορτοκαλί για κουμπιά ή ασυνεπές περιθώριο μεταξύ καρτών.

Η ομάδα σχεδιασμού ξεκίνησε την προσπάθεια να τυποποιήσει την οπτική μας γλώσσα δημιουργώντας το δικό μας σχεδιαστικό κιτ για να αποτρέψουμε τυχόν νέες οπτικές ανωμαλίες που παρεκκλίνουν από το πρότυπο μας. Προσπαθήσαμε, αλλά με κάποιο τρόπο το πρόβλημα αυτό δεν λύθηκε ποτέ. Ακόμα και αφού έχουμε το δικό μας σχεδιαστικό κιτ, εξακολουθούμε να βλέπουμε τις οπτικές ασυνέπειες στα προϊόντα μας.

Από την άλλη πλευρά, οι μηχανικοί μας πρέπει να δουλέψουν πιο αποτελεσματικά. Προτιμούν να κατασκευάσουν παρόμοια εξαρτήματα από το μηδέν αντί να κοιτούν προς τα πάνω για να βρουν το ίδιο στοιχείο για επαναχρησιμοποίηση. Επειδή η αναζήτηση αυτών των στοιχείων είναι μια τριβή στην τρέχουσα ροή εργασίας τους.

Όλοι αυτοί οι χρόνοι, η ομάδα σχεδιασμού και η ομάδα μηχανικών προσπαθούσαν να λύσουν το δικό τους πρόβλημα χωρίς να επικοινωνούν μεταξύ τους. Επέστρεψε την ερώτηση σχετικά με τη δυνατότητα σχεδιασμού και μηχανικής να συνεργαστούν για να λύσουν το πρόβλημα που αντιμετωπίζουμε και οι δύο καθημερινά. Ποιος ήξερε ότι το Design and Engineering μπορεί να περπατήσει χέρι-χέρι και να μεγαλώσει αγάπη στη διαδικασία;

Πότε γνώρισαν για πρώτη φορά;

Οι συνομιλίες ξεκίνησαν στις αρχές του 2018 όταν η ομάδα Μηχανικών έκανε κάποια έρευνα σχετικά με το React Native and React Native Web (Το React Native είναι ένα πλαίσιο για την ανάπτυξη εφαρμογών για κινητά χρησιμοποιώντας JavaScript). Όταν άρχισε αυτή η έρευνα, συμμετείχε η ομάδα Web UI Developers from Design.

Κατά τη διάρκεια της διαδικασίας, η ομάδα της Μηχανικής είχε την ιδέα να χρησιμοποιήσει το React Native ως βάση για την ανάπτυξη πολλαπλών πλατφορμών. Αυτό περιλαμβάνει την ανάπτυξη του Mobile Web στο οποίο ο Web UI Developer μπορεί να εμπλέξει στη δημιουργία των στοιχείων του.

Όταν ξεκίνησε αυτή η πρωτοβουλία, ήμασταν τόσο ενθουσιασμένοι που μάθαμε το React Native και εκμεταλλευτήκαμε το καλύτερο από αυτό, καθώς μπορούμε να κάνουμε πιο σημαντικό αντίκτυπο και να δημιουργήσουμε στοιχεία για όλες τις διαθέσιμες πλατφόρμες από μια μόνο πηγή κώδικα. Και εδώ αρχίζουμε να γνωρίζουμε ο ένας τον άλλον.

Πώς μεγαλώνει η αγάπη;

Συναντήσαμε ο ένας τον άλλον μερικές φορές μετά, αλλά τίποτα δεν πυροδότησε στην καρδιά μας. Αλλά τότε, η σπίθα αναδύεται όταν έχουμε αυτό το intern. Όλα ξεκίνησαν τόσο απλά όσο ένα εσωτερικό έργο.

Αυτός ο intern είναι ένας μηχανικός Reactive Native και έχει ανατεθεί να κατασκευάσει οτιδήποτε μπορεί να εξομαλύνει τη συνεργασία μεταξύ Σχεδιασμού και Μηχανικής. Άρχισε να δημιουργεί μια βιβλιοθήκη συνιστωσών, μερικά plug-in σκίτσο μυαλό για τους σχεδιαστές, και να διερευνήσει άλλες δυνατότητες συνεργασίας μεταξύ Σχεδιασμού και Μηχανικής.

Εκτός από αυτό, η ομάδα σχεδίασης είχε επίσης την πρωτοβουλία να δημιουργήσει μια μοναδική πηγή αλήθειας (SSOT) βασισμένη στον κώδικα για τα μάρκες και τα εξαρτήματα σχεδιασμού. Αυτές οι δύο κινήσεις μας εμπνεύστηκαν για να συνεργαστούμε σε αυτήν την αποστολή. Αυτό είναι όπου η αγάπη σπινθήρων, και πιστεύουμε ότι τρέχουμε σε ένα λαμπρότερο μέλλον μαζί.

Πού μας οδήγησε η αγάπη;

Μετά από αρκετές φορές που χρονολογούνται (διαβάστε: συνάντηση), συμφωνούμε τελικά να πάρουμε τη σχέση μας στο επόμενο επίπεδο. Δεν ήταν εύκολο να περπατήσουμε, αλλά πιστεύαμε ότι αυτό είναι το σωστό για εμάς. Η κατανόηση του άλλου είναι το βασικό κλειδί για μια καλή σχέση, σωστά; Και αυτό ακριβώς κάναμε όταν αποφασίσαμε να συνεργαστούμε.

Ξεκινήσαμε κατανοώντας τον τρόπο με τον οποίο λειτουργεί ο ένας ο άλλος. Και μετά από αυτές τις νύχτες γεμάτες εφιάλτες και δρόμους γεμάτους εμπόδια, βρισκόμαστε τελικά στην καλύτερη συνεργασία. Εδώ είναι οι δεσμεύσεις μας να επιτύχουμε την καλύτερη συνεργασία μεταξύ Σχεδιασμού και Μηχανικής:

1. Σύστημα σχεδιασμού βάσει κώδικα.

Η συνεργασία μεταξύ σχεδίου και μηχανικής ήταν αρκετά δύσκολη. Η γέφυρα μεταξύ σχεδίου και κώδικα δεν είναι αρκετά δυνατή και έκανε το έργο να γίνει σκληρό ανάμεσα σε εμάς.

Στη συνέχεια πήραμε την ιδέα να δημιουργήσουμε ένα σύστημα σχεδιασμού βασισμένο στον κώδικα. Βάζουμε το λογότυπο του σχεδιασμού μας στο JavaScript, το οποίο είναι ο ευκολότερος τρόπος για να χρησιμοποιήσει ο μηχανικός, αλλά ακόμα αρκετά απλός για να διαχειριστεί ο σχεδιαστής.

Συνεργαζόμαστε για να κατασκευάσουμε τα δικά μας χειροποίητα εξαρτήματα που πληρούν τα πρότυπα του Design and Engineering. Αυτά τα εξαρτήματα θα χρησιμοποιηθούν σε όλες τις πλατφόρμες για να εξασφαλίσουν συνέπεια στο σχεδιασμό μας.

2. Προσθέστε σκίτσο.

Αυτά τα πρόσθετα σκίτσων λειτουργούν σαν τη γέφυρα μεταξύ σχεδιασμού και κωδικών. Στην πλευρά Design, αυτό διευκολύνει τη συνεργασία, επειδή οι σχεδιαστές δεν χρειάζεται να παράγουν τα ίδια εξαρτήματα ξανά και ξανά. Αυτό θα βοηθήσει επίσης τον σχεδιαστή να δημιουργήσει τη διεπαφή χρήστη με βάση τα τυποποιημένα στοιχεία.

Από την πλευρά της Μηχανικής, αυτό το πρόσθετο θα μεταφράσει τη διεπαφή χρήστη σε κώδικες που μπορούν εύκολα να εφαρμοστούν από τον μηχανικό. Αυτό θα μειώσει τον χρόνο εργασίας του μηχανικού, επειδή δεν χρειάζεται να αναζητήσουν υπάρχοντα εξαρτήματα από τον προηγούμενο σχεδιασμό.

3. Σχεδιασμός λιμνών και ολοκληρωμένες οπτικές δοκιμές.

Μετά την εργασία με τη διεπαφή χρήστη και τον κώδικα, το επόμενο βήμα είναι να βεβαιωθείτε ότι και οι δύο είναι τυποποιημένες. Αυτό είναι όπου συμμετείχαν σχεδιασμός linter και ολοκληρωμένες οπτικές δοκιμές. Αυτή τη στιγμή ερευνάμε τη δυνατότητα να αναπτύξουμε το design linter και τις ολοκληρωμένες οπτικές δοκιμές για να δουλέψουμε σαν ένα δίχτυ ασφαλείας τόσο για τη διεπαφή χρήστη όσο και για τους κωδικούς μας. Από την πλευρά του σχεδιασμού, το design linter θα ενθαρρύνει τον UI Designer να χρησιμοποιεί τυποποιημένα εξαρτήματα. Εν τω μεταξύ, από την πλευρά της μηχανικής, οι οπτικές δοκιμές θα μειώσουν την πιθανότητα οπτικών ανωμαλιών όταν απελευθερωθεί το προϊόν. Αυτό θα κάνει τη ζωή του σχεδιαστή και του μηχανικού ευκολότερη στο μέλλον.

4. Τεκμηρίωση συστήματος σχεδιασμού.

Όταν συνεργάζεστε με διαφορετική ομάδα, είναι ωραίο να έχετε μια κατευθυντήρια γραμμή την οποία και οι δύο μπορείτε να αναφέρετε. Η τεκμηρίωση του συστήματος σχεδιασμού λειτουργεί ως βιβλίο σχεδιασμού που είναι προσβάσιμο από όλους τους εμπλεκόμενους, συμπεριλαμβανομένων των Διευθυντών Προϊόντων, των μηχανικών και των συναδέλφων τους. Αυτό είναι σημαντικό για να βεβαιωθείτε ότι όλοι είναι στο ίδιο συμβούλιο για το γιατί μια απόφαση σχεδιασμού έχει γίνει. Αυτό θα βοηθήσει επίσης να αποφευχθεί τυχόν διαφωνία σχεδιασμού μεταξύ της ομάδας επειδή κάθε σχέδιο σχεδιάζεται προσεκτικά με προσεκτική εκτίμηση.

Εικονογράφηση από τον Ralistu Hayu Pratiwi

Με όλα αυτά τα βήματα μωρών, πιστεύουμε ότι μπορούμε να κάνουμε καλύτερη μελλοντική συνεργασία και ολοκλήρωση μεταξύ τους. Η συνεργασία θα ανοίξει επίσης δυνατότητες για τη δημιουργία καλύτερων προϊόντων.

Στο τέλος, ο σχεδιασμός ενός προϊόντος δεν είναι μόνο πώς να το φανεί όμορφο και ενδιαφέρον. Υπάρχουν επίσης πολλές προσπάθειες μηχανικής για να γίνει ο σχεδιασμός έργων άψογα. Αυτό καταδεικνύει τη σημασία της συνεργασίας μεταξύ του Σχεδιασμού και της Μηχανικής. δεδομένου ότι δεν μπορούμε να ζήσουμε χωρίς το ένα το άλλο στην οικοδόμηση ενός καλού προϊόντος. Όπως είπε ο Steve Jobs,

"Το σχέδιο δεν είναι μόνο αυτό που μοιάζει και αισθάνεται σαν. Σχεδιασμός είναι πώς λειτουργεί. "