Checklist definitivo para tener un sitio web que implse las ventas

¡DESCARGA GRATIS EL CHECKLIST Y CONVIERTE VISITAS EN CLIENTES!

Caso de Estudio: Rediseño de Pixel Wilderness

Hoy quiero presentarles el segundo caso de estudio. Se trata de un rediseño completo de la identidad visual y sitio web de Pixel Wilderness, una empresa ubicada en Estados Unidos.

Por si no has leído el primer caso de estudio:rediseño de Superhábitos, pueden hacerlo haciendo click acá.

Si bien el rediseño web final se publicó en Septiembre, he decidido esperar unos meses para publicar este artículo, ya que me parecía importante sumar algunas métricas y poner a flote una vez más la idea de que el diseño, el bueno diseño, genera un impacto positivo en cualquier tipo de negocio.

Para contar como surge el trabajo que desemboca en este caso de estudio es necesario que vuelva el tiempo hacia atrás y rememorar mis comienzos como diseñador web freelance.

Este rediseño de identidad visual y web surge de una relación con un colega diseñador que conocí hace algunos años…

Antes de comenzar

Primero me parece importante contar quien es el cliente y por qué ha decidido confiar en mí para realizar el completo rediseño de la identidad visual y sitio web de su negocio.

NOTA: Si estás pensando en rediseñar tu sitio web este artículo te puede interesar: Rediseñar tu sitio web ¿Cómo saber cuándo es el mejor momento?

Hace algunos años (creo que 5) conocí a Kevin a través de una plataforma de trabajo online de diseño.

Si bien, hoy en día no soy muy fanático de éstas,  cuando decidí volcarme 100% al mundo online y freelancer, estos mercados de diseño era lo único que conocía.

Tengo que reconocer que si bien he tenido momentos malos utilizando estas plataformas para conseguir trabajos como freelance del diseño, nunca me fue mal económicamente, aunque si espiritualmente.

No voy a entrar en este terreno pero si tomo nota para contar mi experiencia en otro artículo.

Retomando el tema principal de este artículo, cuando conocí a Kevin enseguida entablamos una muy buena relación. A ambos o nos unía una gran pasión: el diseño. Recuerdo que compartimos muchas charlas sobre cuál es el propósito del diseño.

Él es el director de una empresa de diseño web con base en las afueras de New York, Estados Unidos llamada: Pixel Wilderness.

Lo interesante de la empresa es que cuenta con varios colaborares o freelance que trabajan de manera remota en diferentes lugares del mundo.

Con el tiempo me volví parte de este equipo de trabajo. Para ser más específico, me encargaba de la parte de diseño de identidad visual y de diseño web. Esta experiencia fue genial y me permitió crecer mucho como profesional del diseño web.

Tener charlas y reuniones online, con personas de diferentes parte del mundo, es algo realmente fantástico.

Hoy en día, la empresa se especializa en diseño web en WordPress y aplicaciones web para bienes raíces y estudios de arquitectura.

Otro gran punto a favor de formar parte de este equipo fue la posibilidad de trabajar en el rediseño web de grandes empresas.

Además de la gran experiencia como diseñador web freelance,  presté mucha atención a cómo era el proceso de trabajo con los clientes, lo que me sirvió para poder replicarlo hoy en día con mis propios clientes.

También he aprendido mucho de ventas y marketing, ya que en la empresa se han vendido webs de hasta 10 mil dólares.

Luego de varios años con el mismo logotipo y sitio web, Kevin notó que era momento de un rediseño de identidad visual y un rediseño web que refleje el verdadero valor su negocio.

Así fue como me encargó el trabajo, con el objetivo de crear un diseño que sea muy visual, diferente a lo que hay en el mercado.

Un gran reto.

Parte #1: Objetivos

Luego de tener una videollamada con Kevin y el resto del equipo, llegamos a la conclusión que el rediseño, tanto de la identidad visual y del sitio web debería ser muy atractivo.

Además siendo una empresa que vende servicios de diseño web y aplicaciones, el portfolio tenía que brillar y destacarse.

Con respecto al rediseño de la identidad visual, el principal objetivo fue tener un logotipo que refleje el verdadero valor del negocio, que sea moderno y transmita más confianza en los clientes.

Al estar codo a codo con empresas grandes de Estados Unidos, éste debía ser elegante y serio sin dejar de ser amigable.

Con respecto al rediseño web el objetivo principal fue crear un portfolio que invite a los clientes a ver el proceso y la calidad de los trabajos.

Cómo segundo objetivo importante, nos propusimos aumentar la cantidad de presupuestos mensuales.

Otros objetivos secundarios:

  • Reducir la tasa de rebote de la Home Page
  • Aumentar el tráfico
  • Mejorar la experiencia de usuario de todo el sitio
  • Mantener una identidad en todo el sitio
  • Mejorar la versión responsive
  • Mejorar la conversión de presupuestos a través del sitio

NOTA: Para detectar falencias en el sitio web y crear un rediseño efectivo me sirvió mucho el Checklist definitivo para tener un sitio web que impulse las ventas.

Parte #2: Rediseño de la identidad visual

Este es el logotipo anterior:

 

La identidad visual anterior denota un pino grande y otro que forma parte de la letra D. Esto se debe a que Kevin vive en las afueras de NY en una zona de con muchos pinos. Esta es la razón de que el pino sea el símbolo e identificación principal de la marca.

Cómo punto de partida para el rediseño del logotipo, el pino debía mantenerse de alguna manera, pero más sutil.

Recuerdo que en una de las charlas con el equipo, Kevin me decía que el diseño del logotipo anterior estaba desactualizado y no transmitía la confianza suficiente en las reuniones con los clientes.

Qué importante es tener un logotipo impactante ¿no?

NOTA: Quizás te pueda interesar ¿Cómo diseñar un buen logotipo para tu negocio? Tips y consejos para tu identidad visual?

Para el proceso de rediseño de la identidad visual fue muy importante conectar con el lugar donde está ubicada la empresa.

Para ello miré muchas imágenes en internet de paisajes de la zona en diferentes épocas y tome nota de la paleta de colores que surgía de éstas.

Los que han trabajado conmigo saben que para mí el diseño tiene que ser simple y efectivo. Un logotipo que no es memorable creo que deja de cumplir su función.

En este caso mi objetivo fue simplificar el logotipo para que tome más fuerza.

Un punto importante que no nombré anteriormente es que tenía que haber un isotipo para que funcione separado del logotipo.  Con esto iban a poder utilizar su isotopo de manera separada en las redes sociales y presentaciones.

Ya con las ideas más ordenadas hice una lista de los errores que encontré en el isologo anterior y tome nota de posibles soluciones.

Detecté que era muy grotesco por lo que busqué utilizar trazos más finos y elegantes. Por otro lado, la tipografía tenía muchos errores de espaciado y tamaño. En general el logotipo no funcionaba bien y no era para nada memorable.

Este fue el resultado final del rediseño de la identidad visual:Luego de terminar el rediseño, como realizo con todos mis clientes del servicio Un logotipo impactante les envié un pequeño manual para que el resto del equipo pueda tener.

De esta manera ellos pueden contar con la paleta de colores y con la tipografía que iba a acompañar a la nueva identidad visual.

Con el nuevo logotipo, tipografía y paleta de colores, parte del equipo se encargó de actualizar las redes, plantillas y documentos de trabajo.

Yo me encargué de realizar las tarjetas personales con el nuevo diseño.

De esta manera podía mostrarles el camino que debía tomar la marca luego del rediseño.

Aquí una imagen de cómo se ven:

Parte #3: Rediseño Web

Este es la primera impresión de la página de inicio o homepage antes del rediseño:

Haz click para agrandar

 

Antes de comenzar con cualquier tipo de diseño web, es fundamental ver qué cosas funcionan y cuáles no.

Observé que el sitio anterior tenía muchos errores de diseño gráfico y  no convertía muy bien.

El porcentaje de rebote de la página de inicio era superior al 80%  y los presupuestos que llegaban eran escasos o de clientes que no eran los indicados.

Teniendo en cuenta los objetivos para con el rediseño del sitio web puse manos a la obra con las 3 fases:

Fase 1: Investigación

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

Fase 3: Diseño Web

Antes de pasar a analizar cada etapa les comparto una imagen en donde se puede comparar facilmente el antes y el después del rediseño web:

 

 

 

Fase 1: Investigación

Junto a Kevin, buscamos sitios que nos gustaban y tenían poder tanto en lo visual como en lo tecnológico.

Si bien hay muchos sitios de agencias de diseño y marketing, desde el comienzo buscamos diferenciarnos en la estructura del contenido, el atractivo visual y en la experiencia de usuario.

Lo primero que hice fue crear un sitemap o mapa de sitio para tener una panorama más claro de cómo quería que sea la navegación a través del sitio y que la experiencia de usuario sea óptima.

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

Una vez definido el Sitemap, pasé a crear el Wireframe, o mejor dicho la estructura del nuevo sitio web.

Trabajar con wireframe me permite estructurar de manera estratégica la información sin ningún condicionante visual. Esto equivale a los cimientos de una casa.

Al construir una casa, uno no empieza por el techo ni por pensar de que color va a ser la pared del baño. Para que el diseño web sea efectivo es fundamental tener una Wireframe o estructura básica de cómo querés que sea el sitio.

La estructura es la base de todo proyecto de diseño o rediseño web y es lo que permite que todo lo que luce bonito y atractivo tenga sentido y luzca más bonito y atractivo aún.

Tras varios feedback del equipo, el Wireframe estaba listo para ser revestido por el diseño.

Aquí les dejo una foto del Wireframe de la Home:

 

Haz click para agrandar

FASE 3: Diseño web

Ya con la estructura, sólo restaba la parte más divertida. Volcar el contenido, fotografías y todas las ideas de diseño.

Al estar trabajando durante cierto tiempo en el rediseño, ya estaba listo casi todo el contenido y en mi cabeza ya tenía varias ideas de cómo quería que el sitio luzca.

Contenido o copy

El copy o contenido ya estaba listo de antemano, por lo que también fue útil para estructurar previamente el Wireframe. De esto se encargó una compañera que forma parte del equipo de trabajo dentro de la empresa.

Fotografías

En la etapa de investigación, encontramos varias imágenes que nos gustaban. Armamos una especie de Moodboard o pizarrón con ellas para luego poder buscar fotos similares.

Lo bueno es que ya habíamos seleccionado parte del material que queríamos utilizar por lo que lo único que hice fue buscar fotos en un banco de imágenes, inspirándome en el moodboard.

En las fotos del equipo, un diseñar gráfico se encargo de realizar unos efectos muy buenos sobre la foto de cada uno, continuando con la misma línea de diseño que veníamos trabajando.

Aquí adjunto una mía 🙂  :

 


Tipografía

Desde el rediseño de la identidad visual tenía bien en claro que tipografías quería utilizar en el nuevo sitio web.

Contar con una cuenta en Typekit.com me permite tener acceso a muchas fuentes que no están en Google Fonts. Por eso fue que decidí comenzar por esa plataforma.

De esta manera fue que seleccioné Fira Sans para los títulos y Serenity para los párrafos.

Colores

La paleta de colores ya estaba definida, por lo que solamente restaba comenzar a jugar con ella de manera elegante y simple.

Diseño Gráfico

Kevin me había pedido que busque la manera de que el sitio web conecté con el cliente ideal: Empresas de arquitectura y Real Estate (Bienes Raíces).

Es por eso que como toque diferencial utilicé bosquejos de arquitectura sobre algunos fondos para que rediseño web esté a la altura de lo que buscaba el negocio.

Como plus se me ocurrió utilizar unos efectos de conectividad que transmite la parte tecnológica que hay detrás de cada sitio realizado a medida.

Comparación de la 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 montada en diferentes dispositivos:

Haz click para agrandar

 

Haz click para agrandar

 

Aquí puedes ver el sitio finalizado:

VER EL SITIO COMPLETO

 

Datos y Estadísticas

El sitio web no lleva un año desde su lanzamiento, pero el tráfico a aumentado casi al doble y la solicitud de presupuestos aumentó en un 150%.

El sitio se lanzó el Septiembre y en la siguiente imagen se puede ver cómo aumentó el tráfico considerablemente:

 

Tráfico

En comparación con el año anterior, el tráfico fue más del doble.

En azul pueden ver el el tráfico desde Septiembre para aquí y en naranja se aprecia la misma época pero un año anterior antes del rediseño web.

 

Estadísticas Generales

En el siguiente gráfico se puede apreciar que el tráfico aumentó en un 182,64% y la tasa de rebote se redujo en un 8,86% que era uno de los grandes objetivos.

Por otro lado se redujo el tiempo de permanencia en la home ya que las personas pasan directo al portfolio y a la solicitud de presupuesto, por lo que es algo muy positivo.

 

Conclusión

Las estadísticas muestran que el rediseño de identidad visual y del sitio web fue muy efectivo.

En cuanto al público y comentarios, he recibido muy buen feedback, ya que el nuevo diseño es muy atractivo e impactante. Una de las cosas que mas ha gustado fue la navegación y la experiencia de usuario. Pueden ver el trabajo final en mi portfolio.

Espero que este caso de estudio sirva para demostrar cómo el diseño y la estrategia pueden potenciar los emprendimientos y negocios.

En lo personal fue una gran experiencia de trabajo y aprendizaje.

Aquí puedes ver el sitio finalizado:

 

VER EL SITIO COMPLETO

 

¿Qué les parece el rediseño de la identidad visual y del sitio web? 

Espero sus comentarios

¡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 Pixel Wilderness”

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.