Landing Page: Proceso de Diseño en 3 fases

Landing Page: Proceso de Diseño en 3 fases

Una landing page (o página de aterrizaje) es aquella página web diseñada específicamente para lograr una conversión de usuario (Obtener su correo electrónico, que descargue nuestra aplicación o que se registre en nuestro servicio web)

Diseñar una Landing page puede parecer sencillo si lo consideramos desde un punto de vista técnico. Pero en este tipo de productos digitales es donde debemos poner más a prueba nuestras dotes marketinianas. Para aquellos que no conozcáis este término, una landing page (o página de aterrizaje) es aquella página web diseñada específicamente para lograr una conversión. Nuestro objetivo de conversión puede consistir en obtener el correo electrónico de un usuario, hacer que descargue una aplicación o conseguir que se registre en nuestro servicio. A continuación detallaré tres fases que deben ser consideradas para que el diseño de nuestra Landing Page sea efectivo:

1. Estudio de la Startup

Definiremos las metas y valores de la empresa (10 palabras para definirla). Sus planes futuros, la oferta de productos y/o servicios, cómo se pretende que la empresa sea percibida y los perfiles de usuario que utilizan el servicio para que las decisiones del diseño vayan acordes con la estructura de la Web. En el artículo anterior definía una guía clara para conocer al cliente en profundidad.

Es un proceso infravalorado, pero es el más importante puesto que de esta fase depende que se produzcan iteraciones futuras dentro del diseño. Debemos establecer las prioridades ya sea la descarga de la aplicación, la suscripción a un correo electrónico, registro dentro de la Web… No podemos tener 5 objetivos primordiales. El objetivo debe ser claro y de él depende que nuestro diseño vaya enfocado a una meta fijada con claridad.

2. Fase de Sketching

Es la manera de presentar el producto. Es preferible ensayar y fallar tantas veces como haga falta en esta fase puesto que los cambios producidos en fases posteriores requieren de ajustes que llevan mucho más tiempo y quebraderos de cabeza. Las tres sub-fases que podemos destacar aquí son las de: Inspiración (observando a la competencia, otros productos/servicios del sector y fuera del mismo), Estructura y Wireframing.

El ensayo y error dentro de esta fase evitará que tengamos que realizar iteraciones en fases posteriores donde los cambios son más engorrosos, costosos y lentos.

3. Diseño visual

Es la parte visible del proyecto, por así decirlo, la punta del iceberg. Esta fase es mucho más fácil si se han tomado decisiones previas de estructura y contenido. Como digo, en esta fase uno se puede centrar más en el Look & Feel, en lo que queremos transmitir y cómo queremos hacerlo. De este modo, habiendo sido metódicos, decisiones estructurales no deberían ser tomadas de nuevo en esta fase de diseño. En la fase de diseño visual debemos poner atención a varios aspectos:

A. La cabecera

Es la primera oportunidad que tienes para captar la atención del usuario. Sintetizar todo en este apartado para aquel que pueda estar interesado continúe. Aquí debe aparecer el primer Call To Action (CTA) que trate de enganchar de primeras al usuario potencial. En la cabecera debemos debemos lanzar un mensaje rotundo pero conciso.

B. Beneficios del producto

En esta parte debemos explicar brevemente cómo funciona el producto y qué beneficios aporta al usuario. Es importante destacar más cuáles son los beneficios que las características puesto que la bondad de un producto es lo que atrae al usuario final. Es común recurrir a recursos más simbólicos para mostrar de un solo vistazo todo lo que puedes hacer o guiar al usuario a través de un Patrón Z. Éste último es un formato muy utilizado en el cual mostramos el contenido en forma de Z alternando imagen y texto en cada punto para explicar los beneficios del producto. Por otro lado también podemos definir de 3 a 6 puntos breves y claros que definan la propuesta de valor del producto.

C. Ruptura visual

Debemos hacer que el lector no se sature de información. Añadiremos un “descanso visual” en el que podríamos incluir una imagen con mucho aire y poco texto. De este modo, si estábamos siendo algo pesados con las características del producto y ha decidido hacer scroll, quizás en este apartado se detenga para ver qué le contamos de una forma más visual.

D. Testimonios

Es la prueba social de que nuestro producto funciona y hace feliz a mucha gente :). Genera la confianza suficiente para hacer ver al usuario final que personas como él también lo están usando. Debemos echar mano a nuestros perfiles de usuario para ejemplificar de qué manera otros ya lo utilizan y están contentos por ello.

E. Call To Action Final

Es la oportunidad final para que descarguen el producto, se registren o se animen a comprarlo. Este CTA debe contrastar para que llame la atención del usuario.

10 preguntas para tu cliente antes de diseñar su página web

10 preguntas para tu cliente antes de diseñar su página web

Antes de diseñar debemos escuchar activamente. Cuando reconocemos la necesidad real entonces podemos construir un producto adaptado al usuario final. El análisis previo de la necesidad es clave para determinar si tu cliente necesita el tipo de producto que tú puedes ofrecerle.

Como diseñadores debemos luchar por el usuario, y el cliente en ocasiones te lo pone difícil. Hay que escucharlo y ganar su confianza, sí, él es el que mejor conoce su negocio y a sus usuarios. Pero nosotros como diseñadores conocemos otros conceptos clave por los cuales deberemos pelear (Claridad visual, usabilidad, hábitos digitales…) Es muy habitual que el cliente te pida que una página tenga mil funcionalidades, muestre mucha información, que sea rápida, responsive, que posicione ante los buscadores, que sea limpia, que tenga imágenes de calidad…

Nosotros debemos ser los responsables de hacerle ver los objetivos que busca en su proyecto. Muchos objetivos no son una opción, y que el producto sea “para todo el mundo” tampoco lo es. Además debemos conocer de antemano si disponemos de medios adicionales que nos faciliten el desarrollo del proyecto.

La escucha activa es la herramienta clave antes de tocar cualquier programa de diseño. Existen muchas técnicas para obtener información reveladora sobre los usuarios y trabajar mano a mano con el cliente.

Yo suelo utilizar un formulario que me ha resultado muy útil siempre que he iniciado un nuevo proyecto. Las preguntas que debemos hacer son las siguientes:

¿Cuál es el contexto general de tu negocio?

La primera pregunta es obvia, simplemente deberíamos conocer: El nombre de la empresa, su actual página web y la persona de contacto para el proyecto.

¿Por qué necesitas una Web? ¿Qué problema deseas solucionar?

Es importante conocer qué problema se desea solucionar. No es lo mismo crear una Landing Page que un E-commerce. Cada tipo de producto digital tiene objetivos muy distintos. Cada diseño se debe adaptar a un objetivo que tenemos que tener muy claro.

¿A quién va dirigida tu página Web?

Cuanto más nos acerquemos al perfil específico del usuario medio (User Persona) más fácil resultará diseñar un producto que se adapte a él. Si queremos lograr un buen trabajo deberemos conocer sobre el sector al que va dirigido. Como diseñadores podemos tener algo de idea en ciertos sectores, pero no en todos. Nuestro cliente se tiene que convertir en nuestros ojos.

¿Cuál es la propuesta de valor?

  • ¿Por qué tus clientes necesitan tus productos? ¿Cuál es el mayor beneficio que aportas (para el cliente, no para ti)?
  • ¿En qué se diferencia tu oferta frente a la de la competencia?
  • ¿Cómo está posicionado tu producto? ¿Cómo ven tu producto los usuarios?

¿Cuál es la percepción de marca?

  • ¿Qué quieres proyectar hacia tus clientes?
  • Haz una lista de los adjetivos que describan cómo quieres posicionar tu producto.
  • ¿Es esta imagen que quieres proyectar distinta a la imagen actual?
  • Haz una lista de las URLs/Apps que te gustan . ¿Qué es exactamente lo que te gusta de ellas?

¿Cuáles son los valores subjetivos de tu marca?

  • ¿Qué colores te vienen a la mente cuando piensas en tu marca?
  • ¿Qué formas asocias a tu marca?
  • ¿Animales, números asociados, tipografías que asociarías a tu imagen?
  • ¿Qué tipo de sensaciones (Detalles muy subjetivos) te vienen a la cabeza?

¿De dónde obtendremos el contenido para tu Web?

  • ¿Tienes contenido escrito o crearás contenido propio para la App/Web? ¿Quién redactará el contenido?
  • ¿Algún contenido visual que quieras que se utilice de tu material existente? (Logo, Paleta de colores, iconos, etc…)

¿Existen piezas gráficas adicionales?

  • Explica cómo éstas van a mejorar la relación con el cliente (Sobres, tarjetas de visita, Flyers…)
  • Cualquier tipo de piezas publicitarias que quieras utilizar para tu campaña puede ser útil para ser consistentes a la hora de diseñar un producto.

¿Disponemos de un plan de Marketing y comunicación?

  • ¿Tienes una estrategia de Marketing en mente para promocionar el proyecto?
  • Si es así, ¿podrías describirla?

Comentarios y notas adicionales

 

Aunque estas preguntas pueden ser lanzadas por mail, el contacto directo y el feedback es crucial. Cuando trabajamos en el diseño y desarrollo de una página web es importante hacer ver al cliente que de él depende en gran medida que el producto llegue a buen puerto. Una página web o una App es un elemento orgánico, que representa la identidad de la empresa. Puede ser cambiante y fijar criterios iniciales va a ser determinante.