Συστήματα σχεδίασης στο Gusto: Μέρος Ι

Τι χτίσαμε, τι μάθαμε κατά μήκος της πορείας και πού κατευθυνόμαστε στη συνέχεια.

Στο Gusto χτίζουμε το σύστημα σχεδιασμού μας για τα τελευταία δύο χρόνια και σκεφτόμαστε πώς να κλιμακώσουμε τη διαδικασία του προϊόντος και του σχεδιασμού μας σε πολλά πολύπλοκα έργα και ομάδες. Έτσι αν ξεκινάτε να κατασκευάζετε ένα περίπλοκο front-end ή εάν είστε έτοιμοι να χτίσετε έναν οδηγό στυλ σε μια μεγάλη οργάνωση τότε ελπίζουμε ότι μπορείτε να μάθετε από μερικά από τα λάθη μου που έχω σημειώσει κάτω.

Γιατί αγόρι έκανα πολλά από αυτά.

Γιατί το Gusto χρειάζεται ακόμα ένα σύστημα σχεδιασμού; Λοιπόν, όταν μπήκα στην ομάδα μισθοδοσίας τον Ιούνιο του 2016, εντοπίσαμε ορισμένα ζητήματα με τη διαδικασία σχεδιασμού και ανάπτυξης. Δεν υπήρχε βιβλιοθήκη προτύπων ή οδηγός στυλ και η ομάδα είχε εννέα σχεδιαστές προϊόντων με μεγάλο αριθμό μηχανικών και διευθυντών έργων που διανέμονται σε αποστολές. Το πρόβλημα με όλα αυτά είναι το πώς η επικοινωνία μεταξύ αυτών των αποστολών είχε αρχίσει να σιλό σε ακόμα μικρότερες ομάδες και τελικά αυτό οδήγησε σε ένα μεγάλο, συγκεχυμένο κωδικό βάθος εμπρός.

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

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

Αυτό είναι όταν έμαθα το πιο σημαντικό μάθημα σχεδίασης συστημάτων.

Μάθημα 1

Δεν μπορείτε να δημιουργήσετε μόνοι σας ένα σύστημα σχεδιασμού.

Πραγματικά πίστευα ότι θα μπορούσα να κρύψω στη σκοτεινότερη γωνία του γραφείου, να σχεδιάσω ένα υπέροχο σύστημα, να δημιουργήσω ένα εξαιρετικό front-end και να επιστρέψω στην ομάδα έναν ήρωα. Αλλά! Δεν υπάρχουν ήρωες σε αυτή τη γραμμή εργασίας. Στην πραγματικότητα, υπάρχει ένα σπουδαίο επεισόδιο από το podcast Track Changes όπου ο Paul Ford και ο Rich Ziade μιλάνε για την κοινωνική δυναμική του κώδικα κληρονομιάς. Ο Παύλος αναφέρει ότι:

Το χειρότερο πράγμα που μπορείτε να κάνετε για τον οργανισμό σας είναι να αποδείξετε πόσο έξυπνος είστε.

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

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

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

Εν πάση περιπτώσει, μετά από αρκετές μέρες και νύχτες, οι φίλοι και ο προϊστάμενός μου Ντόρα Τσαν επέστρεψαν με ένα πρωτότυπο του τι θα γινόταν σύντομα ο Οδηγός.

Και ήταν θαυμάσιο.

Αυτή είναι η δεύτερη έκδοση του Οδηγού που ξεκίνησε πολύ αργότερα.

Καθώς ξεκινήσαμε να σαρώνουμε το πρωτότυπο της Ντόρας, είχαμε τρεις στόχους που οδήγησαν σε όλες μας τις αποφάσεις:

  1. Ρυθμίστε τα υψηλά πρότυπα για το σχεδιασμό και την ανάπτυξη του εμπρός τμήματος.
  2. Εγγράψτε πώς μπορούν να χρησιμοποιηθούν τα στοιχεία για όλες τις ομάδες.
  3. Βασιστείτε στις ασυνέπειες του κώδικα και του σχεδιασμού που βρήκαμε στην εφαρμογή.

Αυτό είναι κάτι που όλες οι ομάδες ενός συγκεκριμένου μεγέθους χρειάζονται και έτσι είναι απίθανο ότι αυτές οι ειδήσεις σε κανέναν σε αυτό το σημείο. Ωστόσο, νομίζω ότι είναι εύκολο για αυτά τα είδη των κανόνων να γίνουν κακή και άσχημη δεδομένου του σωστού τόνου. Έτσι στην εισαγωγή του Οδηγού έθεσα να ενημερώσω την ομάδα για τους στόχους μας σε ένα πιο συνεργατικό πνεύμα:

Αυτό είναι όπου όλη η τεκμηρίωση για το σύστημα σχεδιασμού του Gusto αρχειοθετείται για ασφαλή φύλαξη. Περιέχει όλα τα στοιχεία που χρειάζεστε, όπως εικόνες και εικονογραφήσεις, καθώς και σημειώσεις σχετικά με το στυλ copywriting και την τεκμηρίωση για τα συστατικά μας React. Στην πραγματικότητα, θέλουμε να σκεφτούμε τον Οδηγό σαν ένα είδος Pokédex.
Στην ιδανική περίπτωση, μπορούμε να μοιραζόμαστε πληροφορίες και να συνεργαζόμαστε σε ένα δημόσιο χώρο για να επιτύχουμε συναίνεση σε όλες τις αποστολές όσον αφορά τον κώδικα, το σχεδιασμό, την προσβασιμότητα, τις επιδόσεις και το branding. Εάν βελτιώσουμε ένα μόνο στοιχείο εδώ στο The Guide, τότε όλες οι εφαρμογές και τα χαρακτηριστικά μας θα δρέψουν την ανταμοιβή ταυτόχρονα με έναν προβλέψιμο τρόπο.
Τα εικονογράμματα διατίθενται για λήψη στο The Guide.

Η κατασκευή του Οδηγού ήταν δύσκολη. Απαιτείται η λήψη όλων των κωδικών μας από την κύρια εφαρμογή μας, το καθαρισμό και η τοποθέτηση σε ένα νέο repo που ονομάζεται Component Library. Με αυτό τον τρόπο θα έχουμε μια κοινή ομάδα στοιχείων που θα μπορούσαν να χρησιμοποιηθούν σε οποιαδήποτε εφαρμογή που χτίζει ο Gusto για το μέλλον. Αλλά πέρασε πολύς χρόνος μιλώντας σε μηχανικούς και σχεδιαστές σχετικά με αυτό το σχέδιο και φαντάζοντας ένα μέλλον όπου ο σχεδιασμός και η ανάπτυξη δεν ήταν μόνο εύκολος αλλά και δροσερός.

Μάθημα # 2

Ένα σύστημα σχεδιασμού δεν χρειάζεται να είναι πλήρες για να είναι χρήσιμο.

Έχοντας όλα τα συστατικά μας σε μια ξεχωριστή repo τελικά σήμαινε ότι θα μπορούσαμε να το χρησιμοποιήσουμε ως βάση για το σχεδιασμό στο Gusto: κάθε φορά που θέλαμε να δημιουργήσουμε μια νέα εφαρμογή θα μπορούσαμε να εξαρτήσουμε από αυτές τις ρυθμίσεις και στυλ να είναι συνεπής και εύκολη στη χρήση χωρίς να χτίσει ολόκληρο το πράγμα dang από το μηδέν. Αλλά ανησυχούσαμε ότι ήταν ατελής και ατελής. δεν υπήρχε καλή τεκμηρίωση για όλα τα στυλ μας ή ακόμα και μια λίστα με ποια propTypes ήταν διαθέσιμα στα συστατικά μας React, για παράδειγμα.

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

Μεγάλη οπτική σχεδίαση ή ακόμη και το UX ενός οδηγού στυλ δεν είναι σχεδόν τόσο κοντά όσο η τεκμηρίωση είναι σε μια θέση που ο καθένας μπορεί εύκολα να βρει. Και αν η δουλειά μας έσωσε ένα μηχανικό ή σχεδιαστή πέντε λεπτά ζητώντας από κάποιον άλλο για το Slack πώς να χρησιμοποιήσει το component X τότε ο οδηγός είναι επιτυχής, αν και μόνο μικρός.

Μάθημα # 3

Τα συστήματα σχεδιασμού ζουν και πεθαίνουν από την τεκμηρίωσή τους.

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

Και λαμβάνοντας υπόψη ότι ήμασταν μόνο δύο σχεδιαστές που έκαναν αυτό το έργο (ως επί το πλείστον ως δευτερεύον έργο), ήξερα ότι δεν μπορούσαμε να καθίσουμε και να εξηγήσουμε τον Οδηγό για όλους όσους εντάχθηκαν στην εταιρεία. Ένας άλλος στόχος μας ήταν να εξασφαλίσουμε ότι οι σχεδιαστές και οι μηχανικοί θα μπορούσαν να διερευνήσουν τι είναι ικανό το σύστημα χωρίς να χρειάζεται να υποβάλλει ερωτήσεις όλη την ώρα. Ο οδηγός θα πρέπει τελικά να νιώθει σαν μια παιδική χαρά όπου μπορείτε να παίρνετε γρήγορα μπλοκ LEGO και να χτίζετε ό, τι θέλετε από αυτό. Αλλά αυτό πήρε λίγο χρόνο για να το καταλάβω. Μετά από μήνες εργασίας βρήκα ότι ένας οδηγός στυλ είναι λιγότερο χρήσιμος όταν διατάζει τους ανθρώπους να κάνουν κάτι.

Η εξερεύνηση σε ένα σύστημα σχεδιασμού δεν ήταν μόνο δυνατή τότε, αλλά ενθαρρύνθηκε ενεργά - φαντάστηκα ότι ο Οδηγός έπρεπε να είναι ένα ζεστό και φιλόξενο μέρος για κάθε προγραμματιστή ή σχεδιαστή ανεξάρτητα από την εμπειρία. Εν συντομία; η καλοσύνη ήταν το κλειδί.

Μάθημα # 4

Ένα σύστημα σχεδιασμού είναι κάτι παραπάνω από τον κώδικα και το σχεδιασμό - είναι ένα αρχείο κοινής γνώσης.

Νομίζω ότι οι περισσότεροι σχεδιαστές συστημάτων σχεδιάζουν αυτό το νωρίς στην καριέρα τους, αλλά χρειάστηκε ένας εξαιρετικά μεγάλος χρόνος για να πέσει το παπούτσι για μένα. Και αυτό άρχισε να συμβαίνει μόνο όταν διάβασα τα πάντα εξαιρετικά σχεδιαστικά συστήματα από την Alla Kholmatova όπου γράφει:

Μερικές φορές πιστεύουμε ότι άλλες ομάδες έχουν το σωστό και φιλοδοξούν να χτίσουν ένα σύστημα όπως ακριβώς και το Airbnb. Αλλά κάθε προσέγγιση έχει τα μειονεκτήματά της. [...] Στην καρδιά όλων των αποτελεσματικών συστημάτων σχεδιασμού δεν είναι τα εργαλεία, αλλά η κοινή σχεδιαστική γνώση σχετικά με το τι κάνει καλό σχεδιασμό και UX για την ομάδα σας και το συγκεκριμένο προϊόν σας. Εάν η γνώση αυτή είναι σαφής, όλα θα ακολουθήσουν.
- Σχεδιαστικά Συστήματα, Άλα Κολμάτοβα

Με αυτό το μικρό βιβλίο έμαθα ότι αν ένα σύστημα σχεδιασμού δεν λύσει τις ανάγκες των σχεδιαστών και των μηχανικών τότε θα αισθανθούν ότι το σύστημα παρεμποδίζει το έργο τους. Ο φίλος μου Jules Forrest το περιέγραψε ως εξής:

Οι ομάδες σχεδιασμού δεν ανταμείβονται ρητά για την επαναχρησιμοποίηση των σχεδίων με τον τρόπο που οι μηχανικοί γνωρίζουν ότι πρέπει να γράψουν τον κώδικα DRY, οπότε η εισαγωγή ασυνεπειών αισθάνεται την παραγωγικότητα.

Πώς λοιπόν οικοδομούμε ένα σύστημα σχεδιασμού όπου ισχύει το αντίθετο; Πώς μπορούμε να προσθέσουμε ασυνέπειες σε ένα σύστημα σχεδιασμού; Λοιπόν, νομίζω ότι είναι σημαντικό να σημειωθεί ότι οι σχεδιαστές και οι μηχανικοί εισάγουν ασυνέπειες σε ένα σύστημα όχι λόγω της ποιότητας του κώδικα, αλλά λόγω μιας σειράς άλλων λόγων: κακή τεκμηρίωση σε έναν οδηγό στυλ, δομή ονοματοδοσίας των συστατικών μας, αδυναμία γρήγορα να σαρώσετε για αυτό που χρειάζονται.

Αυτό σημαίνει ότι τα συστήματα σχεδιασμού αφορούν περισσότερο τον ευαγγελισμό απ 'ό, τι σχεδόν οτιδήποτε άλλο. Και αυτό που αρχικά υπολόγισα ήταν ότι η κωδικοποίηση και ο προγραμματισμός δεν έδειξαν τίποτα τέτοιο - αυτή η γραμμή εργασίας κατέληξε να είναι περίπου 10% κωδικός και 90% συνεργασία, έρευνα και καθοδήγηση.

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

Το μέλλον των συστημάτων σχεδιασμού

Πάντα το βρίσκω αστείο όταν οι άνθρωποι μιλάνε για το μέλλον του X ή του Y, αλλά αν έπρεπε να κάνω μια άγρια ​​εικασία για το πού όλα αυτά οδηγούν τότε δεν θα ποντάρω στα εργαλεία - δεν είναι πραγματικά το πιο σημαντικό μέρος των συστημάτων συστημάτων σχεδιασμού. Οι οδηγοί στυλ βοηθούν σίγουρα, αν και είναι λίγο πιο περίπλοκο από αυτό.

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

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

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

Τι θα ακολουθήσει για τον Gusto;

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