Σχεδιάζοντας την εμπειρία Web Shyp

Η διαδικασία μας από τον πελάτη πρέπει να ξεκινήσει το προϊόν

Στις 6 Οκτωβρίου απελευθερώσαμε το πρώτο προϊόν μας στο διαδίκτυο ως μέρος της νέας προσφοράς υπηρεσιών της Shyp.

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

Το φόντο

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

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

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

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

Κατανόηση του προβλήματος των χρηστών

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

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

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

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

Πηγαίνοντας σε εθνικό επίπεδο

Μέχρι τώρα, ο Shyp ήταν διαθέσιμος μόνο σε 4 πόλεις - Σαν Φρανσίσκο, Λος Άντζελες, Νέα Υόρκη και Σικάγο. Δεν θα μπορούσαμε να κλιμακώσουμε με κέρδος την υπηρεσία παραλαβής και συσκευασίας μέχρι να βρεθεί κάποιος όγκος. Θέλαμε να λάβουμε τις γνώσεις από αυτές τις αγορές και να τις εφαρμόσουμε σε εθνικό επίπεδο. Η εκτόξευση ενός προϊόντος εκτύπωσης ετικετών σε εθνικό επίπεδο μας επέτρεψε να ανοίξουμε κομμάτια από την προσφορά υπηρεσιών μας χωρίς την υλικοτεχνική επιβάρυνση / κόστος.

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

Η βάση

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

Τυπογραφία και Χρώματα

Η οικογένεια γραμματοσειρών είναι το Graphik, το οποίο επίσης μεταφέραμε στον ιστό. Δουλεύει τέλεια σε εσωτερικές πληροφορίες - πυκνές προβολές τραπεζιού (κλιμάκωση έως και 10px), καθώς και σε μεγαλύτερους τίτλους και μηνύματα.

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

Αρχές σχεδιασμού

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

"Βλέπετε, ένας σπουδαίος σχεδιαστής ξεκινάει με τα whys. Μεταδίδει τις αρχές πίσω από τη σκέψη της και σας αφήνει να νιώσετε σαν να καταλαβαίνετε τις βασικές αξίες από τις οποίες ρέουν όλες οι σχεδιαστικές αποφάσεις της.

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

Αυτές οι αρχές σχεδιασμού μας βοηθούν με:

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

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

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

Εδώ είναι οι αρχές που εφαρμόσαμε κατά το σχεδιασμό της εμπειρίας του διαδικτύου για το Shyp:

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

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

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

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

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

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

Ροές χρηστών

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

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

Σχέδιο

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

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

Η επιλογή μιας διάταξης πίνακα ελέγχου μου επέτρεψε να ολοκληρώσω μερικές εργασίες και να εκπληρώσω τις ανάγκες των χρηστών με μεγάλους όγκους ναυτιλίας, όπως:

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

Η πιο λεπτομερής προβολή του πίνακα ελέγχου εμφανίζεται παρακάτω:

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

Συγκριτική τιμή ναυτιλίας

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

"Επεξεργασία" πλευρική γραμμή

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

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

Σχεδιάζοντας ένα σύστημα

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

Ευτυχώς, είχαμε θεσπίσει κατευθυντήριες γραμμές για το brand και mobile UI που μας έδωσαν ένα καλό μέρος για να ξεκινήσουμε. Ήμασταν σε θέση να αξιοποιήσουμε ορισμένα από τα υπάρχοντα πρότυπα και να εφαρμόσουμε συστηματική σκέψη στο προϊόν.

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

Είσοδοι και κουμπιά

Συστατικά UI

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

Για να μοιραστείτε τους οδηγούς στυλ στην ομάδα μας, χρησιμοποιούμε το GitHub - μπορείτε να διαβάσετε εδώ τη διαδικασία μας.

Βιβλιοθήκη στοιχείων Web

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

Κάποιοι από εσάς μπορεί να θυμάστε με αποκαλύπτοντας μερικές αποκαλυπτικές κορυφές στο Dribbble:

συμπέρασμα

Είμαι πολύ ενθουσιασμένος που είμαι μέρος αυτού του τεράστιου ορόσημου στην ιστορία Shyp. Ήρθαμε πολύ μακριά από το σημείο που ξεκινήσαμε - από ιδεασμό και έρευνα μέχρι μια ολοκληρωμένη εμπειρία web-end.

Τι έπεται?

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

Πάρε με τηλέφωνο

Μη διστάσετε να στείλετε μήνυμα ηλεκτρονικού ταχυδρομείου ή τιτίβισμα σε με με οποιεσδήποτε σκέψεις ή σχόλια που έχετε ή σχολιάζετε παρακάτω. Θα ήθελα πολύ να σας ακούσω!

Ευχαριστώ για την ανάγνωση!

ΥΣΤΕΡΟΓΡΑΦΟ. Ευχαριστώ πολύ τον Μιχαί για την ανατροφοδότηση! Επίσης - προσλαμβάνουμε έναν φοβερό σχεδιαστή επικοινωνιών. Διαβάστε περισσότερα και κάντε κλικ εδώ: https://jobs.lever.co/shyp