Diseño Web & Desarrollo Frontend

Salud a tu Alcance

Descripción del Proyecto

Este proyecto implicó el diseño y desarrollo frontend de un sitio web centrado en la accesibilidad y cercanía. Mi trabajo se enfocó exclusivamente en crear una interfaz amigable e inclusiva que simplificara el acceso a la información médica, con un sistema de navegación intuitivo que permitiera a todos los usuarios, independientemente de su nivel de alfabetización digital, encontrar fácilmente lo que necesitan.

Brief del Cliente

Desarrollar una presencia digital cercana y accesible para un centro médico comunitario, que facilite la comunicación entre pacientes y profesionales de la salud, eliminando barreras y haciendo la información médica comprensible para todos.

Cliente

Centro Médico Comunitario

Categoría

Diseño Web & Desarrollo Frontend

Año

2023

Duración

2.5 meses

Mi Rol

Diseñador UI/UX & Desarrollador Frontend

Pensamientos Iniciales del Cliente

Durante nuestra primera reunión, el equipo de Centro Médico Comunitario compartió sus expectativas y visión para el proyecto:

1

Queremos que nuestra web sea tan acogedora como nuestra sala de espera

2

Necesitamos reducir el miedo y la ansiedad que muchas personas sienten al buscar información médica

3

Es importante que personas de cualquier nivel educativo puedan entender su salud y opciones

4

Buscamos una plataforma inclusiva que no deje a nadie fuera

5

Queremos ser un centro médico verdaderamente accesible, tanto físicamente como digitalmente

Proceso de Diseño

A continuación se detalla el proceso que seguí para desarrollar este proyecto, desde la conceptualización hasta la implementación final.

Proceso: Investigación y Empatía
1

Investigación y Empatía

Realicé entrevistas con pacientes de diferentes edades y niveles de alfabetización digital, además de personal médico. Estudié las frustraciones más comunes al buscar información médica y las necesidades específicas de comunidades con acceso limitado a servicios de salud.

Investigación

Análisis exhaustivo

Entrevistas

Con usuarios y stakeholders

Proceso: Arquitectura de Información
2

Arquitectura de Información

Desarrollé una estructura de navegación basada en necesidades reales, no en jerga médica. Organicé la información en caminos intuitivos orientados a diferentes perfiles: desde quien busca atención urgente hasta quien necesita seguimiento de tratamientos.

Estrategia de comunicación centrada en la experiencia del usuario

Proceso: Diseño Visual Inclusivo
3

Diseño Visual Inclusivo

Creé un sistema visual amigable con alto contraste, tamaño de texto ajustable y elementos interactivos generosos. Implementé iconografía clara y universal, y evité el uso de metáforas visuales complejas para garantizar la comprensión por parte de todos los usuarios.

Diseño visualIdentidadExperienciaInteracciónAccesibilidad
Proceso: Desarrollo Frontend Accesible
4

Desarrollo Frontend Accesible

Implementé la interfaz con un enfoque prioritario en la accesibilidad WCAG 2.1 nivel AA. Desarrollé componentes como el buscador de síntomas con lenguaje natural, el asistente de citas con mínimos pasos y el visualizador de procedimientos médicos con explicaciones sencillas.

Desarrollo responsive

Información clara

Proceso: Pruebas con Usuarios Diversos
5

Pruebas con Usuarios Diversos

Realicé pruebas con usuarios de diferentes edades, niveles educativos y capacidades. Incluí personas con discapacidades visuales, auditivas y motoras para garantizar que la plataforma fuera verdaderamente inclusiva. Iteré el diseño basado en sus comentarios.

Pruebas con usuarios reales

Validación con diferentes perfiles de usuario

Iteración basada en feedback

Mejora continua del producto

Sistema de Diseño

Los elementos visuales cuidadosamente seleccionados que definen la identidad del proyecto.

Paleta de Colores

Una paleta cuidadosamente seleccionada para transmitir la identidad y valores del proyecto.

Primary

#6366F1

Secondary

#EC4899

Accent

#8B5CF6

Text

#111827

Background

#FFFFFF

Tipografía

Combinación de fuentes que equilibran personalidad y legibilidad para una experiencia óptima.

Heading

Quicksand

Salud a tu Alcance

Pesos: 500, 700

Body

Open Sans

Ejemplo de texto para mostrar la tipografía utilizada en el cuerpo del contenido.

Pesos: 400, 600

Características Principales

Funcionalidades clave implementadas para mejorar la experiencia del usuario y cumplir los objetivos del negocio:

1

Buscador de síntomas con lenguaje natural y recomendaciones apropiadas

2

Sistema de reserva de citas simplificado con recordatorios personalizables

3

Biblioteca de recursos médicos con explicaciones en múltiples formatos (texto, video, audio)

4

Visualizador interactivo de procedimientos médicos con explicaciones paso a paso

5

Portal de seguimiento de tratamientos con recordatorios y progreso visual

6

Sección de preguntas frecuentes con respuestas en lenguaje sencillo

Desafíos

Los principales retos que enfrentamos durante el desarrollo del proyecto.

  • 1

    Simplificar información médica compleja sin sacrificar precisión

  • 2

    Diseñar una interfaz que fuera igualmente accesible para jóvenes digitales y adultos mayores

  • 3

    Crear un sistema de navegación que funcionara bien para usuarios con diferentes necesidades y urgencias

Soluciones

Las estrategias implementadas para superar los desafíos.

  • 1

    Desarrollé un sistema de información en capas, con explicaciones básicas expandibles a detalles más específicos

  • 2

    Implementé un modo de visualización simplificado con controles de accesibilidad prominentes

  • 3

    Diseñé múltiples puntos de entrada a la misma información, optimizados para diferentes necesidades

Resultados

El impacto medible que el proyecto tuvo para el cliente.

Aumento del 75% en pacientes que usan la web para informarse antes de consultas

Reducción del 45% en llamadas para información básica

Incremento del 60% en uso por adultos mayores y personas con discapacidad

Mejora del 50% en la comprensión de procedimientos médicos

"La accesibilidad era nuestra prioridad absoluta, y Zabdiel lo entendió desde el primer momento. Creó una interfaz que realmente democratiza el acceso a la información médica. El buscador de síntomas con lenguaje natural ha reducido drásticamente las consultas innecesarias, mientras que las explicaciones visuales de procedimientos han disminuido la ansiedad de los pacientes. Lo más impresionante es ver cómo personas de todas las edades y capacidades pueden usar el sitio sin frustración. Un trabajo excepcional de diseño inclusivo."

Dr. Javier Ramírez

Director Médico, Centro Médico Comunitario

Galería del Proyecto

Imágenes destacadas del resultado final.

Imagen del proyecto 1
Imagen del proyecto 2
Imagen del proyecto 3
Imagen del proyecto 4
Imagen del proyecto 5
Imagen del proyecto 6

PageSpeed Insights

Google Logo

Todos nuestros proyectos cumplen con los más altos estándares de rendimiento web según Google PageSpeed Insights, garantizando una experiencia óptima para los usuarios y mejorando el posicionamiento SEO.

100
Rendimiento
100
Accesibilidad
100
Prácticas Recomendadas
100
SEO

Un sitio web optimizado mejora la experiencia del usuario, aumenta las conversiones y mejora el posicionamiento en buscadores. Google premia los sitios rápidos, accesibles y con buenas prácticas, factores clave para el éxito digital.

¿Tienes un proyecto similar en mente?

Estoy disponible para nuevos proyectos. Contáctame para discutir cómo puedo ayudarte a crear una presencia digital que comunique claramente los valores de tu negocio y conecte con tu audiencia.