Diseño de sitios web centrados en el usuario

Conoce la metodología de Growth Driven Design

Growth Driven Design: Un nuevo enfoque de diseño web orientado al crecimiento y centrado en el usuario, que reduce los riesgos y la frustración al desarrollar una página web.

Tener un sitio web es como tener a tu mejor vendedor atendiendo 24/7. Atrás quedaron los tiempos en los que las webs eran solo para lucir una imagen bonita de tu negocio, si tu sitio web no está vendiendo hay algo que no está bien. Sin embargo, el 42% de los marketeros reconocen que hacen mejoras significativas a los sitios web de sus compañías apenas entre cero y una vez al año.    

Por eso queremos ayudarte a comprender mejor cómo desarrollar un sitio web óptimo que genere conversiones, sin tener que lidiar con problemas durante el proceso de desarrollo, gracias a la metodología de diseño web Growth Driven Design

Se trate de un sitio nuevo o un rediseño, esta metodología te ayudará a ahorrar tiempos y recursos. Algunas personas todavía le tienen pánico a la frase “rediseño web”, porque imaginan que se tardarán el tiempo que les tomó hacer la web por primera vez. Pero las cosas han cambiado y, a través del Growth Driven Design, puedes implementar cambios progresivos por fases, testeándolos en vivo y haciendo cambios sobre la marcha para tener una web siempre actualizada.

Tener una página que no se actualiza desde hace años ya no existe. El proceso de mejora es continuo y cuando te pregunten “¿cuándo estará lista tu web?” es probable que respondas nunca estará lista porque el proceso de armar páginas web orientadas al crecimiento no termina jamás. Si esto te produce ansiedad, imagina tener un sitio web que no genere tráfico ni ventas para tu negocio: una pesadilla.

Growth-Driven-Design

En Impulse venimos trabajando con esta metodología con nuestros clientes y estamos muy contentos con los resultados. Es un enfoque mucho más ágil e inteligente, basado en datos que minimizan las demoras del diseño web tradicional y generan un sitio de alto rendimiento que atrae, optimiza, convierte y enamora a tus clientes.

Esta guía está dirigida a gerentes de marketing, gerentes de tecnología, gerentes de transformación digital, responsables de gestión y diseño de productos que están buscando mejorar los resultados de su sitio web, atraer mas visitas, conseguir más leads, mejorar la experiencia de usuario y ofrecer contenido de valor que en verdad te genere clientes.

Al finalizar esta guía entenderás mejor cómo liderar un proceso efectivo de diseño o rediseño web, para lograr un sitio que de resultados y demuestre el ROI.

Tabla de contenidos

imagen del formulario

¿Sin tiempo para leerlo online? ¡Llévate esta guía en PDF gratis!

El Growth Driven Design ha llegado para quedarse. Si estás en proceso de diseñar o rediseñar tu sitio web, no dejes de leer esta guía completa de como hacerlo de una manera que esté 100% centrado en el usuario.

01

No más diseño web tradicional

imagen

¿Recuerdas esas páginas con colores fluorescentes, una navegación mínima y botones enormes? Seguro esto es lo que viene a tu mente cuando piensas en diseño web tradicional, pero te sorprendería saber que sitios web con interfaces modernas también están hechas bajo las premisas de un diseño web tradicional. ¿Por qué? Porque no generan resultados para el negocio.

Este tipo de sitios suele tener un clásico menú superior (Inicio, ¿Quiénes somos?, Servicios, Contacto) y un formulario de contacto con los datos básicos, pero no hay ningún elemento que invite a la conversión. La buena noticia es que no debes destruir lo que ya existe y perder meses con una página “en construcción”. Gracias al Growth Driven Design, puedes hacer cambios progresivos para ir aumentando el performance de tu sitio.

Menu-web-tradicional

Una web es el activo de marketing más importante con el que cuentas. ¿Dónde encuentran los usuarios la información antes de hablar con alguien? En tu sitio web.

 

desventajas-del-diseño-web-tradicional

Lo más preocupante del proceso de diseño web tradicional es que después de todo el tiempo, recursos y dinero que has invertido en tu nuevo sitio web no hay manera de saber que está listo para ser lanzado o es la mejor versión de la web posible. Esto pasa porque el proceso no contempla testeo ni mejora continua. Sólo hacia el final podrás ver un resultado total que puede ser exitoso… o no.

Además, la vida útil de un sitio web hecho bajo premisas antiguas es muy limitada. Si tu sitio web no se puede adaptar a los cambios, tan frecuentes en la industria hoy en día, entonces está condenado a fracasar. En Internet hay un cementerio especial para los cientos de páginas web que no pasaron la prueba del “update” a tiempo.

Diseño-web-tradiciona

Pero con rediseñar tu sitio no basta, el tiempo promedio de vida de una página web hecha con el diseño web tradicional es de 1.5 a 2 años, porque las herramientas, lenguajes de programación y tendencias están constantemente actualizándose.

Luego de este tiempo tendrás que hacer un nuevo sitio, esperar 3 meses para lanzar y así sucesivamente. ¿No suena muy eficiente, cierto?

Si tienes claro que el diseño tradicional no es lo que necesitas, te contamos cuál es la alternativa. Es moderna, es fácil de aplicar y da resultados.

factores-decisivos

 

New call-to-action
01

Diseño web para crecer

imagen

Hay un hito que cambia por completo la visión sobre el diseño web: una vez que te centras en las personas, estás haciendo Growth Driven Design. El cambio es sutil pero poderoso, tú sitio web no tiene que estar al servicio de caprichos estéticos, tiene que servir a las personas que lo visitan, cubrir sus necesidades, ayudarlos a navegar fácilmente, brindarles información, solucionar sus problemas.

Este cambio sencillo de paradigma es el inicio de una aventura fascinante en la que conseguirás más tráfico, leads y ventas, mientras ofreces a tus clientes un sitio de alto rendimiento.

“Bien, me convencieron, quiero probar el Growth Driven Design, ¿qué debo hacer?’”

Vamos por partes.

Lo primero que revisaremos el es concepto de iteración, porque lo tendrás muy presente durante todo el proceso de diseñar o rediseñar una web bajo los principios del Growth Driven Design (GDD).

“Iteración significa repetir varias veces un proceso con la intención de alcanzar una meta deseada, objetivo o resultado. Cada repetición del proceso también se le denomina una "iteración", y los resultados de una iteración se utilizan como punto de partida para la siguiente” – Wikipedia.

La iteración es importante, porque durante el Growth Driven Design tomaremos acciones repetitivas para probar sus resultados. Haremos cambios en función de estos y luego los volveremos a probar. Esto trae como consecuencia que no tengas que esperar hasta finalizar el proceso de rediseño para darte cuenta de que algo no funciona y volver a empezar.

Adicionalmente, el Growth Driven Design reduce las frustraciones, te guía hacia resultados óptimos gracias al uso de data, y ayuda a mejorar los procesos de toda la compañía a través de los valiosos insights que se obtienen directamente de las audiencias en las fases de testeo.

Diseño-web-vs-diseño-tradicional

01

Etapa 1: Planificación estratégica

imagen

El Growth Driven Design tiene tres etapas. La primera es una especie de pre-producción en la que se establece la estrategia del proyecto y se hace una lista de deseos. En la segunda fase se diseña el prototipo inicial de la web o las secciones a refrescar, con un “producto mínimo viable” que va a testearse.

La tercera fase es el diseño iterativo a través de un proceso circular de mejora continua. Tu sitio, siempre en línea, recopila data sobre cómo interactúan con él los buyer personas y, en función de esto, se hacen mejoras concretas. Usualmente este ciclo dura once meses posteriores al lanzamiento del prototipo para considerar que estamos en estado óptimo, pero las mejoras continuas no las abandonamos nunca.

Pasos-GDD

Etapa 1: La Estrategia

Para ejecutar un correcto proceso de “diseño que conduzca al crecimiento” debemos seguir los siguientes pasos:

Paso 1: Identificar los objetivos

Cuando se rediseña un sitio web se deben tener claros los objetivos, ya que de esto dependerá qué tan funcional es el sitio. De nada sirve tener la página más bonita del mundo si no genera ninguna conversión. Por lo tanto, los objetivos deben ser S.M.A.R.T (por sus siglas en inglés: Específico, Medible, Alcanzable, Relevante, a Tiempo)

Ejemplos-de-objetivos-a-medir

Paso 2: Investigación basada en la experiencia del usuario (UX)

Sabemos que lo que no se puede medir, no se puede mejorar, por eso es tan importante que analices los antecedentes de tu página. Revisa sus métricas, cuántas visitas tiene, sobre cuáles palabras clave está soportada, cuál es su posición en buscadores, cómo están sus backlinks. Toda esta información podrás compararla con los nuevos índices que se crearán luego de los cambios que implementarás. Sólo así sabrás si las mejoras están funcionando o no.

La experiencia de tus usuarios actuales te dará material para mejorar el desempeño de tu web, mientras empiezas a recolectar data nueva. Para hacerlo puedes usar entrevistas a los usuarios, encuestas, recolectar feedback directamente en la web o vía chat, hacer un auditoría a la web actual, someterla a testeo profundo y analizar el papel de tu web en los resultados de tu funnel de conversión. La revisión debe ser cualitativa y cuantitativa con el objetivo de llegar a un entendimiento profundo de tu audiencia. Asegúrate de brindarle al usuario una experiencia memorable gracias al UX Design

Diana

Paso 3: Jobs to be done

En la búsqueda incesante por entender a los clientes, el profesor Clayton M. Christensen de la Escuela de Negocios de Harvard propone un modelo novedoso que es clave para el éxito de las empresas: comprender “cuál es el trabajo que tus clientes quieren que tu producto los ayude a lograr”.

Cada consumidor “contrata” un producto o servicio para que lo ayude a completar una tarea, “ejecutar un trabajo”. Si el cliente logra su cometido satisfactoriamente, ese producto o servicio será contratado de nuevo, de lo contrario será despedido.

El Growth Driven Design adopta el Jobs to be done como marco de referencia para entender que los clientes tienen propósitos más grandes relacionados con su necesidad de progreso. Bien sea trabajos que necesitan hacerse u objetivos por cumplirse. Por eso, si tu producto -en este caso tu sitio web- no cumple con el trabajo o “no hace la tarea”, será despedido con un clic en la X arriba a la derecha.

Este es el gráfico del Jobs to be done en el que se toman en cuenta la situación actual, la motivación del cliente y el trabajo que espera ejecutar, es decir su propósito ulterior.

 

Jobs-to-be-done

Paso 4: Insights fundamentales asumidos

La mayoría de los negocios creen que conocen a sus clientes cuando, en la práctica, este conocimiento está basado en realidades asumidas que nunca han sido comprobadas. Este paso se encarga de contrastar “lo que creemos que quieren nuestros clientes” con lo que “realmente quieren”.

¿Cómo lo hace? Con datos, claro. Revisando cuál es la información que los usuarios están buscando, cuál es la propuesta de valor que se le está ofreciendo, cuáles son sus comportamientos y motivaciones; y cómo éstas influyen en la estrategia general y en la estrategia página por página.

Hacerse consciente de estas “asunciones” durante el proceso estratégico es un gran llamado a tierra, ya que nos ayuda a reconocer que como especialistas de marketing probablemente vivimos en una burbuja y que seguimos viendo el mundo desde la perspectiva del negocio pero no desde la perspectiva de las personas.

Saber a tiempo que estas realidades han sido asumidas a priori, ayuda a replantear la estrategia considerando los deseos y necesidades verdaderas de nuestros clientes.

mobile

Paso 5: Crear los Buyer Persona

Si ya te has familiarizado con la creación de Buyer Personas para tu estrategia Inbound, imaginarás que tu rediseño web también debe tenerlos en cuenta. Los perfiles detallados de tus compradores ideales te permitirá identificar qué tipo de sitio web están necesitando, cuál es la estructura que están esperando y las funcionalidades que debería tener la web para satisfacer sus necesidades.

Imagina que diseñas acciones de Inbound marketing específicas para tu buyer persona pero tu sitio web no las soporta porque está obsoleto, es lento o -pecado- no es responsive: toda tu estrategia se viene abajo porque el “vendedor 24/7 que es tu web” no está óptimo.

persona

Paso 6: Mapeo del viaje del cliente

De la mano con la creación del buyer persona, es el momento de ponerse en el lugar del usuario. A veces este paso cuesta porque es difícil abstraerse de todo el conocimiento que se tiene sobre el propio negocio, pero para eso existen los “usuarios tipo” con quienes puedes hacer pruebas.

Hemos llegado al punto de pensar en la relación que tienen nuestros buyer persona con nuestro sitio web, cómo se van a mover a través de él hasta convertirse en clientes.  El mapeo del viaje del cliente o “customer journey map” 1. Se enfoca totalmente en la experiencia del usuario y 2. También analiza las fases específicas del buyer´s journey y cómo la experimenta cada cliente.

El objetivo de tener esto mapeado durante la etapa estratégica, es saber exactamente cuál va a ser la experiencia de nuestro usuario una vez que entre al sitio web, cómo interactuará en cada uno de los puntos de contacto, cuáles serán los sentimientos asociados a cada paso y qué ocupará su mente en cada momento de la experiencia, hasta que se concrete la venta e incluso después de ella.

Lo importante de este paso es definir cuál es la información que se brindará, página por página, para no dejar ningún tema por cubrir ni ningún cabo suelto. Es indispensable no sólo que la información esté en el sitio web sino que sea fácilmente ubicable. Si “escondes” una información detrás de varios clicks o tras una ruta compleja, le habrás negado al usuario la oportunidad de obtener la información fácilmente. Sólo así podremos ofrecerles una navegación memorable por nuestro sitio.

customer-journey

Paso 7: Estrategia global

En este penúltimo paso de la fase estratégica nos encargamos de desarrollar la estrategia general para la página pero, además, una estrategia página por página (siempre tomando en cuenta todos los elementos anteriores). El objetivo de este paso es detallar cómo lograremos enganchar e influenciar al usuario de manera general a nuestra web y en cada una de sus subpáginas.

En este punto trabajamos la arquitectura del sitio, las funcionalidades clave, las posiciones, el branding, los colores, el SEO, los botones sociales, los links, es decir todos los detalles que componen la página para que interactúen de forma armoniosa entre sí, creando la mejor de las experiencias para nuestro usuario.

mundo

 

Paso 8: Realiza tu lista de deseos

Como si fuera Navidad, es importante que hagas una lista con lo que crees que debe mejorar. Trata de que sea una lista lo más específica posible, como cuáles módulos crear o qué elementos mover para mejorar la navegación o añadir páginas.

Organiza la lista por prioridades en función del impacto que tendrá cada acción. La regla acá es considerar el 80/20: el 20% de las acciones deben generar el 80% de impacto.  Piénsalo: si empiezas por una tarea larga que no te genere tanto impacto estarás usando mal tus recursos.

varita

Apoya tu lista de deseos en la investigación previa que realizaste de tus buyer persona, la usabilidad web de tu sitio actual, tus estadísticas y un benchmarking mínimo con referencias de páginas que sí generan negocio. Algunos aspectos a considerar en esta wishlist son:

 

ejemplos-a-medir

Debes saber que todas estas ideas no se implementarán de golpe ni al mismo tiempo. Una de las claves del Growth Driven Design es que las mejoras se realizan progresivamente, gracias al enfoque de mejora continua de nuestro sitio que contempla el Growth Driven Design.

tiempo-de-lanzamiento

New call-to-action
01

Etapa 2: Plataforma de lanzamiento

imagen

Cuando hacemos cambios en nuestro sitio web a la vieja escuela solemos estar impacientes porque en el diseño tradicional hay UN SOLO lanzamiento, hasta que el sitio no está listo, no lo lanzamos. Pero con el Growth Driven Design esto cambia, estaremos desarrollando y publicando constantemente, por eso la recomendación es implementar los cambios en una plataforma de lanzamiento y empezar a testear los resultados.

Una buena manera de empezar a implementar cambios testeables en tu web es implementando un blog en Hubspot, conoce cómo hacerlo creando tu propio template para blog

Este paso es la bisagra entre la estrategia y la implementación, por eso su objetivo es construir un sitio que luzca y se comporte mejor que el actual PERO que no sea tu producto final aún. Por eso lo llamamos plataforma de lanzamiento, es el “Cabo Cañaveral” del diseño web: tu página aún no está lista, el cohete no está en el espacio, pero estamos haciendo pruebas. El objetivo de estas pruebas es obtener data, analizarla e implementar mejoras.

ejemplos-objetivos

El creador de Growth Driven Design 

La metodología Growth Driven Design fue creada por Luke Summerfield. 

El año pasado estuvimos en #INBOUND18, uno de los eventos de Inbound Marketing más grandes del mundo organizado por HubSpot.  En el evento nos encontramos con Luke y pudimos entrevistarlo para que nos cuente todo sobre Growth Driven Design. 

 

01

Etapa 3: Mejora continua

imagen

En esta tercera etapa todo gira alrededor de la persona y es cuando más usaremos el concepto de iteración del que hablamos al principio. Gracias al desarrollo iterativo, tu objetivo será mapear cómo los cambios progresivos que estás haciendo en tu sitio web afectan al usuario en cada punto de contacto.

Es importante medir qué le parece el cambio, si le gusta, si lo entiende o si cambiaría algo.  ¿Cómo hacerlo? Testea, testea, testea y vuelve a testear. Con grupos en vivo, usando mapas de calor e, incluso incorporando preguntas directo en el site. Hace poco rediseñamos nuestro blog e incluimos este test:  

valoracion-blog

Es así de sencillo. Para esta segunda etapa considera estos 4 pasos que se complementan entre sí en un ciclo sin fin.  

aprendizaje-gdd

Paso 1. Planificar

Identifica los elementos más relevantes a tener en cuenta para diseñar el “producto mínimo viable” de tu nuevo sitio web. En esta etapa el equipo de marketing y ventas deben trabajar en conjunto para revisar cuales son los elementos claves de la lista de deseos que está demandando nuestro “cliente ideal”.

checklist-de-tareas-a-supervisar

 

objetivos-growth-driven-design

Esto es lo que no debes perder de vista en este paso:

  • ¿Qué puedo hacer para aumentar la conversión? Prueba distintas rutas para los usuarios, haz test A/B para comprobar cuáles funcionan mejor y monitorea los puntos de conversión como CTA’s y formularios de descarga.

  • ¿Cómo puedo seguir mejorando la experiencia del usuario? Toma en cuenta las recomendaciones del UX design para que mejores la usabilidad y navegación. Mide qué tan bien le va al usuario con tu web a través de mapas de calor ¡y mejóralo!

  • ¿Cómo puedo brindarle al usuario una experiencia personalizada? Tu web debe contribuir a tu estrategia de marketing contextual, recabando datos de los usuarios para que en su próxima visita se sientan como si siempre los estuviste esperando.

  • ¿Cómo puedo hacer que mis activos de marketing sean realmente relevantes? Pensando en tu Buyer Persona, debes enfocar la creación de activos de marketing (landing page, pilar page, thank you pages, emails y descargables) en generar crecimiento, es decir leads y oportunidades.


Paso 2: Desarrollar

Aquí es el momento donde por fin tu sitio comenzará a ver la luz. ¿Te parece que ha pasado mucho tiempo? Recuerda que lo que vas a implementar ha tenido varios pasos de verificación y testeo así que, apenas lo lances empezará a generar resultados.

Es importante que todos los implicados en el proceso de planificación cumplan con cada elemento de acción para desarrollar un sitio que cumpla con las expectativas planteadas al inicio. En esta etapa lo indispensable es que todo el equipo esté involucrado en el crecimiento y que se hagan experimentos sencillos para probar ciertos funcionamientos.

hack1

Paso 3. Aprender

El trabajo no termina luego de realizar todas las pruebas y validaciones necesarias, es importante un constante aprendizaje.

evalua

hack2

Paso 4. Transferir

Este paso consiste en compartir y transferir los conocimientos que se aprendieron durante el proceso hacia el interior de tu compañía. Toda la información recabada sobre tu buyer persona, cómo se comporta la audiencia en la página, y cuál es su comportamiento con los activos de contenido son insights valiosos para reafirmar hipótesis o replantear tus campañas.

Cuando el buen diseño orienta al crecimiento se trata precisamente de esto: generar conocimiento para todo el equipo que se traducirá en un sitio web más exitoso en conversiones e impactará el trabajo de todo el equipo, tanto de los colaboradores internos como externos.

Los ítems más importantes de este paso son compartir los aprendizajes, hacer preguntas a lo interno, obtener una experiencia de usuario consistente e identificar oportunidades de colaboración con la página.

Paso 5. Repetir el ciclo

El Growth Driven Design permite invertir en actualizaciones de tu sitio web sin tener que gastar tiempo ni recursos en largos y complejos procesos de desarrollo que ni siquiera sabemos cómo van a funcionar al final del proceso.

Por otro lado, estos cambios y ajustes deben repetirse constantemente durante todo el año, centrándose en identificar mejoras para el sitio y poniéndolas en marcha en corto plazo, para lograr que el sitio web tenga un mayor impacto y así hacer crecer el negocio.

LAS CLAVES: Repite el ciclo cada dos semanas; toma acciones concretas a mejorar; enfócate en alcanzar un objetivo medible a la vez; cuando lo obtengas, muévete hacia el siguiente objetivo.

Como repaso, acá están de nuevo ver las tres etapas del proceso condensadas.

 

GDD-roadmap

 

Las empresas que usan Growth Driven Design en sus sitios web obtienen 16.9% más de leads y un 11.2% más de ganancias, luego de 6 meses con clientes, según datos de Hubspot. ¿Suena increíble? Comprueba que es posible.

01

¡Dile hola al Growth Driven Design!

imagen

El Growth Driven Design es el fundamento de todo proceso de diseño que busque contribuir al crecimiento de una compañía. Un diseño óptimo puede ayudar a ofrecerle una mejor experiencia a tus usuarios, convertir tu página web en un sitio útil, aumentar tu tráfico orgánico, incrementar tus ratio de conversión captando cada vez más leads, puede ayudarte a nutrirlos para convertirlos en clientes y, como si fuera poco, es un proceso que te brindará aprendizajes importantes para otras áreas de tu negocio.

Una estrategia clara, una plataforma de lanzamiento para testeo y un proceso de mejora continua harán que el proyecto de rediseño de una web deje de sonar como la pesadilla de todo equipo de marketing. Con el Growth Driven Design ahorrarás costos,  irás más rápido y, lo más importante, tu web empezará a obtener resultados tangibles gracias a acciones pequeñas, que implican poco esfuerzo pero generan más impacto.

En definitiva es una manera más inteligente y ágil de aproximarse al diseño. La próxima vez que pienses en crecimiento teniendo a tus usuarios y su experiencia como norte, estarás pensando en Growth Driven Design.