OPSIS ΟΦΘΑΛΜΟΛΟΓΙΚΗ ΚΛΙΝΙΚΗ

OPSIS — Οφθαλμολογική Κλινική, Θεσσαλονίκη

Project επίδειξης. Η OPSIS και η Δρ. Μυρτώ Αναγνού είναι φανταστικές. Δημιουργήσαμε αυτόν τον ιστότοπο για να δείξουμε τι μπορούμε να φτιάξουμε για ένα brand υγείας. Δεν αντιστοιχεί σε πραγματική επιχείρηση και δεν παρέχει ιατρικές συμβουλές.

Το brief

Θέσαμε στους εαυτούς μας ένα brief: ένα ανεξάρτητο οφθαλμολογικό ιατρείο στη Λεωφόρο Νίκης, στη Θεσσαλονίκη. Ο ιστότοπος έπρεπε να αποπνέει την ίδια φροντίδα με τις υπηρεσίες του, να λειτουργεί στα ελληνικά και στα αγγλικά και να μετατρέπει τους επισκέπτες σε ραντεβού.

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

Η ιδέα

Το όνομα προέρχεται από την αρχαία ελληνική λέξη ὄψις, που σημαίνει όραση. Γι' αυτό το «Ο» του λογοτύπου είναι ένα μάτι.

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

Σύστημα σχεδιασμού

• Χρώματα από το εξεταστήριο. Η παλέτα προέρχεται από τη σχισμοειδή λυχνία: το μπλε κοβαλτίου του φίλτρου της και το κιτρινοπράσινο της φλουορεσκεΐνης που λάμπει κάτω από αυτό. Το λευκό του οπτότυπου και ένα βαθύ μπλε-μαύρο ολοκληρώνουν την παλέτα.
• Τυπογραφία. Η Unbounded, μια φαρδιά γραμματοσειρά τίτλων, θυμίζει τα γράμματα ενός οπτότυπου. Η Literata δίνει ζεστό, ευανάγνωστο κείμενο. Η JetBrains Mono αναλαμβάνει μετρήσεις και ετικέτες. Οι ελληνικοί τίτλοι χρησιμοποιούν τη Roboto Flex στο μέγιστο πλάτος της, ώστε οι δύο γλώσσες να έχουν το ίδιο οπτικό βάρος.
• Τεχνικό σχέδιο. Διακεκομμένοι οδηγοί, γραμμές διαστάσεων και σημάδια μέτρησης δείχνουν τι γίνεται στην πολυθρόνα: τοπογραφία κερατοειδούς, μέτρηση ενδοφθάλμιας πίεσης και τομογραφία OCT του αμφιβληστροειδούς.

Βασικά χαρακτηριστικά

• Αφήγηση με την κύλιση. Σκηνές που εξελίσσονται με την κύλιση: το ζουμ μέσα από την κόρη, μια φράση που αποκαλύπτεται λέξη-λέξη και ένα διάγραμμα της εξέτασης σε τρία βήματα.
• Προσομοιωτής μυωπίας. Ένα ρυθμιστικό διοπτριών θολώνει έναν οπτότυπο και ένα σχέδιο του Λευκού Πύργου. Σύρετέ το στο 0,00 και η πόλη γίνεται καθαρή.
• Δίγλωσσος εξαρχής. Πλήρης ελληνική έκδοση, με σωστά κεφαλαία χωρίς τόνους, ελληνικές ημερομηνίες και υποδιαστολή. Ο ιστότοπος εμφανίζεται αυτόματα στα ελληνικά σε browsers με ελληνική γλώσσα.
• Κρατήσεις που σέβονται την πραγματικότητα. Οι διαθέσιμες ώρες προκύπτουν από το ωράριο της κλινικής, μαζί με το ελληνικό διακεκομμένο ωράριο και το απογευματινό διάλειμμα. Λαμβάνεται υπόψη η διάρκεια κάθε εξέτασης, ενώ τα Σαββατοκύριακα αποκλείονται.
• Ζωντανή κατάσταση. Μια ένδειξη δείχνει αν η κλινική είναι ανοιχτή αυτή τη στιγμή, με βάση την ώρα Θεσσαλονίκης.
• Τοπικός χαρακτήρας. Ο Θερμαϊκός, ο Βαρδάρης και κριτικές ασθενών από την Καλαμαριά, την Άνω Πόλη και την Τούμπα.

Υλοποίηση

• Ένα μόνο αρχείο HTML, χωρίς framework και χωρίς διαδικασία build, οπότε φορτώνει γρήγορα και φιλοξενείται οπουδήποτε.
• Canvas για την ίριδα και καθαρή JavaScript για τις σκηνές κύλισης, την αλλαγή γλώσσας και τις κρατήσεις.
• Responsive σχεδιασμός από κινητό έως desktop, με μενού πλήρους οθόνης για κινητά.
• Προσβάσιμος: ορατή εστίαση πληκτρολογίου, εγγενές παράθυρο διαλόγου για την κράτηση, ανακοινώσεις του κειμένου που αλλάζει για αναγνώστες οθόνης και υποστήριξη μειωμένης κίνησης.

Αποτέλεσμα

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

Σας κάναμε να κοιτάξετε προσεκτικά μια κλινική που δεν υπάρχει. Φανταστείτε τι θα κάναμε για μια που υπάρχει.