¿Por qué Clue?
Exploramos el caso UX de Clue, la app de seguimiento del ciclo menstrual aclamada a nivel mundial. Como la app más descargada y mejor valorada en su categoría, Clue es un referente en diseño centrado en el usuario, transformando la forma en que las mujeres gestionan su salud reproductiva.
Este estudio surge de nuestra decisión de mejorar la UI de Clue en su versión en español, en línea con nuestra misión de promover la salud femenina. El análisis no solo destaca mejoras técnicas, sino que enfatiza el rol de la app en proveer herramientas accesibles y amigables para que las mujeres puedan monitorear aspectos clave de su bienestar.
Insight principal
Insight principal
La app Clue es útil, intuitiva y tiene una interfaz simple. Sin embargo, se siente distante porque su storytelling y tono priorizan el aspecto reproductivo del ciclo. Esto contrasta con la manera en que las usuarias realmente la usan — como una herramienta de autoconocimiento y como fuente de información para sus consultas médicas.
Fase de diseño — Priorización MoSCoW
Tras la fase de descubrimiento, priorizamos las ideas utilizando la metodología MoSCoW.
Mo · Debe tener
Armonizar fuentes, tamaños de letra, números e íconos.
Reforzar y mejorar el UX writing.
Integrar análisis en la pantalla de inicio.
Agregar recordatorios en la barra inferior.
Incorporar íconos clave para mejorar la calidad de la información disponible para las usuarias.
Añadir valor a la invitación de suscripción premium.
S · Debería tener
Incorporar estratégicamente el logo y el slogan en ciertas pantallas.
Modificar los colores del gráfico de 'ciclo' en la pantalla de inicio.
Ajustar la paleta de colores del calendario.
Co · Podría tener
Integrar un ícono en el onboarding para la pregunta '¿Qué quieres hacer?'
W · No tendrá
Implementar un foro de discusión para el intercambio de ideas entre usuarias.
Prototipado
"En este proyecto, el UX no se trata solo de simplificar el proceso; se trata de inspirar confianza y control sobre el propio cuerpo."
Primeros bocetos
Después de plasmar nuestras ideas en papel y comenzar a crear wireframes de mediana fidelidad, realizamos testing a través de Maze para recolectar datos cualitativos sobre nuestras propuestas, midiendo los siguientes KPIs:
⏱Reducir el tiempo por tarea
✓Aumentar la tasa de éxito
↓Reducir la tasa de error
clue-sketches.png
Primeros bocetos — wireframes de baja fidelidad para los 3 flujos principales
clue-wireframes.png
Wireframes de mediana fidelidad — iterados para testing en Maze
Testing e iteración
Resultados del testing con 29 usuarias a través de la plataforma Maze.
Tarea 1
El 80% de las usuarias completó la tarea.
5.7 segundos en total para completar el flujo.
1.3% de tasa promedio de error de clics.
Tarea 2
El 60% de las usuarias completó la tarea.
25 segundos en total para completar el flujo.
50.1% de tasa promedio de error de clics.
Tarea 3
El 70% de las usuarias NO completó la tarea.
91 segundos en total para completar el flujo.
57% de tasa promedio de error de clics.
60% de tasa de abandono.
Puntuación de usabilidad
80
0
100
100
100
100
0
Resultados — Prototipo final
Onboarding
clue-result-onboarding.png
Mejoramos la legibilidad de las cards del home a través de un diseño simplificado.
Revisamos los textos del onboarding para mejorar su claridad.
Optimizamos el tamaño de los botones para reducir la competencia visual con la información en pantalla.
Pantalla de inicio
clue-result-startscreen.png
Invitación a Plus con información relevante integrada en contexto.
Creamos un ícono intuitivo para acceder a la cuenta de usuario.
Opción para cambiar manualmente el modo de la app desde la pantalla de inicio.
Una sola pantalla con toda la información clave sobre el período.
Rediseño del ícono de ciclo + Alertas en la barra principal.
Pantalla de seguimiento
clue-result-tracking.png
Separamos el botón de personalización de síntomas para destacarlo visualmente.
Usar diferentes pesos tipográficos ayuda a distinguir y destacar fechas importantes para la usuaria.
Mejoramos la legibilidad de los íconos y agregamos una categorización por color adecuada.
Mejoramos el tamaño de los botones para evitar competencia visual con la información en pantalla.
UI Kit
Tipografía: Commons
T1-ABCDEFGHIJK1234
T2-ABCDEFGHIJK1234
T3-ABCDEFGHIJK1234
Header-ABCDEFGHIJK1234
Body-ABCDEFGHIJK1234
Call out: ABCDEFGHIJK1234
Sub-headline- ABCDEFGHIJK1234
Ilustraciones y UI Kit
clue-uikit.png
Elementos interactivos
clue-interactive.png
1200px de ancho, altura libre
Scroll para ver todos los elementos interactivos
"La iteración en diseño trae resultados poderosos"
— Interactive Design Foundation
