Πώς η οικοδόμηση ενός συστήματος σχεδιασμού εξουσιοδοτεί την ομάδα σας να εστιάζει στους ανθρώπους - όχι σε pixels.

Αυτή η ανάρτηση είναι η πρώτη σε σειρά σχετικά με το HubSpot Canvas, τη νέα γλώσσα σχεδιασμού μας.

Γεια φίλε. Θα μιλήσω στο συνέδριο Rethink Design Systems στις 26 Σεπτεμβρίου. Αν θέλετε να παρευρεθείτε χρησιμοποιήστε το σύνδεσμο μου για 40% έκπτωση.

Υπάρχει ένα παλιό skiat για ένα mailman που αποφασίζει ότι δεν είναι πλέον παθιασμένος με την παράδοση μηνυμάτων - θα προτιμούσε να παραδώσει τα tacos αντί.

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

Τα Tacos είναι πολύ πιο συναρπαστικά από τους λογαριασμούς, αλλά ο άνθρωπος δεν χρειάζεται tacos. Χρειάζεται την αλληλογραφία του.

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

Κατά τα τελευταία δύο χρόνια, έχουμε:

  • Δημιούργησε μια νέα γλώσσα σχεδίασης (που ονομάζεται HubSpot Canvas, περισσότερα για αυτό αργότερα)
  • Ανασχεδίασε την πλατφόρμα HubSpot και ανανέωσε την οπτική ταυτότητα της μάρκας μας
  • Κατασκεύασμα ενός ζωντανού, αναπνευστικού συστήματος σχεδιασμού που μπορεί να κλιμακωθεί με την αναπτυσσόμενη επιχείρηση μας

Προκειμένου να επιτύχουμε όλα αυτά, έπρεπε να επενδύσουμε στο ταλέντο μας. Έχουμε κλιμακώσει την ομάδα UX από 14 σχεδιαστές προϊόντων, 2 ερευνητές και 1 συγγραφέα σε περισσότερους από 34 σχεδιαστές προϊόντων, 8 ερευνητές, 3 συγγραφείς και 1 εικονογράφο προϊόντος (και εξακολουθούμε να προσλαμβάνουμε).

Αυτή είναι η ιστορία του τρόπου με τον οποίο δεσμευόμαστε να παραδώσει το ταχυδρομείο (ενώ παράλληλα καταφέρνει να γλιστρήσει και σε κάποια tacos).

Γιατί επανασχεδιάσαμε

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

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

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

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

"Φαίνεται πιο περίπλοκο από ό, τι πρέπει να είναι."
"Πάρα πολλές επιλογές. Το μάτι μου δεν έχει σχεδιαστεί οπουδήποτε συγκεκριμένα. "
"Πυκνό και απασχολημένο. Δεν υπάρχει λευκός χώρος. "
"Οι συνδυασμοί χρωμάτων είναι ξεπερασμένοι και δεν είναι ευχάριστοι."
"Πάρα πολύ γκρίζα και όλα φαίνεται να είναι κρυμμένα στο μικρό κουτί του."
"Πληκτικός."

Γνωρίζαμε ότι χρειαζόμασταν μια πλήρη επανεξέταση και επαναπροσδιορισμό στους πελάτες που εξυπηρετούμε - στις προσωπικότητες, τις ιδιορρυθμίες τους, τα κίνητρά τους, τις προσδοκίες τους και ακόμη και (ή ιδιαίτερα) τις ανησυχίες τους. Τελικά, θέλαμε να δημιουργήσουμε ένα νέο σχέδιο για το προϊόν μας, το οποίο θα ήταν τόσο ευχάριστο και εύκολο στη χρήση όσο και οι καταναλωτικές εφαρμογές που χρησιμοποιούν οι πελάτες μας κάθε μέρα.

Αλλά με αυτό ήρθε η πραγματοποίηση μιας καθολικής αλήθειας:

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

Ξεκινήσαμε τη διαδικασία αυτή γνωρίζοντας ότι δεν θέλαμε να επανασχεδιάσουμε μόνο το προϊόν μας - έπρεπε να επανεξετάσουμε πλήρως τον τρόπο με τον οποίο σχεδιάσαμε και κατασκευάσαμε προϊόντα.

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

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

Η ρίζα του προβλήματος

Πέρυσι, οι γονείς μου αποφάσισαν να πουλήσουν την παιδική μου ηλικία. Με βοήθησε να καθαρίσουν τη σοφίτα - μια σοφίτα που έχει συσσωρεύσει πράγματα αξίας είκοσι χρόνων. Όπως μπορείτε να φανταστείτε, υπήρχαν πολλές στιγμές WTF κατά τη διάρκεια αυτής της περιόδου καθαρισμού. Κάποιες στιγμές ήταν οι εξής: WTF: Σώσαμε αυτό το πράγμα !? Δροσερός! Αλλά οι περισσότεροι μοιάζουν περισσότερο: WTF: Γιατί έχουμε ακόμα 87 Beanie Babies;

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

Pop quiz: Πόσα συλλέκτες ημερομηνίας είναι πάρα πολλά;

Τρία? Ίσως τέσσερις;

Λοιπόν, είχαμε οκτώ.

Εδώ είναι μερικά από τα άλλα πράγματα που βρήκαμε στη σοφίτα μας:

  • 100+ αποχρώσεις του γκρι χρώματος
  • 40+ μορφές κειμένου σε 3 διαφορετικές γραμματοσειρές
  • 16 διαφορετικές μορφές modals
  • 6 διαφορετικά πρωτεύοντα κουμπιά (πράγμα που σημαίνει ότι δεν είχαμε κύριο κουμπί)
  • 5 διαφορετικοί τρόποι φιλτραρίσματος ενός πίνακα
  • Modals με ενέργειες επιβεβαίωσης στα αριστερά
  • Modals με ενέργειες επιβεβαίωσης στα δεξιά
  • Χιλιάδες και χιλιάδες γραμμές προσαρμοσμένου CSS

Ακολουθεί μια απεικόνιση όλων των κουμπιών που υπήρχαν στην πλατφόρμα HubSpot ταυτόχρονα:

Αυτό ωθεί τα κουμπιά σας;

Πώς συνέβη αυτό; Πώς καταλήξαμε με τόσα κουμπιά; Πώς καταλήξαμε με πολλούς συλλέκτες ημερομηνιών;

Ακολουθεί μια πραγματική συνομιλία Slack από αυτές τις παλιές, πιο σκούρες ημέρες:

Βάζοντας το Sass πίσω στο SaaS

Η αλήθεια είναι ότι κανένας σχεδιαστής ή προγραμματιστής στο HubSpot δεν θέλει πραγματικά να ξοδεψει τον χρόνο που ξαναπαίρνει τον επιλογέα ημερομηνίας.

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

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

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

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

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

Να πάρει αρχή

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

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

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

Αυτές οι αρχές είναι:

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

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

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

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

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

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

Μια νέα οπτική κατεύθυνση

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

Εδώ είναι μια γεύση από μερικές πρώιμες σχεδιαστικές έννοιες από δύο μέλη της ομάδας σχεδιασμού γλώσσα, Drew Condon και Jackie Barcamonte:

Πρώην σχεδιασμός HubSpot

Άγρια, σωστά; Διαφορετικός. Συναρπαστικός. Σίγουρα δεν είναι βαρετό, σκληρό "επιχειρηματικό λογισμικό".

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

"Με κάνει να νιώθω παραγωγικός."
"Νιώθω ικανός. Νιώθω ότι ξέρω ακριβώς τι να κάνω. "
"Αυτό είναι διασκέδαση. Αυτό θα ήθελα να περιμένω από το HubSpot. "
"Η επόμενη γενιά του ιστού" (κάποιος το είπε πραγματικά)
"Δεν μοιάζει με επιχειρηματικό λογισμικό."
"Με κάνει να αισθάνομαι τον έλεγχο."

Εδώ είναι μια ματιά στην εξέλιξη της κατεύθυνσης του σχεδιασμού που προτιμήθηκε περισσότερο από τους πελάτες που συνέντευξη:

Πρώην σχεδιασμός HubSpotΣχεδιασμός που προτιμάται κατά τη διάρκεια του πρώτου γύρου συνεντεύξεωνΕξέλιξη σχεδιασμού για δεύτερο γύρο συνεντεύξεων

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

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

Η δουλειά μας εκείνη την ημέρα ήταν να αποφασίσουμε για το περιθώριο και την επένδυση μερικών από τα πιο ατομικά στοιχεία μας (κουμπιά, χειριστήρια, εισροές κλπ.) - τα δομικά στοιχεία του διεπαφή χρήστη μας.

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

Αλλά.

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

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

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

Διατηρώντας τις ομάδες ευθυγραμμισμένες

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

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

Χρειάζεστε ένα εικονίδιο; Ελάτε έτσι.

Εικόνες από τον Joshua Mulvey, τον Sue Yee και την Chelsea Bathurst

Χρειάζεστε οπτικοποίηση δεδομένων; Το έχεις.

Οπτικοποίηση δεδομένων από τον Drew Condon

Χρειάζεστε ένα κουμπί; Οπως θέλεις.

Έχουμε ένα κύριο κουμπί τώρα. Είναι πορτοκαλί. Μας αρέσει το πορτοκαλί χρώμα.

Χρειάζεστε κυριολεκτικά οτιδήποτε άλλο; Ο καμβάς HubSpot καλύπτεται από εσάς.

Κάθε στοιχείο που υπάρχει στο κιτ Sketch υπάρχει και ως στοιχείο React, καθιστώντας εύκολο να μεταφράσετε οποιοδήποτε mockup σε έναν κώδικα με τον ίδιο τρόπο που συναρμολογείτε τα legos.

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

Αυτό σημαίνει ότι οι προγραμματιστές μας ξοδεύουν περισσότερο χρόνο για την οικοδόμηση. Και αυτό σημαίνει ότι οι σχεδιαστές μας ξοδεύουν περισσότερο χρόνο για να ερευνούν, να δημιουργούν ιδέες και να μετακινούνται, γρήγορα και με υψηλή πιστότητα.

Ακολουθεί μια ματιά στη μέση ροή εργασίας του σχεδιαστή του HubSpot, χρησιμοποιώντας τις βιβλιοθήκες Sketch και τα plugins Runner and Craft (by Invision).

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

Δημιουργία του συστήματος

Το σετ σκίτσων μας είναι ένα κομμάτι ενός μεγαλύτερου συστήματος σχεδιασμού. Προκειμένου να είναι πραγματικά αποτελεσματική μακροπρόθεσμα, χρειαζόμασταν τη δημιουργία εργαλείων που λειτουργούσαν εξίσου αποτελεσματικά για τους προγραμματιστές. Έμαθα ότι ο καλύτερος τρόπος για να δημιουργήσετε συνεπείς, λειτουργικές και ευχάριστες εμπειρίες προϊόντων είναι να κάνουμε πολύ πιο εύκολη τη ζωή εκείνων που κατασκευάζουν αυτές τις εμπειρίες.

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

Κλείνοντας:

Άτομα πάνω από εικονοστοιχεία.
Ταχυδρομείστε πάνω από tacos.
Τα Tacos είναι νόστιμα.
Αλλά οι άνθρωποι χρειάζονται την αλληλογραφία τους.

Πιστωτικές μονάδες:
Εικονογραφήσεις από τον Sue Yee

Πόροι που θεωρήσαμε χρήσιμοι:
Ατομικός Σχεδιασμός από τον Brad Frost
Σχεδιάζοντας την τέλεια επιλογή ημερομηνίας και ώρας από τον Vitaly Friedman
Εύρεση των κατάλληλων παλετών χρωμάτων για απεικονίσεις δεδομένων από τη Samantha Zhang

Δημοσιεύθηκε αρχικά στο Blog του προϊόντος HubSpot