Contenido del caso
MedAid
Organizar las funciones de un software médico y darles una identidad propia.
MedAid reúne agenda, pacientes, historiales y facturación. Dentro del equipo de K·Factor, diseñé la web que presenta ese software: organicé las funciones, redacté los textos y trabajé el rediseño del logotipo, las ilustraciones y las pantallas, en coordinación con desarrollo.
- Proyecto
- Web de MedAid
- Equipo
- K·Factor y desarrollo
- Lectura
- 5 min
El proyecto de un vistazo
- Desafío
- Explicar las funciones del software y organizar especialidades, planes, soporte y contacto sin convertir el menú en una lista de módulos.
- Mi papel
- Dentro del equipo de K·Factor, trabajé la arquitectura, los textos, el rediseño del logotipo y la interfaz, en coordinación con desarrollo.
- Decisión clave
- Reunir los doce módulos iniciales en diez bloques dentro de una página de soluciones. Elegir la ilustración para dar identidad a la web sin una sesión de fotos.
- Resultado
- Arquitectura, contenido, identidad y diseños para escritorio, tablet y móvil, con componentes y anotaciones para desarrollo.
Contexto y referencias
Presentar el software desde las necesidades de la consulta
La web debía explicar a los profesionales médicos qué podían hacer con MedAid. Partí del contenido del producto y revisé cómo otras webs del sector presentaban sus soluciones.
Trabajé el mensaje alrededor de una idea: dedicar menos tiempo a la gestión y más a los pacientes. Esa intención orientó los textos y la forma de presentar las funciones.
Arquitectura
Separar la información comercial de la ayuda para usar el software
Organicé soluciones, especialidades, información sobre MedAid, precios, soporte y contacto. La estructura debía atender tanto a quien estaba valorando el software como a quien ya necesitaba ayuda para utilizarlo.
En soporte distinguí primeros pasos, descarga del cliente, ticket urgente y asistencia remota. Demo y contacto reúnen prueba gratuita, llamada y mensaje en una misma página.
Textos y wireframes
Agrupé doce módulos en diez bloques relacionados
Reuní la facturación privada y de mutuas en «Control de facturación», y liquidaciones y estadísticas en «Liquidaciones y métricas». Así, las funciones relacionadas se podían explicar juntas en una página común de soluciones.
Redacté los textos dentro de los wireframes y añadí notas sobre el orden, las agrupaciones y los enlaces. Contenido y estructura se revisaban juntos antes del diseño visual.
Identidad y sistema UI
Llevé la marca a un sistema compartido para la web
Rediseñé el logotipo de MedAid y preparé el isotipo y sus versiones para fondos claros y oscuros. La construcción parte de Brockmann, con una A angular y el punto azul como detalle propio.
Para la web definí la paleta, la tipografía, los botones y sus estados, la navegación y las retículas responsive. Estas piezas reunían las reglas que desarrollo necesitaba para mantener la coherencia entre páginas comerciales y de soporte.
Diseño web
La ilustración dio identidad a la web sin recurrir a fotografías
El cliente no tenía presupuesto para una sesión de fotos. Elegimos la ilustración para dar identidad a la web sin recurrir a fotografías de personas ni a imágenes de banco.
El lenguaje combina escenas del entorno médico, dibujo de línea y acentos azules. Lo apliqué junto con el sistema UI a las páginas comerciales, las especialidades, el soporte y el contacto.
Escritorio y móvil
Conservar el contenido y la llamada a la acción al cambiar de pantalla
En móvil, el menú pasa a un control compacto y el acceso a la prueba gratuita sigue visible en la cabecera. El titular, el texto y la ilustración se reorganizan para presentar el mismo mensaje en menos espacio.
Decisiones de diseño
Trade-offs: decisiones y renuncias
- El conjunto en una página más extensa. Reuní los módulos en diez bloques de una misma página de soluciones. Las funciones relacionadas se consultan juntas, a cambio de una página más larga que exige títulos y agrupaciones claros.
- Ilustración propia sin una sesión de fotos. El presupuesto no incluía fotografía. Elegimos un lenguaje ilustrado coherente para la web, aunque no mostrara personas ni entornos reales de trabajo.
Colaboración y entrega
Una entrega con contenido, identidad y pantallas responsive
La entrega reunió arquitectura, textos, identidad, componentes y pantallas responsive. Acompañé el diseño durante su desarrollo y preparé una referencia de movimiento para las ilustraciones. El equipo de desarrollo se encargó de integrar el diseño en la web.
Aprendizajes
Agrupar funciones también exige facilitar cómo encontrarlas
Reflexión provisional para revisar: si retomara el proyecto, comprobaría desde los wireframes si los nombres de los bloques ayudan a localizar una función concreta. Reunir los módulos permite explicar el conjunto, pero también exige que quien busque algo específico, como la facturación de mutuas, sepa dónde encontrarlo.
Documentación
Identidad visual y más detalles
Ver identidad visual y más imágenes del proyecto
Del rediseño del logotipo a sus versiones, ilustraciones, tarjetas y folleto. La explicación retrospectiva de la construcción está identificada en su pie.
Referencia de movimiento para las ilustraciones. Se presenta como propuesta; no confirma su integración en la web final.
