Έξι μαθήματα που αντλήθηκαν από τη δημιουργία ενός συστήματος σχεδιασμού σε μια γρήγορη εκκίνηση

Το Oscar χτίζει ψηφιακά εργαλεία για μια σειρά χρηστών, συμπεριλαμβανομένων των μελών, των παρόχων, των χρηματιστών, των εργοδοτών και του ευρέος φάσματος υπαλλήλων του Oscar. Σχεδιάζοντας όλες αυτές τις ψηφιακές εμπειρίες παράλληλα, με μια μικρή ομάδα, ήταν προκλητική. Η συνεχής επένδυση στο σχεδιαστικό μας σύστημα, η Ανατομία, μας βοήθησε να ανταποκριθούμε σε αυτές τις προκλήσεις. Για όσους δεν είναι εξοικειωμένοι, ένα σύστημα σχεδιασμού ορίζει το βασικό UI / UX της μάρκας. Αυτό περιλαμβάνει τα πάντα, από την τυπογραφία, για να σχηματίσουν πεδία, σε ολόκληρες διατάξεις σελίδας.

Βασίσαμε την προσέγγισή μας στον Ατομικό Σχεδιασμό, μια αρχή που περιγράφει τα μικρότερα από τα στοιχεία του UI ή τα συστατικά ως άτομα (π.χ. κείμενο, χρώμα ή απόσταση) και ολοένα και μεγαλύτερα συστατικά ως μόρια που αποτελούνται από άτομα (π.χ. μια εισαγωγή κειμένου, ή ένα modal). Η ιδέα είναι ότι, καθώς αναπτύσσεται ένα σύστημα ατομικού σχεδιασμού, θα οδηγήσει σε όλο και πιο πολύπλοκα και ομαδοποιημένα συστατικά (οργανισμοί), και τελικά σε ολόκληρες διατάξεις, σελίδες ή πρότυπα.

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

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

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

2. Κρατήστε το απλό με μια μικρή εξάρτηση προσαρμογής.

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

3. Δεν είναι ποτέ πολύ νωρίς για να οικοδομήσουμε για κλίμακα.

Ξεκινήσαμε αρχικά την ανατομία σε δύο προϊόντα ιστού: την εφαρμογή ιστού μέλους και την εφαρμογή ιστού παρόχου. Από τότε, η χρήση της Anatomy έχει υπερδιπλασιαστεί, μέσα από ένα πλήθος εσωτερικών εργαλείων (συμπεριλαμβανομένης της διαχείρισης δεδομένων παρόχων, της διεκπεραίωσης αξιώσεων και των εργαλείων web που χρησιμοποιούνται από τις ομάδες Concierge μας) καθώς και του Oscar for Business. Επιπλέον, έχει αναπτυχθεί ένας βρόχος ανατροφοδότησης με την κινητή ανατομία, το σύστημα σχεδίασης Native Design του Oscar για τις εφαρμογές μας για κινητά. Αν και υπάρχουν πολλές επικαλύψεις στις ανάγκες, κάθε εφαρμογή διαφέρει άγρια ​​στους χρήστες, στις περιπτώσεις χρήσης και στις ροές. Νωρίτερα τον Μάρτιο, φτάσαμε σε ένα σημείο όπου, όταν θέλαμε να αλλάξουμε ένα συστατικό στοιχείο, δίσταζαν να ξεδιπλώσουμε την αλλαγή σε κάθε περίπτωση του στοιχείου. Για να το αντιμετωπίσουμε αυτό, πρόσφατα ενεργοποιήσαμε την επισήμανση χαρακτηριστικών για να αποκλείσετε ορισμένες λειτουργίες και ενημερώσεις σε ένα στοιχείο αντί για ένα οικοσύστημα "όλα ή τίποτα". Αυτή η ευελιξία έχει ήδη αποδειχθεί χρήσιμη για πράγματα όπως η δοκιμή A / B και αργή roll-outs για μεγαλύτερες αλλαγές.

4. Δεν υπάρχει μόνιμη απόφαση. Οτιδήποτε μπορεί να αλλάξει.

Μερικές φορές οι αποφάσεις που παίρνουμε για το πώς ένα συστατικό φαίνεται ή είναι κατασκευασμένο, αισθάνονται πολύ μόνιμα καθώς καθίστανται στο codebase για εβδομάδες, μήνες και μετά χρόνια, συγκεντρώνοντας αργά όλο και περισσότερες περιπτώσεις με το πέρασμα του χρόνου. "Θέλω να το αλλάξω ... αλλά, πώς θα μπορούσα να το αλλάξω τώρα; Ο καθένας το χρησιμοποιεί ήδη. Είναι παντού. " Σταμάτα το. Είναι μεταβλητό. Είναι πάντα καλύτερο να αντιμετωπίζετε τυχόν ζητήματα νωρίτερα από ό, τι αργότερα, προτού διασκορπιστούν περαιτέρω στο οικοσύστημα ενός προϊόντος. Μέχρι πριν από λίγους μήνες, όλα τα πεδία φόρμας της Anatomy (inputs, selects, autocomplete fields κ.λπ.) ήταν συστατικά της πρώτης γενιάς πριν από την εκμάθηση κάποιων βέλτιστων πρακτικών και με βάση τα σχέδια από τον κωδικό παλαιού τύπου. Τα προηγούμενα πεδία φόρμας ήσαν ανόητες μεγέθους και ασυνεπής υποστήριξη θεμάτων / μεγεθών. Το σύνολο των συνιστωσών ήταν διαδεδομένο παγκοσμίως σε όλες τις εφαρμογές μας, αλλά τον περασμένο Φεβρουάριο δεσμευόμαστε να ξεκινήσουμε τα πεδία φόρμας δεύτερης γενιάς. Γρήγορη προώθηση μερικούς μήνες και πολλές από τις εφαρμογές ιστού μας έχουν ήδη αρχίσει να αποκομίζουν τα οφέλη της υψηλότερης συνέπειας, καλύτερης ποιότητας κώδικα και πιο προσβάσιμου σχεδιασμού.

5. Τα σύμβολα τεκμηρίωσης και σκίτσου είναι οι καλύτεροι φίλοι του σχεδιαστή.

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

6. Δημιουργήστε μια διαδικασία για την οικοδόμηση, την ανάπτυξη και τη συμβολή.

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

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