Acerca de
DuoCards es una aplicación móvil que ayuda a los usuarios a aprender vocabulario en varios idiomas mediante tarjetas de memoria y juegos interactivos. Aprovechando la repetición espaciada, la app potencia la retención de palabras, usando además videos, películas y artículos para enriquecer la experiencia de aprendizaje.
Desafío
1- Mejorar la experiencia de usuario, haciéndola más clara y atractiva desde el primer vistazo.
2- Aumentar la tasa de conversión de visitantes a usuarios activos que descarguen la app.
Meta
Elevar la tasa de conversión del 3% al 6% en los primeros tres meses.
Entendiendo a los Usuarios
Aquí es donde las cosas se pusieron interesantes. Para entender realmente las necesidades de los usuarios, realicé entrevistas y encuestas.
Dato clave: El 70% de los usuarios mencionaron que no se sentían motivados a descargar la app tras navegar por la página actual.
Los resultados fueron claros:
Simplicidad y claridad son esenciales.
CTAs eran difíciles de encontrar, lo que generaba fricción en la conversión.
Menos es más: Los usuarios preferían menos texto y más imágenes que destacaran los beneficios clave.
Sintetizando el Problema y Análisis Visual
Con las conclusiones de las entrevistas, procedí a realizar un análisis visual de la landing page existente. Utilicé post-its para destacar problemas de UX y UI en cada sección, siguiendo el feedback de los usuarios.
Hallazgos del Análisis Visual:
Sobrecarga de Información: Algunas secciones contenían demasiado texto, causando saturación y dificultando la comprensión rápida.
Jerarquía Visual Deficiente: La falta de contraste y tamaños adecuados en títulos y subtítulos hacía que la información clave pasara desapercibida.
CTAs Poco Visibles: Los botones de llamada a la acción no destacaban lo suficiente, perdiéndose entre otros elementos.
Navegación Confusa: El menú principal no era intuitivo y algunas opciones llevaban a páginas innecesarias.
Benchmarking: Mirando a la competencia
Me tomé un tiempo para ver qué estaban haciendo otras plataformas similares. Esto me ayudó a ver qué elementos podíamos mejorar en DuoCards para destacar entre la competencia.
Del análisis a la arquitectura
Con toda esta información, comencé a idear soluciones. El objetivo principal era facilitar el acceso a la información más relevante para el usuario, minimizando la confusión y reduciendo la carga cognitiva. Mejoras clave en la Arquitectura:
Jerarquía clara y progresiva
Priorizar lo esencial
CTA visibles y accesibles
Wireframes y prototipo
El primer paso fue crear wireframes de baja fidelidad, centrándome en la disposición de los elementos clave y el flujo de navegación. Estos wireframes fueron probados con usuarios para validar la usabilidad de la estructura.
Después de obtener feedback y hacer ajustes, pasé a crear prototipos de alta fidelidad en Figma. Aquí, se integraron elementos visuales como tipografía, colores, imágenes y botones, asegurando que el diseño no solo fuera funcional, sino también atractivo.
User persona
Análisis visual
Benchmarking / Competencia
Sitemap
WF / Prototipo
Aunque este proyecto fue ficticio, las mejoras implementadas en el rediseño están orientadas a generar resultados tangibles en varias áreas clave:
Incremento en la tasa de conversión: La simplificación de la navegación y la optimización de los CTAs mejoraría la conversión de usuarios, ya que los visitantes podrían entender más rápido el valor de la app y acceder fácilmente al botón de descarga.
Mejora en la interacción: Con un diseño visual más claro y atractivo, los usuarios estarían más inclinados a explorar la página. La visibilidad optimizada de los CTAs garantizaría un aumento en el número de clics en los puntos clave de la página.
Mayor retención de visitantes: Al reducir la carga cognitiva y ofrecer un diseño más intuitivo, es probable que los usuarios pasen más tiempo en la landing page, explorando las características y ventajas de DuoCards sin sentirse abrumados por exceso de información.
Conocer el propósito: Si una landing page no responde de manera clara a las preguntas "¿Quién eres?", "¿Qué haces?", "¿Por qué contigo?" y "¿Cómo lo obtengo?", estamos perdiendo una oportunidad.
La preparación es el 80 % del trabajo: Antes de diseñar un solo píxel, dediqué gran parte del tiempo a analizar la landing page actual, estudiar la competencia y revisar sitios web similares. Esto me permitió tener una visión clara antes de proponer cualquier solución.
Investigación de usuarios: La investigación con usuarios fue esencial para identificar los puntos críticos de la landing actual y detectar áreas de mejora.
Iterar y obtener feedback: Después de cada iteración, mostraba el diseño a personas para obtener su feedback. Esto me ayudó a evitar errores y asegurarme de que el diseño fuera claro y accesible.
“Hazlo simple. Hazlo memorable. Hazlo atractivo a la vista. Hazlo divertido de leer”.
