Woman's Health — servicio web y app móvil
Diez minutos en la consulta de un ginecólogo. Todo el argumentario, en la mano, funcionando sin conexión.
El material existía. No llegaba a la visita.
Un representante médico entra en la consulta con diez minutos y una sola oportunidad. Necesita, en ese momento, la ficha del producto, el estudio que respalda su argumento, el folleto comparativo frente al competidor que el médico ya receta y el guion de la conversación.
Todo eso existía en Zentiva–Sopharma, pero vivía en un sitio con una usabilidad que no acompañaba: la estructura seguía el organigrama de la empresa, no la visita. No había versión móvil ni de escritorio. Nada se podía guardar para tenerlo a mano.
En la práctica, el representante llegaba con el material sin abrir. O no llegaba con él.
Empecé por la investigación, no por el rediseño.
Entrevistas en profundidad y grupos focales con representantes de tres niveles: recién incorporados, profesionales consolidados y líderes con años de campo.
No usan el material igual. El novato necesita aprender el argumento y entender por qué funciona. El veterano necesita encontrar en cuatro segundos el folleto exacto que ya sabe que quiere.
Toda la estructura y la lógica de navegación salen de ahí. Sin esa distinción, el producto sirve bien a uno de los dos perfiles y mal al otro.
Diseñé primero para tablet, porque es el dispositivo real de la visita.
La versión principal es la de tablet. Móvil y escritorio se adaptaron después, sobre una rejilla ya validada. Ninguna de las dos existía antes del proyecto.
Esa decisión condicionó todo lo demás: tamaños de tipografía y de zonas interactivas pensados para usarse de pie, con una mano, delante de otra persona. No para leerse sentado.
Inicio fijo, sin scroll
Estructura bento: dos accesos visuales grandes —Productos y Estrategia— y cinco filas. Todo el producto cabe en una pantalla y todo está a un toque. La fila prioritaria del periodo va resaltada en color y se cambia sin tocar la estructura.
Contenido y herramientas, separados
La barra inferior tiene cinco destinos: Inicio, Productos, Favoritos, Notas y Búsqueda. Los tres últimos no son secciones de contenido, son los instrumentos del representante. Esa distinción es la que convierte un catálogo en una herramienta de trabajo.
Un producto, cuatro tipos de documento
Presentación, prospecto, materiales y vídeo conviven en pestañas dentro de la misma ficha. Nueve productos con argumentario clínico completo: estadísticas, guías (NICE, ESHRE, ASRM, RCOG, SOGC) y referencias numeradas. Nada obliga a salir de la pantalla.
Los materiales, en hoja inferior
Cada producto tiene entre ocho y diez folletos comparativos. Como páginas nuevas, el representante perdía el contexto y volvía atrás una y otra vez. La hoja inferior deja la ficha visible debajo.
Escenarios nombrados por la situación real
«Climonorm vs Femoston 1.10», «Alvovizan vs Visanne, Zafrilla». El representante busca por el competidor que tiene delante, no por un título genérico. Y están versionados: hasta tres variantes de conversación por pareja producto–competidor.
Guiones a dos voces
Las frases del representante en negro, las del médico en gris. Se pueden leer de reojo, en mitad de una conversación, sin perder la línea. Es la decisión más pequeña del proyecto y la que más cambia el uso real.
Favoritos y Notas
Lo que se marca antes de salir a la calle es lo que se abre dentro de la consulta. Las notas permiten registrar acuerdos y detalles de la visita en la misma app, sin cambiar de herramienta.
Funciona sin conexión
Los materiales guardados están disponibles aunque no haya cobertura: en un hospital, en un sótano, entre dos visitas.
Qué entró en el proyecto
- Rediseño completo de las 9 páginas de producto, con un único lenguaje visual
- Versión principal para tablet y adaptación a móvil y escritorio
- Sustitución de todos los visuales y de la iconografía
- Ocho subsecciones dentro de Ventas eficaces: objetivos, posicionamiento, competidores, mercado, la visita al médico, escenarios y calendario
- Once escenarios de visita nombrados y versionados
- Ocho a diez folletos comparativos por producto
- Búsqueda transversal y Academia de Representantes para la incorporación
- Contenido reordenado por marca, por indicación y por escenario; material obsoleto retirado
Entregado listo para desarrollo.
Kit de UI completo, todos los assets exportados y especificación de maquetación entregada al equipo de desarrollo. El objetivo no era entregar pantallas bonitas, era que nadie tuviera que volver a preguntarme cómo se comporta un componente.
Paleta
Ocho valores. El rosa no decora: marca la sección prioritaria del periodo y los datos destacados dentro de una ficha. Si se usa en más de un sitio por pantalla, deja de significar algo.
Contraste: tinta sobre fondo 16.1:1 · tinta sobre acento 11.4:1 · tinta secundaria sobre fondo 4.6:1 (solo texto de apoyo, nunca por debajo de 15 px).
Dos familias, nueve estilos
Playfair Display para la marca y los títulos editoriales de los materiales clínicos. Manrope para todo lo que es interfaz. Ninguna pantalla mezcla más de dos pesos de Manrope.
Base de 8
Móvil 4 columnas · tablet 8 · escritorio 12. Contenedor máximo 1240 px.
| Token | Valor |
|---|---|
| espacio-1 | 8 px — separación entre elementos de una lista |
| espacio-2 | 16 px — margen lateral en móvil |
| espacio-3 | 24 px — interior de tarjetas |
| espacio-4 | 26 px — margen lateral en escritorio |
| fila | 78 px móvil · 88 px escritorio |
| objetivo-táctil | mínimo 56 px — pensado para usarse de pie |
| radio | 0 en superficies · 18 px solo en la barra inferior |
Biblioteca
Normal · prioritaria (una sola por pantalla) · sin contenido.
Activa con borde de 2 px y peso 700. La deshabilitada indica que ese producto no tiene ese tipo de material.
Climonorm
Terapia hormonal de la menopausia con Levonorgestrel
Nombre, indicación en una línea, envase y enlace. Sin excepciones: la indicación nunca pasa de dos líneas.
Materiales
Nunca una página nueva: la ficha permanece visible debajo.
Voz del representante en tinta 100 %, peso 700 en la etiqueta. Voz del médico en tinta secundaria. Legible de reojo.
Medicamentos
Sin enlaces guardados
Materiales
Sin enlaces guardados
El estado vacío conserva las categorías: enseña la estructura antes de que haya contenido.
Cinco destinos fijos. Los tres últimos son herramientas del representante, no secciones de contenido. Activo = icono relleno.
Trazo de 1,7 px sobre lienzo de 24
La flecha diagonal marca siempre «entrar en una sección». El chevron, «volver». Nunca se intercambian.
Nueve decisiones que no se negocian
- El inicio cabe en una pantalla y no lleva scroll. Si hay que añadir una sección, se sustituye otra.
- Solo un elemento en rosa por pantalla.
- Contenido y herramientas nunca se mezclan: lo que es sección va en la retícula, lo que es instrumento va en la barra inferior.
- Los materiales se abren en hoja inferior, nunca en página nueva.
- Las migas de pan aparecen en todas las pantallas por debajo del primer nivel.
- Los escenarios se nombran por la situación real: producto, competidor y versión.
- En los guiones, la voz del médico siempre en tinta secundaria.
- Cualquier objetivo táctil, mínimo 56 px: la app se usa de pie y con una mano.
- Todo lo guardado en Favoritos tiene que abrirse sin conexión.
- MVP entregado el 25 de agosto de 2025; el producto siguió evolucionando hasta diciembre
- En producción y en uso diario por el equipo comercial
- Materiales, guiones, notas, favoritos y autoformación en una sola aplicación
- Disponible sin conexión
- Estructura preparada para crecer: añadir un producto, un folleto o una versión de escenario no exige rediseñar nada
