Mental BoundΗ πρόκληση
Ένας premium πάροχος ενοικίασης σκαφών και θαλάσσιων μεταφορών στα ελληνικά νησιά χρειαζόταν μια πλατφόρμα που θα λειτουργούσε τόσο ως εργαλείο κράτησης για πελάτες όσο και ως διεπαφή διαχείρισης στόλου. Οι ταξιδιώτες χρειάζονταν έναν διαισθητικό τρόπο να ανακαλύπτουν σκάφη, να συγκρίνουν επιλογές και να υποβάλλουν ερωτήματα — ενώ η επιχείρηση χρειαζόταν δομημένη συλλογή δεδομένων και ευφυή δρομολόγηση αιτημάτων κράτησης.
Η υπάρχουσα ροή εργασίας βασιζόταν σε χειροκίνητα κανάλια επικοινωνίας που δεν μπορούσαν να κλιμακωθούν με τη ζήτηση σεζόν ή την πολυπλοκότητα του συντονισμού charters και μεταφορών σε πολλαπλές τοποθεσίες.
Τι κατασκευάσαμε
Μια full-stack web πλατφόρμα χτισμένη με React και Next.js, bundled μέσω Turbopack και deployed στο edge infrastructure του Vercel για γρήγορα, server-rendered page loads. Η εφαρμογή χρησιμοποιεί καθαρή, SEO-friendly δρομολόγηση με locale-based URL prefixes για πλήρη διεθνοποίηση. Structured data (JSON-LD) υλοποιείται σε ολόκληρη την εφαρμογή για βελτιστοποίηση μηχανών αναζήτησης.
Κατάλογος σκαφών και αναζήτηση
Ο πυρήνας της πλατφόρμας είναι ένας δυναμικός, φιλτραριζόμενος κατάλογος σκαφών που επιτρέπει στους χρήστες να περιηγούνται ανά τύπο, τοποθεσία και κατηγορία ενοικίασης. Η σελίδα καταχωρίσεων διαθέτει σύστημα διπλής προβολής: ένα responsive grid καρτών με φωτογραφίες σκαφών, τιμές, προδιαγραφές και χωρητικότητα, παράλληλα με μια διαδραστική προβολή χάρτη μέσω Leaflet.js με OpenStreetMap και OpenSeaMap tile layers.
Ο χάρτης περιλαμβάνει clustered markers και custom εικονίδια τύπου σκάφους για διαισθητική γεωγραφική εξερεύνηση. Ξεχωριστές προβολές διαχειρίζονται charters (φίλτρο μονής τοποθεσίας) και point-to-point μεταφορές (ζεύγος φίλτρων αφετηρίας/προορισμού με οπτικοποίηση διαδρομής).
Λεπτομέρειες σκάφους και κράτηση
Κάθε σκάφος διαθέτει αποκλειστική σελίδα λεπτομερειών με gallery πολλαπλών εικόνων και thumbnail πλοήγηση, δομημένα blocks προδιαγραφών για απόδοση κινητήρα, διαστάσεις, χωρητικότητα και λεπτομέρειες καυσίμου, καθώς και πλούσια ενότητα περιγραφής.
Ένα sticky sidebar φιλοξενεί τη φόρμα ενδιαφέροντος, η οποία προσαρμόζεται μεταξύ transfer και cruise modes. Περιλαμβάνει επιλογείς αναχώρησης/προορισμού, διεθνές τηλεφωνικό input με country code picker, επιλογείς ημερομηνίας και ώρας, stepper μεγέθους ομάδας και πεδίο ελεύθερου μηνύματος — όλα καταλήγουν σε υποβολή αιτήματος κράτησης.
AI-powered booking assistant
Το εξέχον χαρακτηριστικό είναι ένας ενσωματωμένος AI assistant προσβάσιμος από τη γραμμή πλοήγησης. Το chatbot αναζητά τη βάση δεδομένων σκαφών σε πραγματικό χρόνο, επιστρέφοντας πλούσια διαδραστικά UI elements απευθείας στο chat — συμπεριλαμβανομένου ενός swipeable carousel καρτών σκαφών με φωτογραφίες, προδιαγραφές και inline "Επιλέξτε αυτό το σκάφος" action buttons.
Μόλις ο χρήστης επιλέξει ένα σκάφος, ο assistant τον καθοδηγεί μέσα σε ένα πλήρες multi-step booking flow συνομιλιακά, συλλέγοντας τύπο charter, προτιμώμενες ημερομηνίες και λεπτομέρειες ταξιδιού βήμα-βήμα. Οι κάρτες σκαφών ενημερώνουν δυναμικά την κατάστασή τους μέσα στο chat, εμφανίζοντας κατάσταση επιλογής και pricing context. Το αποτέλεσμα είναι ένα αρμονικό πάντρεμα natural language interaction και δομημένης συλλογής δεδομένων.
Επικοινωνία
Μια αποκλειστική σελίδα επικοινωνίας παρέχει δομημένη φόρμα ερωτημάτων με κατηγοριοποίηση θέματος, μαζί με εμφανιζόμενα στοιχεία επικοινωνίας και πληροφορίες τοποθεσίας μαρίνας.
Σχεδιασμός και UX
Ο οπτικός σχεδιασμός ακολουθεί μια καθαρή, premium αισθητική με teal accent παλέτα χρωμάτων, γενναιόδωρο whitespace, στρογγυλεμένα card components και διακριτική εικονογραφία — σε αρμονία με τη luxury ναυτιλιακή εμπειρία που αντιπροσωπεύει. Η διάταξη είναι πλήρως responsive σε όλες τις συσκευές, με ιδιαίτερη προσοχή στις touch-friendly αλληλεπιδράσεις για mobile χρήστες.