Caso de estudio Case study
Medicina Diagnóstica - Centro Médico
Full-stack Developer · Kensiweb Full-stack Developer · Kensiweb
Plataforma web institucional para centro médico con sistema de turnos online integrado, construida con Next.js, Tailwind CSS v4 y GSAP. +90% de turnos gestionados digitalmente y 96/100 en Lighthouse. Institutional web platform for a medical center with an integrated online booking system, built with Next.js, Tailwind CSS v4 and GSAP. +90% digital bookings, 96/100 Lighthouse score.
01. El desafío The challenge
Medicina Diagnóstica necesitaba una plataforma web moderna que combinara su presencia institucional con un sistema de turnos online funcional. Los pacientes debían poder reservar turnos de forma autónoma sin llamar por teléfono, y el centro requería métricas claras de adopción. Además, al ser un centro de salud, la accesibilidad y el SEO médico eran prioridades absolutas. Medicina Diagnóstica needed a modern web platform that combined their institutional presence with a functional online booking system. Patients had to be able to book appointments autonomously without calling, and the center needed clear adoption metrics. As a healthcare facility, accessibility and medical SEO were top priorities.
02. Proceso creativo Creative process
A. Diagnóstico UX A. UX audit
Analicé el flujo actual de atención: el paciente llamaba, esperaba en línea, la recepcionista buscaba disponibilidad y confirmaba. Mapeé cada punto de fricción para diseñar un flujo digital que eliminara esperas y errores humanos. I analyzed the current appointment flow: patients called, waited on hold, the receptionist checked availability and confirmed. I mapped every friction point to design a digital flow that eliminated wait times and human errors.
B. Prototipado B. Prototyping
Diseñé prototipos interactivos del sistema de turnos: selección de especialidad, calendario con disponibilidad en tiempo real, carga de datos del paciente y confirmación automática. Cada paso fue validado con usuarios reales antes de desarrollarlo. I designed interactive prototypes of the booking system: specialty selection, real-time availability calendar, patient data entry and automatic confirmation. Each step was validated with real users before development.
C. Desarrollo con Next.js + Tailwind v4 C. Development with Next.js + Tailwind v4
Implementé el frontend con Next.js aprovechando SSR para SEO médico y Tailwind CSS v4 para el sistema de diseño. GSAP se usó para animaciones sutiles de transición entre páginas, manteniendo una experiencia de navegación fluida y profesional. I built the frontend with Next.js leveraging SSR for medical SEO and Tailwind CSS v4 for the design system. GSAP was used for subtle transition animations between pages, keeping the navigation smooth and professional.
D. QA & Deploy D. QA & Deploy
Realicé pruebas de carga en el sistema de turnos, auditoría de accesibilidad y optimización de imágenes y recursos. El deploy se hizo con estrategia de caché para contenido estático y regeneración dinámica para disponibilidad de turnos. I ran load testing on the booking system, accessibility audits, and image and resource optimization. Deployment used caching strategies for static content and dynamic regeneration for appointment availability.
03. Resultado final Final outcome
Plataforma completa con +90% de turnos gestionados digitalmente. Lighthouse score de 96/100 gracias a SSR, lazy loading y optimización de assets. SEO médico posicionado para búsquedas locales de servicios de diagnóstico por imágenes. El centro médico redujo drásticamente las llamadas telefónicas para reserva de turnos. Complete platform with +90% of appointments managed digitally. Lighthouse score of 96/100 thanks to SSR, lazy loading and asset optimization. Medical SEO targeting local searches for diagnostic imaging services. The medical center drastically reduced phone calls for appointment booking.