GamifyMéxico – Rediseño UX de una sección Hero
EMPRESA
GamifyMéxico
ROL
Diseñador UX/UI
HABILIDADES
Rediseño - Mobile first
AÑO
2025
Descripción del proyecto
En 2025 trabajé en el rediseño del hero de la landing principal de GamifyMéxico, una startup mexicana de entretenimiento digital basada en mecánicas de bingo y lotería gamificada donde los usuarios participan para ganar premios patrocinados.
El objetivo no era cambiar la identidad visual, sino optimizar la experiencia, mejorando la claridad del mensaje, la jerarquía visual y la usabilidad, especialmente en dispositivos móviles.
El proyecto tenía una restricción clara del stakeholder: mantener la imagen principal del hero, reorganizando el contenido para hacerlo más claro, funcional y accesible.
Este desafío se convirtió en un ejercicio de optimización UX dentro de restricciones reales de producto.
El problema
Al analizar la sección hero identifiqué varios problemas que afectaban la experiencia del usuario.
La primera impresión de la sección del sitio estaba sobrecargada de información y competían demasiado elementos al mismo tiempo.
Problemas en Mobile
La experiencia en mobile presentaba los mayores problemas de escaneabilidad. El contenido era demasiado largo para una lectura rápida y los elementos visuales competían entre sí.
Los principales problemas eran:
El mensaje principal no se entendía rápidamente
El texto era demasiado largo para escanear
Los botones tenían el mismo peso visual, dificultando identificar la acción principal
El slider generaba distracciones y rompía el flujo de lectura
Problemas en Desktop
En desktop el problema principal era la falta de jerarquía visual. Aunque había más espacio en pantalla, varios elementos competían por atención al mismo tiempo.
Esto generaba:
Sobrecarga visual en el hero
Falta de prioridad clara entre título, texto y acciones
Elementos secundarios como el slider que distraían del objetivo principal
Objetivo del rediseño
El rediseño se enfocó en mejorar la experiencia sin cambiar la identidad visual existente.
Los objetivos principales fueron:
Proceso
Comencé analizando el hero original para entender cómo los usuarios percibían el contenido en los primeros segundos. Identifiqué que la sección intentaba comunicar demasiadas cosas al mismo tiempo, generando ruido visual y falta de claridad en el mensaje principal.
Para resolverlo, enfoqué la experiencia en una idea central: participar para ganar recompensas.
El rediseño se centró en que el usuario entendiera rápidamente:
Qué es la plataforma
Qué puede ganar
Qué acción debe realizar primero
Auditoría del hero
Analicé la sección hero para identificar problemas de jerarquía visual, legibilidad, claridad del mensaje.
Simplificando el mensaje
Uno de los primeros pasos fue optimizar el contenido del hero.
El diseño original incluía un párrafo largo con varias ideas mezcladas, lo que dificultaba la lectura rápida.
Para mejorar esto utilicé UX Writer de ChatGPT como herramienta de apoyo para:
reducir la longitud del texto
mejorar la claridad del mensaje
optimizar el tiempo de lectura
El objetivo era que el mensaje pudiera entenderse en menos de 3 segundos.
El resultado fue un título más directo y enfocado en el beneficio principal:
“¡Sube al podio y gana hoy!”
El texto secundario se redujo a una explicación corta que refuerza el valor del producto.
Mejora de jerarquía visual y acciones
Para mejorar la claridad del hero, reorganizé los elementos y definí una jerarquía visual más clara entre el contenido y las acciones principales.
El rediseño se enfocó en:
Priorizar un título principal claro para comunicar el valor de la plataforma
Reducir el texto descriptivo para mejorar la escaneabilidad
Diferenciar los CTAs, evitando que compitan entre sí
Establecer “Registrarse” como acción principal
Mantener “Ver ranking” como acción secundaria
Esto permitió guiar la atención del usuario hacia la acción más importante y facilitar una lectura rápida del contenido.
Enfoque mobile-first
La mayoría de los usuarios interactúan con este tipo de plataformas desde su teléfono.
Por esa razón el rediseño se pensó principalmente para mobile first.
Los cambios principales fueron:
reducir la cantidad de texto
aumentar el tamaño de los botones
organizar el contenido en un flujo vertical
mejorar el contraste del texto sobre la imagen
El resultado fue una experiencia más clara, fácil de leer y rápida de interactuar en pantallas pequeñas.
Resultado
El rediseño permitió transformar una landing visualmente cargada en una experiencia más clara y enfocada.
Los principales cambios logrados fueron:
mensaje principal más claro
mejor legibilidad del contenido
jerarquía visual más efectiva
acciones principales más visibles
experiencia optimizada para mobile
Más que cambiar la estética del sitio, el enfoque estuvo en ordenar la información y mejorar la comunicación del producto.
Stack y Enfoque Técnico
La solución fue desarrollada combinando diseño estructurado en Figma con implementación en Framer, asegurando consistencia visual, sistema escalable y fidelidad en producción.
Se aplicó un sistema de diseño basado en componentes, variables y Auto Layout para mantener coherencia y facilitar futuras iteraciones.
El proceso incluyó validación de estructura mediante prototipado y apoyo de herramientas de IA para research y optimización del UX writing.
