Román UX
Enviar Whatsapp Román Saavedra

Rediseño de sitio web incrementa las ventas 40%

Caso de estudio UX

En este proyecto explico como ayudé a una pyme a incrementar sus ventas mejorando la experiencia de usuario al rediseñar su sitio web y aumentando el número de clientes con Google Ads.

5 min
Historias Breves de México, sitio web.
ícono flecha

Background

Problema

Red de servicio gas control es una pyme que brinda servicios de reparación a productos de línea blanca, la compañía desde hace más de 20 años se anunciaba en Sección Amarilla, sin embargo con el auge de la tecnología digital al pasar de los años sus ventas disminuyeron. Aún con los esfuerzos de Sección Amarilla en su sitio web, las ventas nunca fueron como lo fueron hace una década.

Objetivo

Impulsar las ventas a través de su sitio web

¿Cómo?

Mejorando la experiencia de usuario de su sitio web y creando estrategias de marketing con Google Ads.

Reduciendo las preocupaciones de los usuarios, incentivarlos a agendar una cita.

Resultado

  • La compañía incrementó sus ventas un 40%
  • La experiencia en el sitio mejoró en cuánto a contenido, velocidad y SEO.
  • EL posicionamiento en Google del sitio web progresó de la página 7 a la página 1 con la palabra clave "reparación de estufas".
  • Reducción en el costo por conversión.

Cliente

  • Red de Servicio MX

Proceso

  • Benchmark
  • Ux Research
  • Rediseño Web
  • A/B Testing
  • Iteraciones

Softwares

  • Adobe XD
  • Google ADS
  • Google Analytcs
  • Optimize
  • Tag Manager
  • HTML | CSS | JS

Mi Colaboración

  • Ux Researcher
  • Ux Designer
  • Google Ads Manager

Antecedentes

A cambio de una cuota mensual Sección Amarilla le permitía a la empresa Red de Servicio Gas Control anunciarse en su directorio de servicios web, de esta manera el anuncio aparecía en una página web de manera orgánica en el buscador de Google.

Este era la página web que tenían alojada dentro del sitio web de Sección Amarilla:

Página web Rede de Serivcio Gas control por sección amarilla 2017
Página web de Red de Servicio Gascontrol. Así lucía la página web alojada en el sitio web de sección amarilla en el año 2016.

La página web presentaba los siguientes inconvenientes:

  • Los usuarios no sabían por dónde iniciar a leer o qué ver, debido a que los textos e imágenes competían entre sí.
  • La página contenía “Llamadas a la acción” poco visibles y mal ubicadas.
  • El diseño por su apariencia no enviaba el mensaje de ser un servicio de calidad y confiable.
  • El nombre y logo de la marca confundía a los usuarios, en ocasiones recibía llamadas de personas que buscaban reparar fugas de gas en general, algo que no era un servicio de la empresa.

Benchmark

Actualmente no hay ninguna marca de reparación que esté posicionada en la mente de las personas, así que tomé de referencia a las empresas que se estuvieran anunciando sus servicios de reparación de estufas, hornos y calentadores en Google en las zonas que se brindaría el servicio.

Analizando competencia en Google

De acuerdo a Google ads, estas fueron las empresas que tenían los mejores ranking en google ads de aquel entonces (2017).

Todos los competidores tenían un estilo similar para anunciarse, así que pensé que teníamos oportunidad de destacar de la competencia.

Competencia en Google

Ux Research

Proto personas

Proto Persona Ejemplo
Proto Persona Ejemplo 2

Experience Map

Experience map

Entrevista al personal de ventas

Entrevistando al personal de ventas pude conseguir algunos insights acerca de las dudas y preocupaciones más comunes de los usuarios antes de contratar el servicio.

Las principales dudas de los clientes fueron las siguientes:

  • Saber los precios por el servicio
  • Disponibilidad del servicio en su domicilio
  • Saber los días y horarios en que brindan servicio
  • Tiempo estimado del servicio de reparación
  • Saber si dan servicio a una marca específica

Entrevistas a usuarios

  • El 70% de los encuestados eligió la velocidad como lo más importante para contrtar el servicio.
  • El 80% de los usuarios cotiza con 2 opciones más antes de llamar

Wireframes

Wireframes baja fidelidad

Con los resultados de la investigación y bocetando algunos wireframes pude obtener mejores ideas de cómo organizar la información para los usuarios, el objetivo es informar y eliminar las dudas de los usuarios que presentan antes de contratar el servicio, así como transmitirles confianza para contactar a la compañía.

Mobile Wireframes

Rediseño del estilo visual de la marca

Aunque la marca no buscaba un rediseño de su logotipo, decidí que era necesario hacer una actualización a su imagen corporativa y establecer una imagen visual diferenciadora de la competencia, cada detalle es importante para ganarnos la credibilidad y confianza del usuario.

Rediseño de logotipo

Rediseño de logo ejemplo
Rediseñé el logotipo de la marca. Aunque la compañía no estaba buscando rediseñar su logotipo, decidí darle un actualización para facilitar la lectura y mejorar el aspecto visual de la marca.

Referencia de colores

Paleta de colores Red Servicio Gas Control
Colores inspirados en la flama que producen las estufas. Establecí los colores de la marca retomando los colores principales del logotipo, y tomando de referencia los colores del fuego que produce una estufa.

Colores y tipografías para el sitio web

Colores para el sitio web
Tipografías para el sitio web

Diseño de landing page

Publicidad con Google Ads

Obetivos de las campañas

  • Incrementar tráfico al sitio web.
  • Conseguir llamadas, whatsapps, mensajes. (conseguir visitas técnicas)
  • Descubrir cuáles anuncios funcionan mejor y optimizarlos
  • Conocer los costos y rendimiento de las palabras clave
  • Encontrar oportunidades de mejora en el sitio web
  • Descubrir nuevas palabras clave y palabras negativas

Desarrollé 3 campañas de sus 3 principales servicios de la compañía:

  • Servicio de reparación para estufas
  • Servicio de reparación para hornos
  • Servicio de reparación para calentadores

Así los usuarios que hagan una búsqueda en google de alguno de estos servicios, llegará directo a nuestras páginas de aterrizaje del servicio que buscan, con esto ayudamos al usuario a evitar perder su tiempo en buscar entre los servicios del sitio.

Evitamos poner distracciones de otros servicios que no está buscando, y se enfoqué en lo que sí necesita.

Al administrar cada campaña por separado me ayudaría a obtener mejores métricas de cada servicio, esto me será de gran utilidad para tomar mejores decisiones al optimizar los anuncios de la campaña y a mejorar las páginas de aterrizaje de cada servicio.

Investigué cuáles eran las mejores palabras clave para cada campaña, posteriormente las agrupé por similitud y diseñé 2 anuncios por cada grupo de anuncios, para hacer A/b testing de los anuncios y descubrir cuáles funcionan mejor.

Iteraciones

Durante varios meses hice iteraciones en el diseño del sitio web, a continuación explico cuáles han sido las más importantes y como lucía antes y a que resultado llegué con las iteraciones.

Ux writing y SEO

Estuve experimentando con varios títulos en la página principal del sitio haciendo un balance entre la experiencia usuario y el posicionamiento SEO. El objetivo era posicionar la palabra clave “reparación de estufas” ya que era la frase clave con mayor número de conversiones y de mayor tráfico.

Ux writing
Título principal del sitio web. Estas son las iteraciones del título principal del sitio web (H1).

Botones más visibles y consistentes

Al comienzo del proyecto utilicé una plantilla en wordpress para diseñar el sitio por lo que mi diseño estaba limitado, sin embargo posteriormente pude pasar el sitio a código (HTML, CSS y JS), mejorando el aspecto visual y su velocidad.

Rediseñé los botones con un color más visible para el usuario y diseñé componentes para mantener una consistencia visual en el sitio.

Mejoré las llamadas a la acción con A/B testing

Con el tráfico del sitio obtenido por los anuncios en Google pude realizar A/B testing con las llamadas a la acción de las páginas de aterrizaje, al día de hoy sigo haciendo pruebas con la herramienta Google Optimize.

A/b testing CTA
Diseño móvil antesy después
El 80% de las conversiones proviene de los teléfonos. Con una llamada a la acción visible y el botón cerca al usuario se mejoraron las conversiones en llamadas.

Formulario de Contacto

Aunque únicamente el 10% de las conversiones proviene de los formularios, decidí mejorarlo; ajuste el diseño del formulario para que pudiera apreciarse completo en la pantalla del teléfono, agregué una llamada a la acción y mejoré la experiencia de usuario dando feedback inmediato al usuario al llenar u omitir cada campo del formulario.

Formulario antes y después
Mejoré el formulario dando feedback al usuario. En tiempo inmediato el usuario recibía feedback positivo o negativo de cada campo del formulario.

Eliminé las imágenes y contenido no relevante para facilitar la lectura

Las imágenes que había colocado en el sitio eran de licencia libre y otros sitios o nueva competencia las usan, es por eso qeu decidí quitarlas haciendo que la información sea más legible y hacer más visbles las llamadas a la acción.

Resideño Web

Mejoré la velocidad de carga del sitio web migrando de wordpress a código.

Desarrollé el sitio de cero con HTML, CSS y Javascript con el propósito de mejorar la velocidad del sitio y tener más libertad en el diseño.

La velocidad del sitio ayudó a mejorar la experiencia de usuario y a mejorar el posicionamiento SEO del sitio web. Obtuve una puntuación de 93/100 en versión en móvil y 99/100 en ordenador, información obtenida de google speed insight.

Velocidad de carga

Posicionamiento en Google

Después de algunos meses pude mejorar el posicionamiento orgánico del sitio, pasando de la página 7 a estar en la página 1 de Google entre los primeros lugares con la palabra clave “reparación de estufas”.

SEO google
El sitio está posicionado 3 veces de manera orgánica en la primer página de Google. El primer anuncio es de Google maps, los otros anuncios son del sitio en diferentes dominios.

Resultados

  • La compañía incrementó sus ventas un 40%
  • La experiencia en el sitio mejoró en cuánto a contenido, velocidad y SEO.
  • EL posicionamiento en Google del sitio web progresó de la página 7 a la página 1 con la palabra clave "reparación de estufas".
  • Reducción en el costo por conversión de hasta 50%

Conclusión

En este caso de estudio quise demostrar que la experiencia de usuario puede ser implementada a cualquier proyecto, no importa sí es pequeño o si ya lleva tiempo de su lanzamiento, siempre hay algo que se puede mejorar.