DuoCards

DuoCards

DuoCards

Landing Page

ROL

ROL

UX/UI Designer

UX/UI Designer

DURACIÓN

DURACIÓN

3 semanas

3 semanas

PROYECTO

PROYECTO

Individual

Individual

Scroll ↓

Acerca de

Acerca de

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

Desafío

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

Meta

Meta

Elevar la tasa de conversión del 3% al 6% en los primeros tres meses.

Entendiendo a los Usuarios

Entendiendo a los Usuarios

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:


  1. Simplicidad y claridad son esenciales.

  2. CTAs eran difíciles de encontrar, lo que generaba fricción en la conversión.

  3. Menos es más: Los usuarios preferían menos texto y más imágenes que destacaran los beneficios clave.

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:


  1. Simplicidad y claridad son esenciales.

  2. CTAs eran difíciles de encontrar, lo que generaba fricción en la conversión.

  3. Menos es más: Los usuarios preferían menos texto y más imágenes que destacaran los beneficios clave.


Playground Image
Playground Image
Playground Image

PROCESO

PROCESO

PROCESO

Fases del proyecto

Fases del proyecto

Análisis Visual
Estado actual de la web

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.

Análisis Visual
Estado actual de la web

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.

Análisis Visual
Estado actual de la web

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.

Análisis Visual
Estado actual de la web

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.

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.

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.

Benchmarking
UI / UX Designer

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.

Sitemap
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

Sitemap
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

Sitemap
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

Sitemap
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

Wireframes y prototipo

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.

Playground Image
Playground Image
Playground Image
Playground Image

Diseño final de la web

Diseño final de la web

Diseño final de la web

Resultados: Impacto Potencial 🚀

Resultados: Impacto Potencial 🚀

Resultados: Impacto Potencial 🚀

  1. 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.


  1. 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.


  2. 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.

Conclusión y aprendizaje

Conclusión y aprendizaje

Conclusión y aprendizaje

  • 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.

Como diría Leo Burnett

Como diría Leo Burnett

Como diría Leo Burnett

“Hazlo simple. Hazlo memorable. Hazlo atractivo a la vista. Hazlo divertido de leer”.