Qué es el Growth-driven design

Llevar a cabo un proyecto por cualquier agencia de diseño web puede acabar convirtiéndose en la peor de las pesadillas. En la mayoría de las ocasiones, el problema proviene de intentar buscar todo aquello que se necesita para lanzar el sitio web sabiendo que hasta dentro de unos años no hay previsto un nuevo rediseño.

Además, aunque se tenga en cuenta muchos aspectos, es normal darse cuenta de otros que no se han valorado una vez ya se ha lanzado el proyecto.

Es por esta razón que aparecen filosofías de diseño como el Growth-Driven Design basadas  en un crecimiento continuo del sitio web que se aleja del diseño web tradicional. No hay ningún inicio y final claro, si no siguiendo la filosofía lean startup busca una mejora continúa utilizando datos, reales de usuarios interactuando en el sitio web para ir añadiendo mejoras.

Si se añaden las posibilidades del conocido Inbound marketing se acaban convirtiendo una estrategia ganadora por la posibilidad de generación de ventas que se pueden llegar a producir.

Diseño tradicional versus Growth-driven design (GDD)

En el diseño web tradicional el proceso se suele parecer a:

  • Definir objetivos para el nuevo sitio web
  • Desarrollar hipótesis para poder alcanzar las metas
  • Desarrollar wireframes
  • Diseño de las pantallas del sitio web
  • Integrar los diseños en el gestor de contenidos
  • Lanzar el sitio web y normalmente olvidarte de él hasta el nuevo rediseño. Para el que suelen pasar entre 3 y 4 años habitualmente.

En el caso del GDD

El crecimiento se busca en el día a día, semana a semana, creando una interpelacion entre los equipos de marketing y ventas. el sitio web está pensado para ir creciendo de manera que las mejoras en continuas que permitan aumentar las conversiones y la posibilidad de adquirir nuevos leads para el negocio.

En el  Growth-driven design la idea por tanto pasa por:

  • Establecer las necesidades básicas para el nuevo diseño web
  • Se diseña y desarrolla esta nueva versión del sitio web con todo lo imprescindible. Hacer una versión, aunque completa, pero sin todas las funcionalidades.
  • Como ya  disponemos de un sitio web,  se está en un proceso de mejora continua, mejorando el diseño, y todo lo que lo conforman
  • Llamadas a la acción
  • Contenido
  • Gráficos

Todo con la gran ventaja que es a partir de datos reales de visitantes. Para conseguirlo podemos apoyarnos en herramientas de grabación de vídeo real de sesiones de usuarios como Hotjar o  mapas de calor, como los de Crazy Egg o en test A/B si tenemos visitas suficientes para poder valorar desde un punto de vista estadístico las acciones de los usuarios ante los nuevos cambios.

https://www.youtube.com/watch?v=hI5Dd6ZzuYc

El GDD es, en realidad, la forma en como cualquier proyecto de la era digital se debería estar realizando, Un momento en el que la velocidad y la personalización son aspectos fundamentales de la comunicación entre marcas y clientes.

La importancia del diseño UI y UX en un ecommerce

Cuando no logramos la tasa de conversión que esperamos en un ecommerce, uno de los aspectos que debemos preguntarnos es si nuestro diseño web dispone de una experiencia de usuario correcta.

Hoy en día, se ha normalizado a la hora de trabajar conceptos como el diseño UI y UX, metodologías que nos ayudan a la hora de ofrecer a nuestros visitantes un sitio ergonómico y fluido, permitiéndoles encontrar información rápidamente, y así, poder convertir más.

Por esta razón, es interesante hablar de aquellos aspectos que debemos tener en cuenta para optimizar nuestro ecommerce y qué debemos modificar para que los visitantes conviertan más?

Empecemos por el principio.

experiencia-usuario

¿Qué diferencia hay entre el diseño UI y UX?

En el diseño de sitios web, muy a menudo hablamos de diseño de UX para la experiencia del usuario (User eXperience) y diseño de UI (User Interface) para la interfaz de usuario, diseño gráfico.

Incluso hoy en día, estas dos nociones son a veces confusas, a pesar de que representan dos habilidades muy distintas y específicas.

¿Qué es el diseño de UX?

El Diseño de UX o Experiencia de Usuario, es el conjunto de elementos planificados para diseñar un sitio web que satisfaga plenamente las necesidades de un usuario, en cuanto a su uso.

La idea final es poder desarrollar una interfaz web agradable y fluida teniendo en cuenta las expectativas y necesidades de nuestros usuarios para que puedan interactuar sin demasiados esfuerzos

¿Qué aspectos clave deberíamos tener en cuenta en la UX?

Visibilidad, el sitio debe ser fácil de encontrar

Accesibilidad, el sitio debe ser legible en todos los dispositivos

Atractivo: el diseño debe ser atractivo y de uso agradable

Facilidad: el sitio debe ser intuitivo para que los visitantes puedan localizar fácilmente aquello que buscan

Credibilidad: el sitio debe ser creíble y transmitir la imagen de la marca

Eficiencia: el internauta debe encontrar rápidamente lo que busca

¿Qué es el diseño de interfaz de usuario?

En cuanto al diseño de la interfaz de usuario, es uno de los componentes de la experiencia del usuario. Se trata de crear un aspecto visual, agradable, práctico e inspirador, que permita al internauta alcanzar su objetivo.

El diseño UI se enfoca en:

  • Crear identidad visual: creación de logotipos, definición de colores, tipografía, etc.
  • Creación de animaciones, efectos visuales, …
  • Establecer una jerarquía visual
  • Aplicar los principios de la ergonomía web

UX no es el IU, pero, IU es el UX

Ambas disciplinas son necesarias al crear un sitio de comercio electrónico (o cualquier sitio web), la interfaz de usuario y el diseño de UX son complementarios, pero es importante no confundirlos.

Estar satisfecho con el diseño de la interfaz de usuario, es decir, la parte gráfica, sería como tener un bonito paquete de regalo sin nada dentro… Cuando hablamos del diseño de un sitio web, es lo mismo, tener un sitio web “bonito” es bueno, pero satisfacer las necesidades de sus visitantes es mucho mejor a la hora de conseguir nuestros objetivos.

Lo contrario es lo mismo, el UX sin UI no daría una interfaz ergonómica y fluida a nuestros visitantes, por lo que es probable que se vayan más rápido.

Por estas dos razones, es necesario pensar más. Debemos hacernos las preguntas correctas antes de empezar a crear un sitio web, debemos definir la estrategia:

  • ¿Cuáles son los objetivos?
  • ¿Cuáles son las necesidades?
  • ¿Cuáles son los objetivos para la creación del sitio web?

De esta forma, cuando queremos crear de cero o rediseñar debemos mezclar las dos nociones: diseño de UX y UI. Con una interfaz web funcional y ergonómica que cumple sus promesas y es adecuada para sus visitantes, tendremos mayores oportunidades para llegar al público objetivo principal y satisfacer directamente sus necesidades. De esta manera, estaremos más en sintonía con la realidad del mercado disminuyendo la frustración de nuestras visitas.

Cuando el diseño UX es relevante buscamos comprender el comportamiento de los visitantes y diseñar una interfaz web que satisfaga sus necesidades, permitiéndoles actuar sin demasiadas dificultades y restricciones.

Por lo tanto, es necesario mejorar la experiencia del usuario y hacerla lo más agradable posible, tanto técnica como ergonómica y gráficamente, es decir, la parte de la interfaz de usuario.

Definir la estrategia

Antes de empezar a diseñar nuestro ecommerce debemos configurar la estrategia. Debemos tener una comprensión del entorno, el mercado y los objetivos.

  • Cuál es nuestra personalidad de marca
  • ¿Quién es la competencia?
  • Qué objetivos tenemos
  • Qué necesidades debemos resolver
  • Qué resultados específicos debemos obtener con el sitio web

El análisis preliminar es necesario para saber cómo construir nuestro ecommerce. Un sitio que no está pensado en UX cuando se crea, tendrá pocas visitas y, por lo tanto, pocas posibilidades de alcanzar su objetivo.

Para responder mejor a las diferentes necesidades de nuestros objetivos debemos trabajar en definir nuestro buyer persona.

Estrategia Diseño UX de nuestro ecommerce

Una vez hemos definido nuestra estrategia, conocemos el entorno, el mercado, los competidores y desarrollado nuestra personalidad de marca si no la tenemos, debemos llevar a cabo nuestra arquitectura de sitio y wireframes iniciales.

Debemos desarrollar la estructura del sitio web:

  • ¿Qué páginas debemos crear y cómo va a ser la navegación entre ellas?
  • ¿Cómo disponer los bloques de contenido para que sean relevantes para el usuario?
  • ¿Es intuitiva la navegación entre los bloques y las páginas?

Con los wireframes podemos dibujar rápida y fácilmente todos las diferentes pantallas que conforma el ecommerce.

Creemos nuestro diseño

Una vez tenemos nuestros wireframes es cuando podemos empezar con el diseño de la interfaz de usuario.

Ahora se trata de llevar cabo gráficamente el wireframe respetando la singularidad visual de nuestra marca como son los colores, las tipografías, fotografías, etc.

Todo esto proceso es necesario si queremos proporcionar una navegación intuitiva, porque ya sabemos que solo con un diseño, por muy a la moda y visual que sea, si no es lo suficientemente rápido e intuitivo, no obtendrá muchas ventas.

Es necesario tener en cuenta en cada momento a los visitantes. Ellos deben entender clara y rápidamente toda la información que han venido a buscar y necesitar, por ejemplo:

  • ¿En qué página se encuentran?
  • ¿Disponen de un botón de volver atrás o un breadcrumb para facilitar la navegación?
  • ¿Hay filtros y una búsqueda rápida?
  • ¿Facilitamos que nuestras visitas se puedan poner en contacto con nosotros?
  • ¿El sitio web carga rápidamente?
  • ¿Hay alguna manera de guardar los artículos y volver más tarde a comprarlos?
  • ¿Disponemos de comentarios para que puedan tener mayor información del producto que van a comprar?

En mercados competitivos, ofrecer la mejor experiencia de usuario es determinante, si no tienen la información o el artículo que vinieron a buscar o si el tiempo de carga de las páginas es demasiado largo lo más probable es que se vayan a la competencia.

Mostrar los productos de manera efectiva

El objetivo principal de todo ecommerce es vender. Para ello, hay que tener en cuenta cómo se muestran los productos en la página de inicio y la disposición de los elementos en las páginas de productos.

No podemos sobrecargar a los visitantes con información, debemos ser capaces de mostrar solo la información esencial sobre los productos y debemos vigilar de no desviar la atención hacia elementos secundarios.

Si ya tenemos claro que sin contenido interesante o análisis de UX de antemano, no funcionará nuestro ecommerce también lo es el diseño de la interfaz de usuario que busca crear un entorno gráfico agradable, práctico y emocional. El estilo es, por lo tanto, un paso importante a tener en cuenta a la hora de diseñar el ecommerce. Aquí hay algunos consejos:

  • Planificar una armonía general del sitio: que dará a nuestros visitantes una sensación de satisfacción estética y mejorará la experiencia del usuario.
  • Respetar la identidad visual de la empresa: para dar a sus visitantes consistencia y seguridad de que están en su sitio.
  • Establecer una jerarquía visual de las diferentes áreas que se han diseñado.
  • Defina un estilo visual que coincida con los productos que vendemos: los visitantes solo necesitan unos segundos para entender qué productos se venden en su sitio.

La importancia del diseño para móviles

Cuando el usuario está en móvil, la experiencia de usuario es diferente a la de escritorio. Y debemos plantear nuestro diseño teniendo estas particularidades.

Algunas ideas que nos pueden ser útiles son:

  • Destacar elementos importantes como son el menú o el acceso a la parte de usuario
  • Llevar a cabo los wireframes pensando en móviles para poder responder mejor a todos los problemas que los usuarios pueden encontrar al utilizar sus teléfonos o tabletas.
  • Asegurarnos que las páginas de producto cargan rápidamente, los usuarios móviles son particularmente impacientes, debemos asegurarnos que permanecen en el sitio.
  • Debemos eliminar todo elemento innecesario para despistar lo mínimo posible en los momentos más importantes de la conversión.

A la hora de diseñar un ecommerce pensando en la experiencia del usuario debemos ofrecer una combinación de velocidad, diseño y consistencia. ¿Te apuntas al camino correcto?

Consejos a la hora de diseñar un sitio web

Un sitio web es un organismo vivo que no solo requiere de atención sino que muy a menudo va mudando de piel, sobre la marcha y hace que un rediseño web no sea tan necesario.

Hay veces que los sitios web se enfrentan a un proceso de rediseño, las razones pueden ser varias, algunos ejemplos:

  • Por  expreso deseo de quién gestiona el negocio que posee el sitio web, a menudo el CEO puede pensar en que desea cambiarlo porque se ha cansado el diseño, o que no está siguiendo la moda. Este tipo de cambio habitualmente son una una pérdida de tiempo y dinero.
  • En otras ocasiones, sucede que estamos descontentos con el posicionamiento en buscadores de nuestro sitio web y un cambio de arriba abajo puede ayudar. Aunque cambiar solo por un tema de posicionamiento buscadores puede no ser la mejor idea. Quizá sea más interesante poder hacer una auditoría para entender dónde puede encontrarse los problemas por los que no estamos posicionándonos como deseamos. También es muy útil el poder estudiar la competencia y entender que les hace falta y que no antes de embarcarse en un proyecto de rediseño web.
  • Otra razón habitual por la que se cambia el diseño web de nuestro sitio proviene del hecho que deseamos rediseñar la experiencia de usuario, habitualmente escrita por sus siglas: UX.

El gran interés del UX proviene del hecho que nos estamos poniendo en la piel del usuario cuando están visitando el sitio web.

  • ¿Es difícil encontrar apartados o contenidos en el sitio web?  
  • ¿Está la tasa de rebote por las nubes?
  • ¿La navegación es en dispositivos móviles es infumable?

En este caso intentar modificar el diseño del sitio web puede ser un cambio perfecto para ganar más conversiones en el sitio web.

Algunos beneficios que lograremos con el rediseño del sitio web:

  • Mantener las personas por más tiempo en el sitio web
  • Comunicar mejor el mensaje de la marca
  • Podrán encontrar aquello que están buscando más fácilmente.
  • También puede ser perfecta para recopilar datos de navegación que permitan mejorar el conocimiento de los usuarios cuando interactúan como promueven filosofías de trabajo como el Growth-driven design. Una metodología de diseño que se enfoca en el crecimiento mes tras mes.

No hay que olvidar que un sitio web es un lugar de crecimiento para el negocio que puede convertirse en el mejor comercial trabajando las 24 horas del día, por lo que cualquier diseño web es importante tener en cuenta que:

  • Debemos facilitar la comprensión de los visitantes
  • Permitir una correcta indexación en buscadores
  • Aumentar las conversiones de los posibles clientes que llegan a nuestro sitio web
  • Hacer el sitio web más ágil y manejable

Algunos consejos a la hora de encarar el rediseño del sitio web

Evaluar las métricas del website que está ahora mismo. Los datos fomentan el no dejarse llevar por la subjetividad. Algunas de las métricas que pueden ser útil pedir son:

  • Autoridad del dominio nos podemos basar en el DA (Domain Authority) de la empresa MOz
  • Ranking en buscadores para bodas de las palabras clave que se importantes para el negocio
  • Tasa de rebote
  • Llamadas a la acción, CTA, en páginas clave
  • Tiempo medio de permanencia en esas páginas
  • Qué dispositivos están utilizando nuestros usuarios:  móvil, tablet, escritorio
  • Tiempo promedio de permanencia en las páginas del sitio web donde se puede producir una conversión
  • El origen del tráfico de las visitas web: orgánica, social, directa
  • Conversiones y tipos de conversión

Analizar qué contenidos deben continuar con el rediseño.

  • ¿Se pueden mejorar las entradas del blog?
  • ¿Se pueden eliminar ciertos apartados que han quedado obsoletos?
  • ¿Qué partes debemos conservar a toda costa?

Análisis de la competencia

Estudiar cuáles son  los puntos fuertes de la competencia es un paso obligado.

  • Hay aspectos de las funcionalidades en el que nos superan
  • El flujo de navegación es coherente, la experiencia de usuario es más cómoda, hay menos pasos hasta llegar al objetivo.

Marcarse objetivos

Qué objetivos deseamos lograr con el sitio web. Nos interesa establecer unos objetivos SMART de todos los miembros del equipo sean conscientes, ya sea al desarrollador web, el diseñador, el copywriter, etc.

Enfocarnos en el comprador

Hoy en día el usuario es el que manda, el que está en el centro de todas las acciones que como negocio se realizan.

  • ¿Qué diferencias hay entre los compradores?
  • ¿Cómo mis contenidos y apartados van a resolver sus necesidades y retos?

Nos podemos apoyar en gestores de contenidos y en contenido inteligente que nos proporcionan herramientas como Active Campaign o Infusionsoft para poner dos ejemplos.

Desarrollar wireframes de cómo va a ser el nuevo sitio web

Los wireframes permiten desarrollar un primer borrador de lo que necesitamos incorporar en el sitio web. Las funcionalidades es muy útil poderlas compartir con todo el equipo implicado:  diseñadores, desarrolladores, equipo de marketing online etc.

De esta manera un proceso de debate inicial, con una comprensión clara de todo tipo facilitará el desarrollo posterior de manera más eficiente.

No te olvides de la arquitectura del sitio

Disponer de un mapa claro de cómo va a ser el sitio web facilitará crear una mejor estructura pensando en facilitar el trabajo de los buscadores. El tener una estructura clara antes de empezar el rediseño web permite detectar fácilmente problemas que nos pueden surgir como el contenido duplicado o la generación de flujo del usuario.

Diseñar el flujo del usuario

Aunque el diseño es importante, no es menos importante el pensar cómo va a ser el flujo del usuario al navegar por nuestro sitio web. Al igual que apertura del sitio web, cuanto más claro este inicio más fácil será la posterior implementación. Nunca hay que olvidar que cuanto más tiempo se dedica a la planificación más fácil van a ser los siguientes pasos. En cada etapa del llamado buyer journey el usuario va a necesitar información específica. Hay que diseñar todos los flujos de usuario para lograr el mayor número de conversiones.

Un equipo involucrado

Todos los miembros que participan en los proyectos de diseño web pueden aportar sus opiniones y mejoras a buen seguro enriquecer al proyecto.

Busca el diseño que te ayude a conseguir tus objetivos

Filosofías de trabajo en el a la hora de diseñar como el GDD, Growth-driven design,  basadas en un metodología de crecimiento del sitio web de una forma progresiva, generado a partir de continuas iteraciones, que hace que el sitio crezca y vaya actualizándose continuamente. De esta forma los rediseños no son totales cada tres o cuatro años, sino que el diseño del sitio evoluciona a la vez que el negocio y los costes se reparten a lo largo de los años.

Otro beneficio que podemos encontrar es que hay una mejor relación entre los equipos de venta y diseño lo que les permite adoptar un enfoque estratégico más productivo.

¿Empezamos con el rediseño del sitio web?

 

Consejos de diseño para una campaña de email marketing

Hacer campañas de email marketing es una forma perfecta para mantener seguidores, clientes, comunicar y generar, en el mejor de los casos ventas.

Estamos hablando de una comunicación perfecta en la que incluso podemos acercarnos a que sea directa en la intimidad del buzón de cada uno de los suscriptores.

Por desgracia, a veces tienen poco impacto los objetivos de negocio por la poca relevancia que se le suele otorgar.

Para intentar revertir esta situación, es muy importante tener un buen diseño de correo electrónico para nuestras campañas de email marketing. El objetivo es muy claro, conseguir que cualquier lector desee leer el email. Como en cualquier ámbito del diseño web, una interfaz agradable puede llevar aumentar y disminuir la posibilidad  lectura.

Algunos consejos para optimizar nuestra campaña de marketing:

Experiencia de marca

Todos asociamos con unos valores o unos hechos concretos. ya sea en logotipo, combinación de colores de la empresa o el diseño del website. Al enviar el email lo que siempre debemos buscar es que los receptores no se sientan confundidos acerca de quién está enviando el email. Por ello es recomendable utilizar:

  • Los mismos colores corporativos
  • Tipografías empleadas habitualmente. Así como los colores.
  • Imágenes y logos.

El lector espera al abrir el correo electrónico sentirse en el mismo espacio que en el sitio web.

Si no seguimos este criterio, al abrir podemos pensar que es otra campaña o que sea correo no deseado.

Menos es más en el diseño

Con la expansión de los smartphones la navegación en la red se ha vuelto esencialmente móvil, y en el caso del email no es una excepción. Por lo que es muy importante diseñar pensando de forma responsive como hablábamos en el caso del diseño para móviles. Aquí la recomendación pasa por facilitar la lectura, hacerlo más útil y favorecer las opciones de conversión.

Para conseguirlo, no hay nada como disponer de titulares grandes y llamadas a la acción claras. La situación del CTA es importante. Darle visibilidad al inicio del email, antes, si es posible, que el usuario tenga que hacer scroll. La razón es sencilla, es donde pasa más tiempo y es visible a simple vista.

El tamaño de la fuente es importante que sea grande al menos de 16 píxeles, así como dejar aire en el diseño para que el texto gane protagonismo.

La importancia del diseño para móviles

Ya hace unos años los dispositivos móviles en internet. un ordenador de escritorio se ha visto desbordada por practicidad del uso del móvil. A día de hoy, ruboriza ver cómo muchos sitios web no tiene un diseño pensado para verse correctamente en dispositivos móviles, el conocido diseño web responsive. Hay muchos de estos sitios, especialmente los que están enfocados a B2C el tráfico móvil supera el 80%. En el mundo, y en países como España, la venta de dispositivos móviles es incesante. De largo, son dispositivo rey para acceder a cualquier sitio web.

¿Está tu sitio web preparado?

Un sitio web que no esté optimizado para este tipo de usuarios, puede estar perdiendo un gran número de clientes potenciales. Es lógico que como usuario me vaya a sentir mucho más cómodo en un sitio que se ha pensado con una mentalidad mobile first, es decir, en el que a la hora del diseño web se ha desarrollado inicialmente pensando dispositivos móviles.

Un sitio que se ha diseñado queriendo ser mobile friendly, sin duda, va a aumentar ventas porque el usuario se va a encontrar en un entorno más amigable para moverse y en el que asegura la información a mostrarse teniendo en cuenta las restricciones como el del tamaño de pantalla.

Sí, además, nuestro público es ampliamente joven, no estar diseñando para móviles es un completo suicidio.

Google, como uno de los líderes en el tráfico web mundial, está muy interesado los dispositivos móviles como lo demuestra los esfuerzos que hacen en diversas direcciones, por ejemplo:

El diseño responsivo es el recomendado por Google como la solución que facilita la indexación de manera sencilla. Al ser el mismo y el que se visualiza un escritorio permite a los desarrolladores concentrarnos en un solo sitio web.

https://www.youtube.com/watch?v=8Og2BnpBhkM

Las características que definen a este responsive web design suelen ser:

  • Se utilizan framework como bootstrap que facilitan el adaptarse a las diferentes resoluciones de pantalla cuando se está realizando el desarrollo web.
  • Las imágenes se ajustan también a pantallas más pequeñas, incluso se preparan a resoluciones más grandes para dar un mejor soporte pantallas como la retina con una densidad de píxeles superior.
  • Se esconden algunas partes del diseño para facilitar la visualización de la persona que accede desde móviles y no sentirse abrumado por la cantidad de información. No hay que olvidar que debemos facilitar el acceso a la conversión que nos hemos planteado en nuestro sitio web. Se producen cambios aspectos que están relacionados con la movilidad como puede ser la ubicación. Un aspecto útil para una persona que este movimiento.
  • El diseño que se adapta a móviles ayuda a mejorar el posicionamiento en buscadores.

Como puedes comprobar, diseñar para móviles son todo ventajas, ¿te apuntas?