Bruno Coffee Stores

Επισκόπηση

Η Bruno Coffee Stores ξεκίνησε από τη Λάρισα το 2008 και σήμερα μετρά 129 καταστήματα σε 37 πόλεις σε Ελλάδα, Κύπρο και Αλβανία. Το brand είναι τολμηρό και ζεστό — το χαρακτηριστικό κίτρινο, το γκρι λογότυπο, το «Just better coffee!» — όμως το website του θύμιζε ένα τυπικό εταιρικό template. Στόχος ήταν ένα site εξίσου σίγουρο με το brand: premium, παιχνιδιάρικο και εύκολο σε κάθε συσκευή.

Η πρόκληση

Να αφηγείται την ιστορία της Bruno, να προβάλλει το μενού και να προσελκύει συνεργάτες franchise, απευθυνόμενο σε δύο κοινά: στους λάτρεις του καφέ και στους επενδυτές.
Να κάνει τα 129 καταστήματα εύκολα στην αναζήτηση, στα ελληνικά και στα αγγλικά.
Να αντικαταστήσει ένα παλιό site WordPress χωρίς να χαθεί η παρουσία του στις μηχανές αναζήτησης.

Σχεδιασμός

Η παλέτα είναι σκόπιμα λιτή: κίτρινο Bruno, γκρι και ένα ζεστό κρεμ. Η Literata (μια έντονη editorial serif) συνδυάζεται με τη Manrope για τα κείμενα. Στους τίτλους υπάρχει μια γκρι λωρίδα έμφασης, εμπνευσμένη από τα γραφικά του ίδιου του brand. Οι εικόνες προϊόντων και ατμόσφαιρας δημιουργήθηκαν στο Higgsfield πάνω σε ένα ενιαίο οπτικό ύφος, ώστε όλες, από τα ποτήρια με το πιτσίλισμα καφέ μέχρι τις λήψεις των ροφημάτων, να μοιάζουν με μία φωτογράφηση.

Η κίνηση ως αφήγηση

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

τα ποτήρια της αρχικής πετούν μέσα στον κίτρινο κύκλο του μενού, ενώ το κίτρινο της οθόνης συρρικνώνεται γύρω τους·
ο κύκλος γλιστρά και γίνεται ο χάρτης καταστημάτων, όπου οι κουκκίδες απλώνονται και οι πινέζες πέφτουν στη θέση τους·
ο χάρτης μεγαλώνει μέχρι το κίτρινό του να γίνει το φόντο της ενότητας franchise·
το κίτρινο χωρίζεται σε τρεις κύκλους με φωτογραφίες για το «Τι κάνει το Bruno μοναδικό».

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

Λειτουργίες

Μενού: κατηγορίες, φίλτρα «νέα» και «δημοφιλή», και ζωντανή προεπισκόπηση του ροφήματος.
Αναζήτηση καταστημάτων: αναζήτηση που αγνοεί τους τόνους, φίλτρα ανά πόλη και χάρτης της Ελλάδας με κουκκίδες, πάνω στον οποίο είναι σημειωμένα τα καταστήματα.
Franchise: τέσσερα concept με εύρος επένδυσης, τα βήματα μέχρι το άνοιγμα και φόρμα εκδήλωσης ενδιαφέροντος.
Σελίδες εργασίας, νέων, επικοινωνίας και απορρήτου, όλες δίγλωσσες.
Προσαρμοσμένη σελίδα 404: ένα αναποδογυρισμένο ποτήρι Bruno που χύνεται στη σελίδα.

Για κάθε οθόνη

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

Ταχύτητα και SEO

Είναι στατικό site χωρίς framework, με φιλοξενία στη Vercel. Διαθέτει καθαρές διευθύνσεις URL, ανακατευθύνσεις 301 από κάθε παλιά διεύθυνση του bruno.gr, canonical tags, κάρτες Open Graph, σήμανση schema.org, sitemap και συμπιεσμένες εικόνες WebP με σταθερές διαστάσεις ώστε η σελίδα να μη «πηδάει» καθώς φορτώνει. Όλο το υλικό φιλοξενείται στο ίδιο το site, οπότε τίποτα δεν εξαρτάται από το παλιό.