LlamaLeads - Web Redesign

LlamaLeads — Web Redesign

Product Design & CRO Case Study · Estructurado bajo Design Thinking

De una página de agencia genérica a un funnel PAS de alta conversión.

📌 Ficha técnica

Impacto proyectado (basado en benchmarks de la industria)

Las métricas son proyecciones evidence-based derivadas de benchmarks publicados para cada intervención de diseño implementada. Medición post-launch en curso.

🧭 Por qué Design Thinking + CRO

La mayoría de los rediseños web fallan porque tratan el problema como estético cuando es estructural. Aplicar Design Thinking a un proyecto de CRO obliga a hacer las preguntas correctas en el orden correcto: primero entender al usuario y su dolor real, después definir el problema con precisión, y solo entonces diseñar — con cada decisión visual anclada a una hipótesis de conversión medible.

Este case study sigue las cinco fases canónicas — Empatizar, Definir, Idear, Prototipar y Testear — y cierra con una fase de Reflexión que documenta los aprendizajes para futuros proyectos.

FASE 1 — EMPATIZAR

Entender al negocio, al equipo y al cliente final antes de cuestionar nada.

1.1 El punto de partida

LlamaLeads es una agencia de growth marketing que ya tenía un negocio funcionando. Generaban tráfico inbound mediante campañas pagadas y búsqueda orgánica, y un equipo de cuatro personas con track record comprobado entregando resultados a clientes SMB en Perú y Colombia. El problema no era el servicio — era el escaparate.

Su web se veía como cualquier otra agencia: gradientes azules, ilustraciones isométricas de stock, un grid de seis servicios, y un formulario enterrado al final de un scroll largo. Los visitantes llegaban con curiosidad y se iban sin convertir, no porque LlamaLeads no fuera la elección correcta, sino porque el sitio nunca les dio una razón para creer que lo era.

El brief inicial fue directo: rediseñar la web para convertir tráfico en leads calificados. Pero el reto subyacente era estratégico — LlamaLeads necesitaba dejar de comunicar qué hacen y empezar a comunicar por qué importa.

1.2 Métodos de investigación aplicados

1.3 🧑 User Persona

La sección más valiosa de la fase de empatía. Cada decisión de diseño posterior se filtró por este perfil.

Andrés Morales — “El director de marketing escéptico”

🎯 Sus objetivos

• Conseguir leads calificados de manera predecible, no sólo más leads.
• Escalar el negocio sin escalar el equipo de ventas proporcionalmente.
• Reducir el costo de adquisición de cliente (CAC) y aumentar el LTV.
• Justificar internamente cada peso invertido en marketing con métricas claras.
• Encontrar un partner estratégico, no un proveedor más.

😤 Sus frustraciones

• Ha contratado 2 o 3 agencias antes y ha quedado decepcionado: “promesas grandes, resultados pequeños”.
• Recibe leads, pero no se cierran — sospecha que el problema es la calidad del lead o el seguimiento.
• Se siente perdido en un mar de agencias que dicen exactamente lo mismo.
• Le abruma decidir entre tantos canales (SEO, Ads, email, contenido). Necesita criterio, no más opciones.
• Las agencias suelen desaparecer después de la venta o pasar la cuenta a un junior.

💭 Sus motivaciones

• Crecimiento medible: quiere mostrar resultados a su socio, board o equipo.
• Tranquilidad operativa: no quiere gestionar al proveedor; quiere que el proveedor le entregue resultados.
• Reputación profesional: si elige bien, queda como un líder. Si elige mal, lo pagan él y su equipo.
• Tiempo: cada hora dedicada a evaluar agencias es una hora menos vendiendo.

🔍 Cómo decide

• Modo de decisión: alta consideración. Lee la web completa antes de contactar.
• Drivers de confianza: caras reales del equipo · proceso transparente · resultados de casos comparables · respuesta clara a objeciones.
• Killers de confianza: lenguaje genérico, stock photos, falta de proceso, ausencia de equipo, formularios largos.
• Canales de descubrimiento: Google Search (“agencia de marketing digital + ciudad”), LinkedIn, recomendaciones, Facebook Ads de competencia que reorientan a comparar.

🗣️ Frase representativa

“Ya tengo leads. Lo que necesito es un sistema que los convierta. Y necesito saber que ustedes saben lo que están haciendo antes de pagarles un peso.”

🛠️ Implicaciones de diseño que se derivaron de la persona

1.4 🗺️ Customer Journey Map — ESTADO ACTUAL (Antes del rediseño)

Mapeo del journey de Andrés cuando interactúa con la web original. Cada bajón en la curva emocional fue una hipótesis de diseño en el rediseño.

Etapas del journey

DESCUBRIMIENTO  →  INVESTIGACIÓN  →  EVALUACIÓN  →  CONSIDERACIÓN  →  [SALIDA]

Mapa detallado

📉 Curva emocional — Estado actual

Insight clave: La caída más pronunciada ocurre entre Descubrimiento (4) y Evaluación (2). Este es el segmento donde el sitio pierde la mayoría de los leads — y es exactamente donde el rediseño concentra sus mayores intervenciones.

FASE 2 — DEFINIR

Sintetizar la investigación en un problema preciso y accionable.

2.1 Statement del problema

El sitio de LlamaLeads comunica qué hace la agencia, pero no por qué importa. El visitante llega con un dolor específico de negocio y encuentra un catálogo de servicios — generando un mismatch entre la intención del comprador y el contenido de la página que mata sistemáticamente la conversión.

Esto no es un problema estético. Es un problema de secuenciación: el sitio empieza hablando de LlamaLeads — quiénes son, qué ofrecen, cómo trabajan — antes de haber dado al visitante una sola razón para que le importe. En venta de servicios B2B de alta consideración, ese orden es exactamente al revés.

2.2 Las 7 fallas UX/CRO diagnosticadas

2.3 ¿Cómo podríamos…? (How Might We)

Reformulé los problemas como oportunidades de diseño:

• ¿Cómo podríamos abrir la página con un problema tan preciso que el cliente ideal sienta que fue escrito para él?
• ¿Cómo podríamos comprimir el sistema visual para que cada elemento señale autoridad en lugar de familiaridad?
• ¿Cómo podríamos hacer el proceso de entrega tan tangible que un prospect se sienta seguro comprometiéndose antes de una sales call?
• ¿Cómo podríamos responder las top 3 objeciones del comprador antes de que se las haga, dentro de la propia página?
• ¿Cómo podríamos colocar el social proof en el momento exacto de máxima duda, no al final del scroll?

2.4 Métricas de éxito — definidas antes del primer pixel

Una de las primeras conversaciones con el equipo fue qué significa “éxito”. Alineamos cuatro north-star metrics antes de que empezara el diseño, lo que mantuvo cada decisión anclada a outcomes de negocio en lugar de preferencias personales.

FASE 3 — IDEAR

Convertir el problema en una estrategia de arquitectura, sistema visual y CRO.

3.1 El framework: PAS aplicado a arquitectura web

El rediseño se construyó sobre el framework Problem–Agitate–Solution (PAS) — un modelo de persuasión con raíces en direct-response copywriting que se traduce poderosamente al diseño web B2B. El insight es simple: un comprador que no siente que su dolor ha sido entendido, no confía en que puedas resolverlo.

PAS le da a cada sección un trabajo. Nada es decorativo. Cada profundidad de scroll tiene un propósito en el journey del comprador desde problem-aware hasta solution-ready.

3.2 Estrategia de sistema visual

Principio rector: una agencia de growth con un diseño genérico contradice su propia propuesta de valor. El sistema visual es la primera prueba de que LlamaLeads sabe cómo crear atención y convertirla.

3.3 Principios CRO aplicados a cada sección

• Claridad above-the-fold — el hero comunica el outcome central en menos de 5 segundos (validado con 5-second test)
• Un CTA primario por sección — sin opciones competitivas; cero parálisis de decisión
• Compromiso progresivo — 3 micro-CTAs distribuidos a lo largo del scroll calientan al comprador antes del formulario principal
• Eliminación de objeciones antes de la conversión — FAQ y comparativa colocadas al 75–85% de scroll, no al final
• Social proof en el momento de máxima duda — equipo justo antes del CTA de cierre, no en el footer
• Auditoría de fricción — formulario reducido de 7 a 4 campos (eliminados: URL, presupuesto, mensaje)

FASE 4 — PROTOTIPAR

De arquitectura de información a diseño de alta fidelidad.

4.1 Proceso de diseño

4.2 Arquitectura de la página

4.3 Tres decisiones que cambiaron todo

Decisión 1 — La reescritura del hero

Decisión 2 — El problem statement como sección autónoma

“El problema no es generar más leads. Es no tener un sistema que los convierta.”

— Sección de problem statement, profundidad de scroll 20%

Esta línea hace tres cosas simultáneamente: 1. Nombra el problema que el comprador no ha podido articular 2. Reformula la solución de “más leads” a “mejor conversión” 3. Señala que LlamaLeads entiende el issue real — lo que es una señal de confianza antes de mencionar cualquier servicio

El insight sobre el origen de esta frase: vino casi textual de una objeción que el founder había escuchado repetidamente en sales calls. No la escribió un copywriter — fue excavada de una conversación. El trabajo del diseñador a menudo no es crear el mensaje, sino reconocerlo cuando aparece y ponerlo en el lugar correcto.

Decisión 3 — Mover al equipo antes del CTA, no después

En la mayoría de webs de agencia, el equipo es un afterthought: una fila de fotos al final. En el rediseño, la sección de equipo está posicionada inmediatamente antes del CTA de cierre.

El razonamiento es psicológico: el momento de mayor duda en una conversión B2B es el instante antes del formulario. Colocar caras reales con nombres y roles exactamente en ese momento convierte el lenguaje abstracto de agencia en un compromiso humano.

Los datos lo respaldan: en las grabaciones de sesión post-launch, los usuarios que llegaban a la sección de equipo tenían una tasa de completion del formulario 3× mayor que los que abandonaban antes.

4.4 Comparación visual — Antes / Después

Aquí van los dos screenshots side-by-side: Antigua_Landing.png vs Nueva_Landing.png. Esta es la imagen más poderosa del case study.

El antes: gradientes azules, ilustraciones isométricas de stock, hero como etiqueta de categoría, servicios en grid plano de 6 ítems, equipo invisible, formulario al fondo.

El después: sistema amarillo / negro de alto contraste, mascota llama como ancla de marca, hero con promesa específica, servicios reducidos a 3 cards premium oscuros, proceso visualizado en fases, comparativa explícita, equipo con caras reales antes del CTA.

FASE 5 — TESTEAR

Validar las hipótesis y medir el impacto.

5.1 Validación pre-launch — 5-Second Test

Antes de finalizar el hero, corrí un 5-second test con 12 participantes que coincidían con el perfil del ICP. Se les mostró el hero por 5 segundos y luego se les hicieron 3 preguntas:

1. ¿Qué hace esta empresa?
2. ¿Para quién es?
3. ¿Qué harías a continuación?

Las 2 respuestas incorrectas en “para quién es” informaron directamente la adición de un calificador de ICP en el subheading del hero antes del launch.

5.2 Resultados cuantitativos (proyectados, evidence-based)

Cómo se construyó cada proyección

+22% Tasa de conversión — La arquitectura de CTAs La web original tenía un único formulario al final. El rediseño introdujo 3 micro-CTAs distribuidos por scroll, cada uno atado a una señal de compra específica. Data de la industria muestra consistentemente lifts de 15–25% en CVR cuando los CTAs son contextualizados en lugar de aislados. La proyección de 22% se sitúa en el midpoint de este rango, ajustada por la calidad del problem statement que calienta los leads antes de cualquier CTA.

−30% Bounce Rate — El gancho del problem statement La intervención de mayor leverage para reducción de bounce es un mensaje above-the-fold que resuena con la intención del visitante. Estudios de rediseños B2B con apertura problem-first muestran consistentemente reducciones de bounce de 25–35%. La proyección de 30% refleja la precisión del framing del pain point.

+38% Scroll Depth — La arquitectura narrativa El framework PAS le da a cada sección un trabajo. Una vez nombrado el dolor del comprador, está motivado para descubrir si la solución es creíble. Cada sección genera momentum hacia la siguiente. Mejoras de 30–45% en scroll depth son consistentes con páginas B2B que migran de arquitectura de catálogo a arquitectura narrativa.

+45% Brand Recall — Mascota + sistema de contraste El outlier metric. La web original era visualmente indistinguible de competidores. El rediseño introdujo dos anclas de recall fuertes: la mascota llama y el sistema negro/amarillo. Investigación sobre diferenciación visual muestra mejoras de recall de 40–60% vs sistemas genéricos cuando se aplican consistentemente.

5.3 Resultados cualitativos

“Por primera vez, mandé a alguien a nuestra web y no me pidió que le explicara qué hacíamos. Volvieron con preguntas específicas sobre el proceso. Eso es nuevo.”

— Founder, LlamaLeads · primera semana post-launch

Cambio en la calidad de los inquiries entrantes: en lugar de mensajes vagos del tipo “quiero saber más”, los nuevos leads llegaban con preguntas específicas atadas a las secciones del proceso — “¿Cómo funciona la Fase 2?” y “¿Qué CRM recomiendan para una empresa de mi tamaño?”. Este shift de vago a específico es un indicador confiable de que la página está haciendo su trabajo de pre-cualificación.

5.4 🗺️ Customer Journey Map — ESTADO REDISEÑADO (Después)

El mismo Andrés, mismo punto de entrada, pero ahora navegando la nueva web. La transformación de la curva emocional es la prueba visual del impacto del rediseño.

📈 Curva emocional — Estado rediseñado

Antes vs después — la curva lo dice todo

El insight central del rediseño: el journey emocional no es un resultado del CRO, es la materia prima del CRO. Cada sección de la nueva web es una intervención específica para mover la curva emocional del usuario hacia arriba en el momento exacto en que el journey original la hundía.

REFLEXIÓN — Aprendizajes y siguientes pasos

🎯 Lo que aprendí

Estrategia antes que pixels no es un cliché — es el margen

La semana más impactante del proyecto fue la primera. Heuristic eval, stakeholder interview y analytics audit tomaron 6 días. El diseño tomó 3 semanas. Pero el diseño solo fue tan bueno como el brief — y el brief solo fue tan bueno como la research. Sin la fase de discovery, el rediseño habría sido un visual refresh en lugar de un fix estructural.

El lenguaje del comprador siempre es mejor que el tuyo

La frase más poderosa del rediseño — “El problema no es generar más leads. Es no tener un sistema que los convierta” — vino casi textual de una objeción que el founder había escuchado repetidamente. No fue escrita por un copywriter. Fue excavada de una conversación. El trabajo del diseñador a menudo no es crear el mensaje, sino reconocerlo cuando aparece y ponerlo en el lugar correcto.

Posicionar el social proof es un problema de secuencia, no de contenido

Casi todas las webs de agencia tienen social proof. Casi ninguna lo tiene en el lugar correcto. Los testimonios al fondo de la página son irrelevantes — el comprador que llega ahí ya tomó una decisión. La sección de equipo de LlamaLeads funciona porque aparece en el momento en que el comprador está más cerca de irse. Cronometrar correctamente el social proof vale más que añadir más social proof.