Clinify
Sistem de gestiune pentru o clinică stomatologică
Un concept project care acoperă tot traseul: de la landing page-ul unde pacientul descoperă clinica, până la dashboard-ul intern unde recepția gestionează programările. Două interfețe conectate, un singur sistem.
2 interfețe · 4 pași booking flow · 40+ componente · design system complet · desktop + mobile
Skill-uri implicate
Context
Clinicile stomatologice din România au de cele mai multe ori un site de prezentare simplu, eventual un număr de telefon și un formular de contact. Programările se fac prin telefon, recepția le notează manual, iar conflictele de orar apar constant. Clinify pornește de la întrebarea: cum ar arăta un sistem complet care rezolvă atât experiența pacientului, cât și munca recepției?
Ce face Clinify concret
Landing page unde pacientul vede serviciile, doctorii și testimonialele clinicii
Booking app în 4 pași prin care pacientul își rezervă singur programarea
Dashboard de recepție cu calendar, lista de programări, pacienți și setări
Totul sincronizat: o programare nouă apare instant în calendarul recepției
Problema de rezolvat
Provocarea reală nu a fost vizuală. Provocarea a fost să proiectez două interfețe complet diferite ca nevoie (pacient vs. recepție) care funcționează împreună ca un singur sistem:
Pacientul vrea simplicitate și viteză,
Recepția vrea control și vizibilitate pe tot ce se întâmplă.
Dacă le tratezi separat, ajungi cu două produse care nu comunică. Dacă le suprapui, complici experiența pentru ambii utilizatori.
Riscuri pe care le-am evitat
Booking prea complex care descurajează pacientul să finalizeze
Dashboard supraaglomerat care face recepția mai lentă, nu mai rapidă
Conflicte de programare când două persoane rezervă același slot
Lipsa unei structuri care să scaleze (servicii noi, doctori noi)
Arhitectura informațională
Am pornit cu structura înainte de orice ecran. Am mapat toate fluxurile: ce face pacientul pas cu pas, ce vede recepția, unde se conectează cele două interfețe și care sunt punctele critice (verificare disponibilitate în timp real, sincronizare date, trimitere confirmare).
Riscuri pe care le-am evitat
App Pacient: Landing Page → Alege serviciul → Alege doctorul (opțional) → Data și ora → Date personale → Confirmare
Dashboard Recepție: Panou general, Calendar săptămânal, Toate programările, Toți pacienții, Fișă pacient, Setări
Conectări: verificare disponibilitate în timp real, sincronizare date pacient, trimitere automată a programării în dashboard
Design System
Am construit un design system complet înainte de a începe ecranele. Paletea de culori, tipografie, componente reutilizabile, spacing, shadows.
Scopul a fost dublu: consistență vizuală între cele două interfețe și scalabilitate pentru ecrane noi.
Ce include sistemul
Paletă primară Sage Green cu 7 nuanțe, de la 50 la 900
Neutrale (10 nuanțe) + culori semantice: success, warning, error, info
Tipografie duală: Satoshi pentru headings, General Sans pentru body
Componente: butoane (4 tipuri × 3 mărimi), inputs (8 variante cu stări), status badges, carduri, avataruri, time slots
Iconografie: Google Material Icons
Landing Page
Landing page-ul este primul punct de contact. Trebuie să facă trei lucruri: să prezinte clinica, să construiască încredere și să ghideze pacientul spre programare. Am construit varianta desktop și mobile, cu focus pe un CTA clar în fiecare secțiune.
Structura paginii
Hero cu headline, statistici și CTA principal
Secțiune servicii cu carduri individuale
Cum ajungi să fii pacinet Clinify
Prezentare echipă medicală cu profile și specializări
Procesul de programare în 4 pași
Testimoniale pacienți
FAQ cu accordion
CTA final + footer
Fluxul de rezervare
Booking-ul este nucleul întregului sistem. L-am structurat în 4 pași cu un indicator de progres "Pasul 1/4" vizibil constant. Fiecare pas cere o singură decizie, fără scrolling lung sau formulare complicate. Dacă pacientul începe, trebuie să termine.
Cei 4 pași
Pasul 1: Alege serviciul (carduri vizuale cu durată) + preferință doctor (opțional)
Pasul 2: Alege data și ora (mini calendar + grid de sloturi disponibile)
Pasul 3: Completează datele personale (nume, telefon, email, observații)
Pasul 4: Verifică și confirmă (sumar complet cu opțiune de editare per secțiune)
Dashboard și gestiune
Dashboard-ul de recepție este interfața prin care se gestionează totul: programări, calendar, pacienți, conflicte.
Am pornit de la un principiu simplu: recepția trebuie să vadă tot ce contează dintr-o privire, fără click-uri inutile.
Ecranele principale
Login și Signup - autentificare clasică (email + parolă) și socială (Google, Apple), layout split cu branding pe stânga și formular pe dreapta
Panou general - statistici zilnice (programări azi, următoarea programare, rata de no-show, locuri disponibile), lista programărilor următoare și activitate recentă
Calendar săptămânal - blocuri vizuale color-coded pe status, vizibilitate pe conflicte și navigare rapidă între săptămâni
Toate programările - filtre (toate, azi, în așteptare, confirmate, anulate), search și paginare
Toți pacienții - lista completă, statistici per pacient și acces rapid la fișa individuală
Fișă pacient - informații personale, istoric programări, statistici, observații medicale și acțiuni rapide
Setări clinică - configurarea datelor clinicii, programul de lucru și preferințe de programare
Setări profil - datele personale ale utilizatorului, preferințe de notificări și securitate
Decizii de design
De ce verdez, nu albastru?
90% dintre aplicațiile medicale folosesc albastru. E sigur, dar e și invizibil. Am ales sage green (#1B6B4A) pentru că transmite aceleași valori (sănătate, echilibru, încredere) dar diferențiază vizual produsul. Nuanța sage adaugă căldură, face interfața mai apropiată, mai puțin clinică.
De ce chip "Pasul 1/4" în loc de stepper clasic?
Am testat vizual ambele variante. Stepper-ul multi-step cu linie de progres arăta bine pe desktop, dar pe mobile ocupa prea mult spațiu și crea confuzie vizuală. Un chip simplu "Pasul 1/4" comunică aceeași informație, ocupă mai puțin loc și funcționează identic pe ambele breakpoint-uri.
De ce nu am inclus dark mode?
Clinicile stomatologice operează în medii bine iluminate. Recepția folosește dashboard-ul pe un desktop la birou, în lumină puternică. Light mode transmite curățenie și profesionalism, valori esențiale în context medical. Dark mode ar fi dublat volumul de muncă fără un beneficiu real pentru utilizatorii finali.
De ce am ales conținut real, nu placeholder?
Am folosit servicii stomatologice reale (consultație, igienizare, obturație, albire) în loc de "Serviciu 1", "Serviciu 2". Conținut real face designul testabil: vezi imediat dacă un card e prea mic pentru un titlu lung sau dacă prețul și durata încap pe același rând. Placeholder-urile ascund probleme de layout.
Ce am învățat?
Clinify a fost un proiect de product design end-to-end. Nu doar ecrane, ci un sistem: două interfețe cu utilizatori diferiți, conectate printr-o logică comună. Am lucrat și pe alte proiecte de acest tip, dar sunt protejate de NDA. Ce am consolidat aici este că cele mai importante decizii nu sunt vizuale, ci structurale. Unde pui o informație, ce ascunzi, ce arăți prima dată.
Ce mi-ar plăcea să fac în continuare:
Dacă aș fi apucat să implementez proiectul, aș fi vrut să testez fluxul de booking cu utilizatori reali pentru a vedea dacă cei 4 pași sunt suficient de clari și rapizi.
La fel, aș fi testat dashboard-ul cu recepția unei clinici stomatologice reale, pentru a valida eficiența acestuia în activitatea de zi cu zi.