Yapsi - Startup

Landing page

Landing page

MI ROL

Product Designer

HERRAMIENTAS

ChatGPT

NotebookLM

Figma

FECHA

Mayo 2025

TIEMPO DE PROYECTO

Cinco días

DESCRIPCIÓN

DESCRIPCIÓN

Landing page diseñada para una operadora móvil enfocada en ofrecer servicios de SIM y eSIM.

PROBLEMA

MoSi estaba por lanzar su primera campaña de lanzamiento.
Necesitaba una landing que convirtiera, y rápido.
La anterior no comunicaba bien ni funcionaba, ni tenía una identidad visual fuerte ,así que me puse manos a la obra.

OBJETIVOS

OBJETIVOS DEL USUARIO

  • Recompensar a los usuarios al pasarse a Mosi desde otra empresa.

  • Dejar clara la propuesta en los primeros segundos.

OBJETIVOS DEL NEGOCIO

  • Obtener nuevos usuarios.

  • Aumentar la portabilidad.

  • Mejorar las analíticas de la versión inicial de la Landing page.

MI ROL

Product Designer

MI ROL

Product Designer

MI ROL

Product Designer

MI ROL

Product Designer

Limitaciones iniciales

Limitaciones iniciales

Primer día

Poco tiempo, pocas herramientas y solo algunas user personas que la startup me compartió. Eso fue lo que recibí al unirme a MoSi. ¿Cómo seguir adelante con la landing? Con unas horas de charla con el dueño del proyecto y el project manager, y mucha improvisación bien dirigida.

Reuniones… y alguna reunión extra

Reuniones… y alguna reunión extra

Primer día

Para encontrar qué quería transmitir MoSi, qué propuesta de valor, qué priorizar, cómo decirlo, qué tono usar y quién era nuestro público, me pasé unas cuantas horas de charlas, preguntas y respuestas con el líder del proyecto y el PM.
No era mucho tiempo, pero sí lo suficiente para empezar a tener claro hacia dónde teníamos que apuntar.

  • Querían jugar más con los colores de la paleta para darle vida a la marca.

  • La promo debía ser el centro de la landing: “¡Triplica tus gigas al pasarte a MoSi!”.

  • Y todo tenía que transmitir lo que MoSi es: libertad, transparencia y conectividad top al mejor precio.

  • El target de MoSi son jóvenes entre 18 y 30 años que valoran la flexibilidad y la facilidad.

Todo ok, pero necesitaba entender el terreno, con un poco de IA…

Todo ok, pero necesitaba entender el terreno, con un poco de IA…

Primer día

Antes de abrir Figma, tenía que tener claro a quién le hablábamos y contra quién jugábamos.
¿Cómo comunican ellos? ¿Qué podemos tomar prestado y mejorar?
¿Qué tenemos nosotros que ellos no?
Con esas preguntas en mente, decidí hacer un análisis de competencia rápido para ver qué funcionaba… y qué no.

ChatGPT

ChatGPT

Análisis competitivo y de mercado

Análisis competitivo y de mercado

Ver prompt

Interactivo

Ver prompt

Interactivo

Ver prompt

Interactivo

Ver informe generado

Interactivo

Ver informe generado

Interactivo

Ver informe generado

Interactivo

Agente

Fuentes

Nota importante

El benchmark completo no quedó guardado en un cajón: ahora cualquier persona que trabaje en MoSi puede entender cómo se mueve el mercado, qué priorizan los usuarios y dónde estamos parados.

Ahora entiendo bien dónde me estoy metiendo: qué empresas hay, cuáles son las más fuertes, qué buscan los usuarios, en qué redes están y qué precios manejan.
No me alcanzaba con la opinión del PM y del líder, así que hice mi propia investigación. Con todo eso claro, ya podía seguir.

Con todo claro, hora de pensar la estructura

Con todo claro, hora de pensar la estructura

Segundo día

Con el negocio y el mensaje claros —y sabiendo a quién le habla MoSi— tocaba pensar cómo contarlo. Qué decir, en qué orden, con qué palabras y con qué visuales para que el usuario lo entienda rapido y quiera quedarse.

Hero

Promos - precios

Beneficios Clave

Prueba Social

CTA Final

Me apoyé en una estructura pensada para una sola cosa: convertir. Eso me dio el marco perfecto para ordenar el mensaje y el contenido, guiando al usuario de forma natural hasta el clic final.

Ya tengo la estructura, ¿pero cómo puedo hacer que la landing venda?

Ya tengo la estructura, ¿pero cómo puedo hacer que la landing venda?

Segundo día

El siguiente paso: subir el PDF del libro Hooked a NotebookLM y pedirle a la IA, con todo lo que saque del libro, que nos diga cómo aplicar prácticas concretas para convertir la landing de MoSi en una máquina de ventas.

NotebookLM

NotebookLM

Análisis de elementos persuasivos

Análisis de elementos persuasivos

Mira el prompt y informe 👀

Ver informe generado

Ver informe generado

Ver informe generado

Ver prompt

Ver prompt

Ver prompt

Con esto ya tenemos claro como comunicar la promo en la landing. Vamos a usar frases como: ¡Pásate y triplica tus gigas!, ¡Únete a MoSi!, 3 DÍAS 12 HS RESTANTES, 60% OFF, ¿Tu internet es lento?, Sin cargos ocultos, ¡Triple de gigas!, ¡Quiero pasarme ya!. Siempre al lado de un precio grande y tentador. Estos mensajes con un precio grande y tentador pueden ser Gatilladores (chispa que enciende las ganar de pasarse a Mosi).

Imagenes generadas con IA antes del diseño

Imagenes generadas con IA antes del diseño

Segundo día

Generé las imágenes con ChatGPT para esquivar problemas de derechos de autor y, de paso, darles el sello MoSi: misma luz, mismo contraste y un estilo propio que le ponga identidad a toda la página.

Imagenes generadas

Imagenes generadas

ChatGPT

ChatGPT

Imágenes generadas con IA

Imágenes generadas con IA

Imagen

Fuentes

Ver prompt

Ver prompt

Ver prompt

First mobile, alta fidelidad y a toda velocidad

First mobile, alta fidelidad y a toda velocidad

Tercer día

Con las imágenes listas, pasé al diseño en alta lo más rápido posible por el poco tiempo que teníamos. Opté por un enfoque first-mobile, ya que el 85% de los usuarios entra desde el celular.

mosi.mx

mosi.mx

mosi.mx

Hora de pasar a desktop

Hora de pasar a desktop

Cuarto día

Al pasar a desktop, también cuidé la distribución, al igual que se escanean el hero y las promos.

Testing con 3 personas

Testing con 3 personas

Quinto día

Por temas de tiempos solo pude hacer cuatro con tres usuarios reales. Para ver su punto de vista sobre que pensaban, que podría mejorar, cuales fallas se encuentran. Hicieron un recorrido por la landing, se detectaron varias oportunidades:

Primer testing

En el test, mostramos el hero durante 4 segundos y el usuario no logró identificar la promo. Ni siquiera la mencionó al recordar lo que había visto. Esto nos confirmó que el beneficio no estaba siendo lo suficientemente visible. La solución fue moverlo más cerca del CTA, para que esté en el centro de la atención.

Segundo testing

En el segundo test hicimos la misma dinámica, pero esta vez con las promos: mostrar por 4 segundos y preguntar qué recordaban. Dos usuarios lo entendieron bien, pero uno comentó que no lo convencía a pasarse. Esto nos abrió los ojos: el mensaje carecía de urgencia. La mejora fue sumarle frases como “3 días restantes” o “últimas horas” para activar esa sensación de inmediatez que empuja a la acción.

Tercer testing

En el tercer test surgió una oportunidad clave: al pasar por la sección del mapa de Farmacias Guadalajara, el usuario esperaba que al hacer clic en una ubicación no solo le diga “disponible” o “no disponible”. También quería ver la dirección exacta y un botón para abrirla en Google Maps, ya que es la app con la que se siente más familiar. Este insight nos mostró que no basta con informar disponibilidad: la experiencia debía guiar hasta la acción real de ir a comprar el chip.

Feedback del equipo de diseño

Feedback del equipo de diseño

Quinto día

Recibí feedback constante del equipo en los daily scrum. Cada día sumaron su perspectiva para mejorar el proceso de diseño, afinando botones, estilos e identidad de MoSi. Ese intercambio diario ayudó a pulir cada detalle y elevar el resultado final.

Feedback Stakeholders

Feedback Stakeholders

Quinto día

Presenté el rediseño de la landing a los stakeholders, mostrando cómo mejoraba la jerarquía, el copy y el foco visual. Validaron la propuesta como una mejora clara en conversión y la adoptaron como nuevo estándar de la marca.

Resultados

Resultados

Quinto día

Las descargas de la app aumentaron un 30%.

Las descargas de la app aumentaron un 30%.

Las descargas de la app aumentaron un 30%.

Las descargas de la app aumentaron un 30% tras el rediseño, lo que indica que más usuarios entendieron el valor y decidieron probar MoSi.

50%

50%

Los usuarios se quedan más en la Landing Page

Los usuarios se quedan más en la Landing Page

Los usuarios se quedan más en la Landing Page

El porcentaje de usuarios que abandonaban la página sin interactuar (bounce rate) bajó de 62% a 50% en el primer mes, señal de una experiencia más clara y atractiva.

El equipo validó el rediseño como un nuevo estándar visual para MoSi.

El equipo validó el rediseño como un nuevo estándar visual para MoSi.

El equipo adoptó el rediseño como referencia visual para futuras piezas de la marca, marcando un nuevo estándar para MoSi.

Reflexión final

Reflexión final

¿Qué haría distinto? Con más tiempo hubiera hecho entrevistas en profundidad y testeos A/B más sólidos. También escalaría esta nueva identidad visual al resto del sitio de MoSi.

¿Qué aprendí? Validar visualmente con IA y testear bloques por separado fue clave para iterar rápido. También a diseñar con foco en negocio me permitió tomar decisiones más alineadas a objetivos reales, no solo estéticos.

¿Por qué es portfolio-worthy? Porque demuestra mi capacidad de resolver problemas de negocio desde el diseño, con pensamiento estratégico, narrativa, identidad visual y enfoque en conversión.

¿Qué me deja más orgulloso? Convertí una página estática sin alma en una experiencia clara, visual y efectiva. Y logré hacerlo en tiempo récord, con métricas que avalan el impacto.

Mis trabajos

¿Listo para crear algo que valga la pena?

¿Listo para crear algo que valga la pena?

Hablemos y hagamos que tu próxima idea cobre vida.

Email

Mi bandeja de entrada ya está lista…para recibir tus ideas.

Enviar Email