En este proyecto
MedAid
De doce módulos a una web que explica el día a día de la consulta.
MedAid reúne agenda, pacientes, historiales y facturación. Diseñé la web que presenta ese software: agrupé sus funciones, redacté el contenido y trabajé la identidad y las pantallas, dentro del equipo de K·Factor y 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, la interfaz y las indicaciones de animación, 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 daban a desarrollo una referencia común para páginas con contenidos distintos.
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.
Colaboración y entrega
Una entrega con contenido, identidad y criterios para desarrollo
Trabajé en coordinación con desarrollo y preparé indicaciones de animación y comportamiento. La entrega reunió arquitectura, textos, identidad, componentes y pantallas responsive; acompañé el diseño durante su desarrollo.
Mi aportación fue el diseño y su seguimiento. La programación correspondió al equipo de desarrollo.
Documentación
Identidad visual y más detalles
Ver identidad visual y más imágenes del proyecto
Identidad visual
Logotipo, construcción, ilustraciones y aplicaciones. Las explicaciones retrospectivas y las propuestas de movimiento están identificadas en sus pies.
Arquitectura y wireframes
Sistema UI y componentes
Pantallas