Τους τελευταίους τέσσερις μήνες ξαναχτίσαμε μεγάλο μέρος του καταστήματος Culture Shock Club. Η δουλειά έφτασε τις 500.000 και πλέον αλλαγμένες γραμμές, ανάμεσα σε προσθήκες, αφαιρέσεις και αναδιαρθρώσεις κώδικα. Το αποτέλεσμα είναι ένα πιο γρήγορο site, μια πιο ξεκάθαρη διαδικασία αγοράς και πιο χρήσιμοι λογαριασμοί πελατών.
Βασικά στοιχεία
- Τέσσερις μήνες rebuild του storefront: πάνω από 500,000 αλλαγμένες γραμμές σε προσθήκες, αφαιρέσεις και refactors.
- Κάθε κομμάτι ανέβηκε μόλις ήταν έτοιμο και μετά συνεχίσαμε το φινίρισμα, όχι ένα μόνο relaunch.
- Οι βασικές σελίδες πιάνουν 95 or higher στα Lighthouse σε mobile και desktop.
- Εστίαση: πιο γρήγορο first screen, καθαρότερη αρχική, quick add και αναζήτηση, σελίδες προϊόντος, searchable ιστορικό παραγγελιών.
Δεν τα κρατήσαμε όλα για ένα μεγάλο relaunch. Βγάζαμε κάθε κομμάτι μόλις ήταν έτοιμο και μετά συνεχίζαμε να το βελτιώνουμε.
Μια πιο γρήγορη πρώτη οθόνη
Η προηγούμενη αρχική σελίδα φόρτωνε ένα καρουζέλ προϊόντων πριν δείξει την πρώτη πλήρη προβολή. Έτσι έπρεπε να φορτώσουν αμέσως εικόνες, παραλλαγές, τιμές, διαθεσιμότητα και ο κώδικας του καρουζέλ.
Η νέα αρχική σελίδα φορτώνει πρώτα την εναρκτήρια εικόνα της. Οι ενότητες προϊόντων, οι προτάσεις, τα εργαλεία ανάλυσης και συναίνεσης φορτώνουν αργότερα ή μόνο όταν χρειάζονται.
Μειώσαμε επίσης την αρχική δουλειά για γραμματοσειρές, CSS και scripts. Τα αρχεία αποθηκεύονται καλύτερα στην cache και οι ενέργειες στο καλάθι δεν ξαναφορτώνουν πια άσχετα δεδομένα της σελίδας.
Οι βασικές σελίδες πιάνουν πλέον 95 ή περισσότερο στα τεστ Lighthouse μας, σε κινητό και υπολογιστή. Γίνονται επίσης πιο γρήγορα διαθέσιμες, μένουν πιο σταθερές στην περιήγηση και ζητούν λιγότερη επεξεργασία από τα κινητά.
Μια αρχική σελίδα με πιο καθαρή δομή
Η προηγούμενη αρχική σελίδα βασιζόταν σχεδόν μόνο σε μία ροή προϊόντων. Στο νέο layout κάθε ενότητα έχει συγκεκριμένο ρόλο.
Οι νέες κυκλοφορίες μπορούν να εμφανίζονται σε συμπαγή γκαλερί και οι μεγαλύτερες συλλογές σε πιο πυκνά πλέγματα. Τα προϊόντα που φαίνονται ήδη πάνω δεν ξαναεμφανίζονται στις επόμενες ενότητες, οπότε υπάρχει λιγότερη επανάληψη όσο κάνετε scroll.
Η αρχική σελίδα μπορεί πλέον να παρουσιάσει μια κυκλοφορία, να αναδείξει παλαιότερα προϊόντα και να οδηγήσει τους επισκέπτες σε διάφορα σημεία του καταλόγου χωρίς να επαναλαμβάνει τα ίδια κομμάτια.
Γρήγορη προσθήκη και αναζήτηση χωρίς αλλαγή σελίδας
Η επιλογή μιας παραλλαγής προϊόντος δεν πρέπει να σας βγάζει από τη σελίδα.
Η γρήγορη προσθήκη ανοίγει πλέον ως πάνελ από κάτω στο κινητό και ως φαρδύτερο πάνελ στον υπολογιστή. Και οι δύο εκδοχές έχουν χώρο για εικόνες προϊόντος, παραλλαγές και πληροφορίες μεγεθών.
Η προβλεπτική αναζήτηση δείχνει αποτελέσματα όσο πληκτρολογείτε και κρατά διαθέσιμες τις πρόσφατες αναζητήσεις. Οι αναλυτικές κάρτες αποτελεσμάτων φορτώνουν μόνο όταν χρειάζονται, ώστε να γίνεται λιγότερη δουλειά πριν ξεκινήσει κανείς να ψάχνει.
Έτσι μπορείτε να συγκρίνετε προϊόντα, να διαλέξετε επιλογή και να το προσθέσετε στο καλάθι χωρίς να χάσετε το σημείο όπου βρισκόσασταν.
Σελίδες προϊόντων γύρω από την απόφαση αγοράς
Αναδιοργανώσαμε τις σελίδες προϊόντων γύρω από τις πληροφορίες που χρειάζεστε για να αγοράσετε. Τα μέσα του προϊόντος, η επιλεγμένη παραλλαγή, η τιμή και τα κουμπιά αγοράς εμφανίζονται πρώτα. Μεγέθη, αποστολή, φροντίδα και επιστροφές μένουν πρόχειρα.
Η γκαλερί υποστηρίζει πλέον εικόνες, βίντεο, εξωτερικό βίντεο και περιεχόμενο 3D. Αν αλλάξετε χρώμα, η γκαλερί μπορεί να πάει κατευθείαν στην αντίστοιχη εικόνα.
Τα σχετικά προϊόντα εμφανίζονται σε ξεχωριστή ενότητα, «More to Explore». Μένουν προσβάσιμα χωρίς να ανταγωνίζονται τις βασικές πληροφορίες του προϊόντος.
Ένα καλάθι που ανταποκρίνεται αμέσως
Παλιότερα το καλάθι γινόταν αργό ή ασυνεπές όσο επεξεργαζόταν αλλαγές. Ξαναχτίσαμε τον τρόπο που ενημερώνεται, ώστε να δίνει άμεση απόκριση.
Αλλαγές ποσότητας, αφαιρέσεις, κωδικοί έκπτωσης και ενημερώσεις τιμών εμφανίζονται ενώ ο server επιβεβαιώνει το τελικό αποτέλεσμα. Μετά το καλάθι ευθυγραμμίζει τις ποσότητες και τα σύνολα που δείχνει με την επιβεβαιωμένη απάντηση.
Η πρόοδος των προσφορών είναι επίσης πιο ξεκάθαρη. Το καλάθι δείχνει πόσο μένει μέχρι τη δωρεάν αποστολή ή μια προσφορά για περισσότερα κομμάτια και επιβεβαιώνει όταν τη φτάσετε.
Το πλήρες καλάθι και το πλαϊνό καλάθι λειτουργούν πλέον σε μεγάλο βαθμό με τον ίδιο τρόπο. Έτσι και οι δύο δρόμοι προς το ταμείο είναι πιο συνεπείς.
Πιο χρήσιμοι λογαριασμοί πελατών
Το κατάστημα μένει πλέον χρήσιμο και μετά την ολοκλήρωση της αγοράς.
Οι λογαριασμοί πελατών έχουν ιστορικό παραγγελιών με αναζήτηση, μικρογραφίες προϊόντων, σύνολα, ημερομηνίες και κατάσταση αποστολής. Κάθε σελίδα παραγγελίας μπορεί να δείχνει λεπτομέρειες για αποστολή, επιστροφή χρημάτων και επιστροφή προϊόντων.
Για τις παραγγελίες που το επιτρέπουν, μπορείτε να επιλέξετε προϊόντα, ποσότητες και λόγο επιστροφής πριν στείλετε αίτημα από τον λογαριασμό σας.
Ξαναχτίσαμε επίσης την επιλογή χώρας και γλώσσας. Μπορείτε να ψάξετε με όνομα χώρας, κωδικό χώρας, νόμισμα ή γλώσσα, με αποτελέσματα ομαδοποιημένα ανά περιοχή. Όταν αλλάζετε αγορά, μένετε στην ίδια σελίδα και ενημερώνονται η γλώσσα και οι τιμές.
Γιατί το λέμε Energy Edition
Κάθε κομμάτι αυτής της έκδοσης στοχεύει στον ρυθμό. Η αρχική σελίδα κάνει λιγότερη δουλειά πριν εμφανιστεί για πρώτη φορά. Η περιήγηση θέλει λιγότερες αλλαγές σελίδας. Το καλάθι ανταποκρίνεται αμέσως και οι λογαριασμοί πελατών αναλαμβάνουν περισσότερα μετά την αγορά.
Καμία μεμονωμένη λειτουργία δεν ορίζει αυτή την ενημέρωση. Είναι το συνολικό αποτέλεσμα της ανακατασκευής των σημείων του καταστήματος που χρησιμοποιείτε περισσότερο.
Η δουλειά συνεχίζεται. Πείτε μας όταν κάτι μοιάζει αργό, ασαφές ή σας μπαίνει εμπόδιο.
