Πώς σχεδιάσαμε το Foursquare Swarm 5.0

Αναβαθμίζοντας την εφαρμογή Lifelog

Κατά τη διάρκεια των τελευταίων οκτώ μηνών, η ομάδα Swarm ήταν σκληρή στην έρευνα, την κατασκευή πρωτοτύπων και την οικοδόμηση προς το Swarm 5.0. Την Τρίτη ξεκινήσαμε. (Κάντε λήψη του Swarm 5.0 τώρα.) Ήταν μια μεγάλη επιχείρηση που εμπλέκονταν πολλούς ανθρώπους. Ο συν-ιδρυτής της Foursquare Dennis Crowley έχει ήδη μοιραστεί γιατί μας κάναμε αυτές τις αλλαγές, πράγμα που σημαίνει ότι μπορώ να εξηγήσω τι, ακριβώς, είχαμε κάνει όλο αυτό το διάστημα.

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

Ξεκινώντας

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

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

Μερικές πρώτες ιδέες σκίτσων

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

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

Η τελική εφαρμογή Chrome

Αυτές οι ομάδες επίσης αγάπησαν τον επανασχεδιασμένο lifelog (δείτε το post της Dennis για περισσότερα σχετικά με αυτό το θέμα), το οποίο βάζουμε μπροστά και στο κέντρο, και το καθολικό χαρακτηριστικό αναζήτησης, που βρίσκεται πλέον στην κορυφή της οθόνης. Ήταν σαφές ότι ήμασταν στο σωστό δρόμο.

Ενημέρωση του εσωτερικού μας οδηγού στυλ

Το Swarm είχε πάντα ένα μεγάλο θεμέλιο οπτικού σχεδιασμού και δεν θέλαμε να το χάσουμε αυτό όταν σκεφτόμαστε 5.0 και πέρα.

Τυπογραφία, χρώματα και σύμβολα Σκίτσο στον εσωτερικό οδηγό στυλ μας

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

Εικονίδια στον εσωτερικό οδηγό στυλ μας

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

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

Επόμενο επάνω: Επανασχεδιασμός της αρχικής οθόνης

Η επανασχεδιασμένη αρχική οθόνη

Όπως ανέφερα, γνωρίζαμε ότι θέλαμε να επιδείξουμε τα check-in ενός χρήστη με έναν πολύ προεξέχοντα τρόπο για να δημιουργήσουμε ένα προσωπικό lifelog. Εξερευνήσαμε πολλαπλές επαναλήψεις της αρχικής οθόνης. Αναπτύξαμε κατευθύνσεις σχεδίασης που έτρεξαν τη γκάμα από αρκετά ασφαλές σε τρελό. Θέλαμε να εξετάσουμε ολόκληρο το φάσμα και να εξαντλήσουμε όλες τις ιδέες.

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

Κάρτα προεπισκόπησης αρχικής σελίδας και χάρτη

Ο χάρτης στην αρχική οθόνη ήταν δεδομένος: γνωρίζαμε ότι ο χάρτης, ο οποίος δείχνει κάθε check-in του χρήστη, θα ήταν πάντα εμφανής και διαδραστικός.

Ενημέρωση των δύο δυναμικών ροών του Swarm

Μόλις αποφασίσαμε να απλοποιήσουμε την οπτική γλώσσα του Swarm, αποφασίσαμε να ενημερώσουμε τις υπάρχουσες δυναμικές ροές στο Swarm την επόμενη μας προτεραιότητα. Δεδομένου ότι ανεβάζουμε το ιστορικό check-in στην αρχική σελίδα της εφαρμογής (αντί να είναι υποβρύχιο στο δικό σας προφίλ), τα κελιά τροφοδοσίας ελέγχου χρειάζονται για να ταιριάξουν προσεκτικά με τα στοιχεία των στοιχείων ελέγχου των φίλων σας. Σημαίνει ότι η αρχική οθόνη (καρτέλα Χρονολόγιο) θα πρέπει να αισθάνεται πολύ παρόμοια με την καρτέλα "Φίλοι", καθώς και οι δύο επισημάνσεις επισημάνσεων. Αυτό ήταν δύσκολο για μερικούς λόγους.

Συγκρίσεις ελεγχόμενων κυψελών τροφοδοσίας από τις καρτέλες
  1. Θέλαμε να συνδέσουμε εικονίδια κατηγορίας στην αρχική οθόνη για να δημιουργήσουμε κάθετες γραμμές, οι οποίες δημιουργούν μια σύνδεση μεταξύ των τοποθεσιών που επισκέπτεστε. Αυτό ήταν δύσκολο γιατί χρειαζόμασταν μια λύση που να δούλεψε με τους πολυάριθμους τύπους κυττάρων. Καταλήξαμε να χρησιμοποιούμε ένα μεγάλο όγκο παραγεμίσματος στα αριστερά του check-in για να επιτρέψουμε μια κάθετη γραμμή να πάει κατευθείαν στην οθόνη.
  2. Αυτά τα κελιά έπρεπε επίσης να διατυπώσουν με σαφήνεια ότι μπορείτε να επιβεβαιώσετε ή να αρνηθείτε εάν ήσασταν σε κάποιο μέρος. Για να το λάβουμε υπόψη, δημιουργήσαμε γκρι (μη επιβεβαιωμένες) επισκέψεις που εμφανίζονται στη χρονολογική σειρά. Αυτά ξεχωρίζουν με σκοπό, ώστε να μπορείτε γρήγορα να επιβεβαιώσετε ή να αρνηθείτε ότι είστε σε αυτό το συγκεκριμένο μέρος - και στη συνέχεια να επιστρέψετε στην εξερεύνηση του κόσμου.
  3. Επίσης, δεν θέλετε να βλέπετε το δικό σας avatar να επαναλαμβάνεται πολλές φορές στην καρτέλα "Χρονοδιάγραμμα", οπότε χρειαζόμασταν να υπολογίσουμε πώς να κάνετε την καρτέλα "Χρονοδιάγραμμα" να μοιάζει παρόμοια με την καρτέλα Κοινωνική ροή. Χρησιμοποιήσαμε ένα εικονίδιο κατηγορίας μέσα σε έναν κύκλο στην καρτέλα "Χρονοδιάγραμμά μας", το οποίο βοήθησε με συνέπεια ανάμεσα στις καρτέλες.

Επανασχεδιασμός του προφίλ

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

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

Μερικές διαφορετικές καταστάσεις μπορεί να είναι ένα προφίλ

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

Δύο βασικές συμβουλές σχεδίασης

Μεγάλες απελευθερώσεις δεν συμβαίνουν χωρίς ζευγάρι μεγάλες λήψεις. Εδώ είναι δικό μου:

  1. Πάρτε τους μηχανικούς εμπλεκόμενους στην αρχή. Κάτι που συνεχίζω να προσπαθώ να βελτιώσω είναι να εμπλακούν οι μηχανικοί νωρίτερα στη διαδικασία σχεδιασμού. Κάποιες φορές οι αποφάσεις γίνονταν γρήγορα και είμαι βέβαιος ότι θα μπορούσα να εξοικονομήσω χρόνο με την εξέταση των πρώιμων σχεδίων από κάποιον με λίγο περισσότερη τεχνική γνώση για να μου πείτε εάν η ιδέα μου είναι απλά υπερβολικά τρελή και ενδεχομένως εκτός του πεδίου εφαρμογής του έργου . Αγωνίστηκα σε αυτό μερικές φορές κυρίως λόγω της ταχύτητας που όλη η ομάδα κινείται. Μερικές φορές μια μικρή απόφαση σχεδιασμού μπορεί να έχει μεγάλο τεχνικό αντίκτυπο. Είναι σε μένα να συνεχίσω να εμπλέκω τους μηχανικούς νωρίτερα για να το καταλάβω.
  2. Μοιραστείτε νωρίτερα, μοιραστείτε συχνά και ταξινομήστε μέσα από την ακαταστασία. Λέω τον εαυτό μου να μπαίνει σε κάθε έργο ή / και χαρακτηριστικό στο οποίο εργάζομαι (αν και δεν είμαι πάντα υπέροχος σε αυτό). Υπάρχουν πολλοί άνθρωποι και ομάδες που θέλουν να συμπεριληφθούν στις πρώτες οδηγίες σχεδιασμού, αλλά δεν είναι πάντοτε ανατροφοδότηση που μπορεί να προσβληθεί. Μερικές φορές είναι δύσκολο να περικόψετε μερικά από αυτά για να πάρετε μια σαφή και ουσιαστική άποψη. Είναι πάντα καλό να θυμάστε ότι, όπως είναι σημαντικό να μοιραστείτε, είναι δική σας δουλειά ως σχεδιαστής να παίρνετε όλα τα σχόλια και να τα χρησιμοποιείτε για να λαμβάνετε τεκμηριωμένες αποφάσεις.

Εν τέλει

Κοιτάζοντας πίσω σε όλους τους σχεδιασμούς, τα πρωτότυπα, την έρευνα, το σχεδιασμό και την οικοδόμηση - ξεκίνημα Swarm 5.0 ήταν ένα τεράστιο κατόρθωμα. Η ομάδα μηχανικών επανέγραψε πολλές απόψεις πυρήνα στο Swarm και σχεδόν κάθε οθόνη άλλαξε με κάποιο τρόπο. 20+ άνθρωποι ήταν αφοσιωμένοι στο να δουλεύουν στην ομάδα Swarm τους τελευταίους οκτώ μήνες, μεταξύ των οποίων οι Sam Brown και Jack Osborne, οι οποίοι βοήθησαν στο σχεδιασμό.

Soooo τι περιμένεις !? Κάντε λήψη του Swarm 5.0 τώρα. Ελπίζουμε να σας αρέσει.