Caso de Estudio: Rediseño de Superhábitos

Antes de realizar el rediseño de Superhábitos que ves hoy en día, los chicos se pusieron en contacto conmigo para hacer un ajuste en su identidad visual.

Ellos brindan herramientas para personas que quieren dejar atrás su empleo y diseñar el estilo de vida que desean. El slogan traduce de manera simple lo que hacen: “una forma simple de crear negocios”.

Los cambios que realicé les gustaron mucho y quedaron muy contentos con mi forma de trabajo. Si bien su negocio marchaba muy bien pero aún con esos ajustes sabían que su identidad visual y su sitio web no reflejaban el verdadero valor de su servicio.

Por lo tanto, decidimos que lo mejor era realizar un rediseño completo de su identidad visual y de su sitio web.

Con el rediseño, iban a poder reflejar su valor y aumentar la confianza. Esto los iba a llevar a un aumento de conversiones y de ventas.

Fue un proceso bastante largo y trabajar codo a codo con ellos fue una experiencia fantástica, y hoy quiero contarte el proceso de trabajo.

Puntapié Inicial

Siempre que comienzo un proyecto me gusta tener una charla de cómo va a ser el proceso. Tuve una llamada con Lucía y con Matías de Superhábitos, en donde nos pusimos de acuerdo en cómo iba a ser la forma de trabajar y cuál era el mejor camino a tomar.

Ellos son expertos en negocios y saben mucho de marketing. El hecho de que vinieran trabajando en su propio sitio hace algunos años, y que tuvieran un blog con una comunidad inmensa, ayudó a que el flow de trabajo fuese muy creativo.

Esto, sumado a que tenían un conocimiento muy amplio en código web, también ayudó a planificar el mejor camino.

Los puntos de la charla fueron:

  • Mejorar la identidad visual completa
  • Hacer que el sitio sea responsive
  • Mejorar la Experiencia del usuario UX (user experience) en el sitio

Definiendo los objetivos

Hicimos una lista para definir cuáles eran los objetivos a lograr en el nuevo diseño de Superhábitos. El principal fue tener un logotipo y un sitio web que reflejara el verdadero valor de sus productos.

Otros objetivos secundarios:

  • Reducir la tasa de rebote de la Home Page.
  • Simplificar el diseño.
  • Mejorar la Experiencia de usuario tanto para visitantes nuevos y frecuentes.
  • Hacer la web responsive.
  • Aumentar las conversiones del sitio.

Muchos de estos objetivos se plantearon al analizar las métricas de Google Analytics y de varios estudios con mapas de calor.

Identidad Visual

La imagen visual anterior de Superhábitos tenía muchos errores y no reflejaba la identidad de su negocio.

Querían que su rediseño fuera simple manteniendo su identidad, profesionalidad y la seriedad de su negocio sin que el cambio sea tan marcado para su audiencia.

El primer paso fue el de análisis e investigación. Creo que esta fue una de las partes más importantes, ya que a través de muchas preguntas y análisis de la actualidad, la competencia y la audiencia, pude traducir lo que ellos buscaban en la nueva identidad visual.

Siempre busqué la manera de guiarlos hacia el mejor camino.

El diseño tiene que ser simple y efectivo, por eso me gustan los logos minimalistas. Pero no me refiero a un minimalismo de “sacar todo”, sino de dejar lo justo y necesario para que funcione y el mensaje llegue de la manera correcta.

La idea fue mantener la identidad que ya tenían (la del superhéroe) pero tratar de simplificar para que el cambio no sea tan brusco para la comunidad actual.

El isotipo (el superhéroe) anterior tenía varios errores de dibujo que dificultaban la visual y la interpretación del mismo.

El logotipo (la parte escrita, en este caso “Superhábitos”) tenía varios errores de espaciado entre las letras, que hacían que la lectura del mismo no tuviera congruencia. Además, la tipografía no era adecuada con respecto a lo que ellos buscaban.

LOGOTIPO ANTIGUO:

 [ARTÍCULO RELACIONADO]:¿Cómo diseñar un buen logotipo para tu negocio?

En la nueva identidad quise enfocarme en la retórica de la imagen y la idea fue reemplazar la A por una capa. Así se iba a mantener la base con la que venían trabajando, y el superhéroe seguía estando.

Este fue un gran acierto ya que la nueva identidad se tornó simple, efectiva y muy memorable. Además, la nueva A en forma de capa la íbamos a usar como ícono y favicon.

LOGOTIPO NUEVO DE SUPERHÁBITOS

ISOTIPO – FAVICON

PALETA DE COLORES

Una vez que finalicé el diseño del nuevo logotipo, creé un pequeño manual para que ellos pudieran tener. Esto le sirvirá para que cualquier diseñador sepa como trabajar su imagen visual.

Decidimos que la tipografía que iba a acompañar a Superhábitos iba a ser Montserrat, tanto para los títulos como para los párrafos.

TIPOGRAFÍA

Desde que se realizó el rediseño los chicos de Superhábitos están muy contentos porque actualizar su imagen les permitió llegar a más personas  aumentar las venta de sus productos y servicios.

Esto es lo que comentan en las redes sobre el nuevo logo:

Esto es lo que dice Lucía de Superhábitos sobre el rediseño del logotipo:

Si querés asegurarte de tener un diseñador que comprenda tu marca y haga un diseño que comunique el valor real que tenés para aportar, Esteban es el adecuado. Además, el proceso es agradable, y no se termina hasta que estés feliz con tu logo 🙂

Lucía Serrano Palacios

Diseño Web de Superhábitos

Una vez definida la nueva identidad visual, había que empezar a planificar la nueva web. Como cada proyecto me gusta dividirlo en 3 fases:

Fase 1: Investigación

Fase 2: Planificación y creación Wireframe o bosquejo

Fase 3: Diseño Web

FASE 1: Investigación

La fase de investigación tiene varios puntos para analizar.

Por un lado, a través de varios formularios para afinar los objetivos del sitio web y busqué comprender qué es lo que ellos querían con su sitio web.

En esta etapa le pedí a Matías que me contara qué cosas funcionaban de su sitio y cuáles no.

Las conclusiones de él fueron:

    • Que el diseño sea simple, que mantenga la paleta de colores y que le permita saber a la persona en todas las páginas en qué lugar está.
    • El lenguaje y diseño deben ser claros para personas que no necesariamente son lectores ávidos de Blogs, pero sí usuarios activos de Internet.
    • El objetivo principal es la conversión de visitas en suscriptores.
    • Tener claro qué acción queremos que el usuario realice en cada página.

Luego analicé a la competencia para entender las cosas que estaban bien y las que no.

En este punto, también analicé sitios que les gustaban pero que estaban fuera de la competencia directa. Esto es clave para poder tomar ideas.

Por último, les sugerí que realizaran una encuesta con sus clientes, para ver cuáles creían que eran los problemas en su sitio web.  Esto nos iba a dar una visión más amplia que la nuestra y se pondría en palabras lo que los usuarios actuales consideraban un problema.

La conclusión fue que muchos tenían problemas en la navegación, especialmente para los lectores frecuentes.

Teniendo todo este nuevo material, creé el nuevo sitemap del sitio.

Como punto a destacar, se añadió la nueva sección de Podcast con un nuevo Call to Action para la suscripción al mismo.

SITEMAP DEL NUEVO SITIO

Haz click para agrandar

FASE 2: Planificación y creación del Wireframe o Bosquejo.

En esta etapa trabajé junto con Matías para ver cuál iba a ser la estructura del nuevo sitio web. Para eso, reestructuramos el sitio, simplificamos y pusimos orden. Algunas páginas fueron eliminadas o directamente se unificaron con otras, o pasaron a ser secciones.

Una vez planificada la estructura, diseñé lo que se llama Wireframe o bosquejo que es el esqueleto de la web.

WIREFRAME

Haz click para agrandar

FASE 3: Diseño web

Una vez que la estructura estuvo terminada, el siguiente paso fue adaptar el contenido y las fotografías al wireframe.

Como primer impulso, comenzamos recolectando imágenes y diseños de otras webs que nos gustaban. Teníamos algo en claro y era que queríamos simplicidad, tipografía en negrita, buenas fotos y algunos iconos simples.

Así fue que creamos un moodboard o collage juntando varias ideas de otros sitios webs.

Contenido

Los chicos se encargaron de crear el contenido. Les hice entrega de una planilla con cada sección para que ellos completaran títulos, subtítulos y párrafos. Ellos más que nadie conocen a su cliente y saben qué frases y palabras usar.

Fotografías

Los chicos me pidieron asesoramiento en las fotografías. Con esto también hicimos una especie de moodboard en donde buscamos ejemplos de cómo queríamos que fueran las fotos.

Una vez que definimos las fotos que queríamos lo que hice fue hacer el briefing para que ellos se lo pasaran al fotógrafo Como puntos claves analizamos:

  • La posición de cada uno
  • El gesto
  • La ropa
  • La acción

El resultado fue genial y las fotos están publicadas en la página oficial.

 [ARTÍCULO RELACIONADO]: Puedes ver un artículo en donde comparto: 7 consejos para la sesión de fotos de tu página web

Tipografía

La idea inicial siempre fue mantener la tipografía que habíamos elegido: Montserrat. Esta es una tipografía redonda y muy legible para los títulos.

Los chicos se sentían muy identificados con lo que esta tipografía transmite, por lo que decidimos también utilizarla en los párrafos.

Esta es una fuente que está muy de moda actualmente, y la podés encontrar en Google Fonts.

Colores

La idea principal fue mantener la paleta de colores que ya había establecido.

Además, quería utilizar el naranja en pequeños detalles como los botones, ya que el naranja en grandes cantidades no es muy adecuado.

COMPARACIÓN PRIMERA IMPRESIÓN DE LA HOME PAGE ANTES Y DESPUÉS

ANTES

Haz click para agrandar

DESPUÉS

Haz click para agrandar

LA NUEVA WEB EN DISTINTOS DISPOSITIVOS

Haz click para agrandar

Datos y Estadísticas

El sitio se estrenó el 30 de mayo del 2018.  Luego de 6 meses puedo sacar las primeras conclusiones.

Voy a pasar a compartir algunos puntos interesantes que trajo el rediseño del sitio web.

Como primer detalle se logró aumentar la retención y bajar el porcentaje de rebote.

Tráfico

El tráfico aumentó considerablemente comparado con el período anterior.

En azul lo nuevo, en naranja lo viejo:

Si bien hubo algunas bajas por el RGPD, el rediseño del sitio web fue positivo.

Acá se puede ver de corrido. La línea roja marca el paso del viejo sitio al nuevo.

Las estadísticas denotan que el rediseño del sitio web hizo que el tráfico orgánico aumente, y que mejore el comportamiento de los usuarios. Hubo un aumento del 40% en tráfico.

Los estudios dicen que un aumento del 20% anual está muy bien. En este caso el tráfico orgánico se duplicó con respecto a la media anual.

Rebote

Comparando los últimos meses con el período anterior, el porcentaje de rebote se redujo y aumentó el porcentaje de retención.

Esto es algo muy positivo ya que las personas permanecen más en el blog:

Conversión

Lo más importante que había que preservar y aumentar era la conversión. Acá podemos ver un antes y un después en donde se observa que la conversión subió un 27%

COMPARACIÓN ENTRE ANTES Y DESPUÉS DE LA CONVERSIÓN (antes a la izquierda, después a la derecha)

Conclusión

Las estadísticas muestran que el rediseño del sitio web y de la identidad visual tuvo un gran impacto positivo.

Para que tomes noción de los números:

Si para un sitio de 10.000 visitas/mes, el cambio implicó 4.000 más por mes (40%).

Si el 10% de esa gente llega a la landing son 1400 personas. Si antes el porcentaje de conversión era del 35% (504 suscriptores) ahora es del 46% (644 suscriptores)

Son 140 personas más que, a un valor de USD 0.5/Lead implica que hay un ahorro de 70USD por mes como mínimo.

En lo personal, fue un muy buen trabajo que pude hacer con los chicos de Superhábitos, en donde además de volcar mi conocimiento, aprendí muchísimo trabajando con ellos.

Espero que este caso de estudio les sirva como inspiración.

Aquí puedes ver el sitio finalizado:

VER EL SITIO COMPLETO

¿Qué te ha parecido?

¡DESCARGA GRATIS!

Responsable: Esteban Manuel Urrutia, Larralde 1257, Tigre, Argentina. Finalidad: Gestionar el envío del ebook y otras notificaciones sobre diseño gráfico, web marketing. Legitimación:Consentimiento informado por parte del interesado Destinatarios: Los datos que me vas a facilitar a través de este formulario van a ser tratados por Esteban Urrutia como único responsable y almacenado en los servidores de Mailchimp, mi proveedor de email marketing, ubicado en EEUU, que trabaja con estas políticas de privacidad.Derechos: Acceder, rectificar y suprimir los datos, así como como todos los derechos dentro del RGPD.

CHECKLIST DEFINITIVO PARA TENER UN SITIO WEB QUE IMPULSE LAS VENTAS

2 comentarios en “Caso de Estudio: Rediseño de Superhábitos”

  1. Hola Esteban;
    Bárbaro, tremendo, colosal, enorme post….
    Me está ayudando mucho con mi web.
    Un ENORME gracias.
    Cuantos compañeros de la formación de Arturo con tan buenas bases.
    Sos un mostruo

    • Jesús!

      Espero que lo de monstruo no sea por mi cara de tantas horas sin dormir 😉

      Me pone muy contento que te haya gustado y sobre todo tu comentario con tan buena onda.

      ¡Qué bueno que te sirva para tu web! Es fundamental para mi saber que lo que hago ayuda a otros a crecer.

      No dudes en preguntarme lo que necesites.

      Te mando un gran abrazo!

      Esteban

Deja un comentario

72 Puntos que no pueden faltar en el sitio web de tu negocio para impulsar las ventas

DESCARGA AHORA EL CHECKLIST DEFINITIVO

NOMBRE

EMAIL

Responsable: Esteban Manuel Urrutia Finalidad: Gestionar el envío del ebook y otras notificaciones sobre diseño gráfico, web y marketing. Legitimación: Consentimiento del interesado Destinatarios: Los datos que me vas a facilitar a través de este formulario van a ser tratados por Esteban Urrutia como único responsable y almacenado en los servidores de Mailchimp, mi proveedor de email marketing, ubicado en EEUU, que trabaja con estas políticas de privacidad. Derechos: Acceder, rectificar y suprimir los datos, así como como todos los derechos dentro del RGPD.

72 Puntos que no pueden faltar en el sitio web de tu negocio para impulsar las ventas

DESCARGA AHORA EL CHECKLIST DEFINITIVO

NOMBRE

EMAIL

Responsable: Esteban Manuel Urrutia Finalidad: Gestionar el envío del ebook y otras notificaciones sobre diseño gráfico, web y marketing. Legitimación: Consentimiento del interesado Destinatarios: Los datos que me vas a facilitar a través de este formulario van a ser tratados por Esteban Urrutia como único responsable y almacenado en los servidores de Mailchimp, mi proveedor de email marketing, ubicado en EEUU, que trabaja con estas políticas de privacidad. Derechos: Acceder, rectificar y suprimir los datos, así como como todos los derechos dentro del RGPD.

72 Puntos que no pueden faltar en el sitio web de tu negocio para impulsar las ventas

DESCARGA AHORA EL CHECKLIST DEFINITIVO

NOMBRE

EMAIL

Responsable: Esteban Manuel Urrutia Finalidad: Gestionar el envío del ebook y otras notificaciones sobre diseño gráfico, web y marketing. Legitimación: Consentimiento del interesado Destinatarios: Los datos que me vas a facilitar a través de este formulario van a ser tratados por Esteban Urrutia como único responsable y almacenado en los servidores de Mailchimp, mi proveedor de email marketing, ubicado en EEUU, que trabaja con estas políticas de privacidad. Derechos: Acceder, rectificar y suprimir los datos, así como como todos los derechos dentro del RGPD.

Consultoría de 30 minutos GRATIS

REGISTRATE PARA CONCRETAR LA LLAMADA GRATUITA Y DESCUBRIR CÓMO AUMENTAR LAS CONVERSIONES 

Tu Mail está seguro conmigo ;)

NOMBRE

EMAIL

Luego serás reenviado a un formulario sobre tu emprendimiento y podrás reservar una cita conmigo.

Responsable: Esteban Manuel Urrutia, Larralde 1257, Tigre, Argentina. Finalidad: Gestionar el envío del ebook y otras notificaciones sobre diseño gráfico, web marketing. Legitimación:Consentimiento informado por parte del interesado Destinatarios: Los datos que me vas a facilitar a través de este formulario van a ser tratados por Esteban Urrutia como único responsable y almacenado en los servidores de Mailchimp, mi proveedor de email marketing, ubicado en EEUU, que trabaja con estas políticas de privacidad.Derechos: Acceder, rectificar y suprimir los datos, así como como todos los derechos dentro del RGPD.