El rediseño de mi sitio web de bajo costo que aumentó las tasas de conversión en un 42% en 7 semanas
Publicado: 2021-08-19Hacer un rediseño completo del sitio web de mi tienda en línea ha estado en mi lista de "cosas por hacer" durante mucho tiempo, pero no pude apretar el gatillo porque nunca fue una prioridad.
Aquí está la cosa. Mi tasa de conversión siempre ha sido bastante buena (> 3%). Y mi tienda en línea ha crecido en dos dígitos cada año, así que, ¿por qué mover el barco?
Pero luego asistí a una reunión de mentes maestras hace 3 meses con un grupo de otros veteranos del comercio electrónico y decidí mencionar esto durante mi turno en el "asiento caliente".
Hola a todos. Estoy pensando en hacer un rediseño del sitio, pero mi tasa de conversión actual sigue siendo bastante buena. ¿Necesito actualizarlo ahora mismo? ¿Y crees que es lo suficientemente malo como para que tenga que arreglarlo hoy? ¿Puedo posponerlo un año más?
Las respuestas que recibí fueron terriblemente dolorosas de escuchar.
- Este sitio web parece que fue diseñado en los años 90. Si hiciera un rediseño, apuesto a que podría obtener un aumento del 50% en la tasa de conversión. - Mike Jackness
- ¿Ejecutas un curso? No tomaría tu clase si viera esto. - Kevin Stecko
- Estos son los tipos de sitios que me gusta comprar , arreglar y luego revender con una ganancia. - Dana Jaunzemis
Escuchar estos comentarios realmente hirió mi orgullo e hice todo lo posible por no ponerme a la defensiva.
Pero tan pronto como regresé de la mente maestra, inmediatamente me comuniqué con mi diseñador, preparé una maqueta rápida en Photoshop y comencé a trabajar con ella .
Mi proceso de implementación fue bastante sencillo. Revisé y hojeé todas y cada una de las páginas, las expuse "aproximadamente" como quería que se viera y le pedí a mi diseñador que recogiera las piezas para que "se viera mejor".
Hice un presupuesto de aproximadamente 6 semanas para completar el rediseño y contribuí con aproximadamente 40 horas de mi propio tiempo. Cada una de las páginas del sitio fue completamente rehecha.
En general, el proyecto terminó tomando 7 semanas debido a circunstancias imprevistas con la compatibilidad del navegador (¡te odio IE!) Y me costó $ 1840 .
Nota del editor: aquí hay un enlace a mi nuevo sitio y puede usar la máquina wayback para ver la versión anterior.
Obtenga mi mini curso gratuito sobre cómo iniciar una tienda de comercio electrónico exitosa
Si está interesado en iniciar un negocio de comercio electrónico, reuní un paquete completo de recursos que lo ayudarán a lanzar su propia tienda en línea desde cero. ¡Asegúrate de agarrarlo antes de irte!
Resultados del rediseño de mi sitio web
Los siguientes resultados de conversión son para dispositivos móviles, computadoras de escritorio y tabletas para el tráfico de CPC de Google únicamente .
Debido a que mi sitio recibe una gran cantidad de tráfico de páginas de contenido que no necesariamente se convierten en ventas, ejecutar los números para el tráfico de anuncios de ppc dirigido tenía más sentido para fines de comparación.
- Las tasas de conversión de escritorio aumentaron en un 46% ¡Actualizado!
- Las tasas de conversión móviles aumentaron en un 21% ¡Actualizado!
- Las tasas de conversión de tabletas aumentaron en un 25% ¡Actualizado!
Nota: Los datos de mi tasa de conversión se compararon exactamente con el mismo período del año anterior para eliminar variables como la estacionalidad y las fluctuaciones en la demanda.
Dicho esto, la única forma verdadera de medir las diferencias en la tasa de conversión es realizar una prueba dividida de los diseños, lo que no hice en aras del tiempo.
En primer lugar, el aumento en la tasa de conversión de escritorio realmente me sorprendió, ya que no esperaba un salto tan grande. Sabía que mi antiguo sitio necesitaba trabajo, ¡pero no tanto!
( Actualización: después de unos meses de más datos, el aumento de la tasa de conversión para computadoras de escritorio es del 46%)
Para los clientes de tabletas, el aumento de la tasa de conversión fue en realidad superior al 15% porque encontré un error importante en la implementación de la tableta unas semanas después del lanzamiento que se mezcló con los resultados.
( Actualización: después de unos meses de más datos, el aumento de la tasa de conversión para tabletas es del 25%).
Y para dispositivos móviles, ya había implementado un sitio móvil bastante decente en 2013, por lo que no esperaba grandes saltos, pero el 12% sigue siendo bastante bueno.
( Actualización: después de unos meses de más datos, el aumento de la tasa de conversión para dispositivos móviles es del 21%).
En cualquier caso, a pesar del aumento en la tasa de conversión, no todos los datos fueron optimistas. Por alguna razón, mis métricas en el sitio, como la tasa de rebote, han aumentado aproximadamente un 10% en todos los ámbitos.
Nota del editor: en este momento, sospecho que se debe a que eliminé la navegación de la izquierda del sitio, pero tendré que examinar los datos para averiguar exactamente por qué está sucediendo. ¡Actualizar! Dejé de admitir varias versiones del navegador en este rediseño que contribuyó a este problema.
¿Qué carrito de compras estoy usando?
La pregunta más común que siempre me hacen con cada rediseño es ...
Steve, ¿qué carrito de compras es este? ¿Es Shopify? ¿O es Bigcommerce?
Y cuando les digo a todos que todavía estoy usando mi carrito de compras de código abierto de la vieja escuela muy modificado , generalmente se sorprenden.
Aquí está la cosa…
El carrito de compras que elija no tiene nada que ver con la apariencia de su carrito de compras ni con la apariencia de su sitio web. El propósito principal de su carrito de compras es manejar y procesar transacciones.
Si su carrito de compras tiene todas las funciones de backend que necesita, no es necesario que cambie . La estética de su sitio web tiene muy poco que ver con el motor del carrito de compras.
Entonces, incluso si tiene un carrito de compras que es antiguo como el mío, siempre que tenga todas las funciones que necesita, no debe juzgarlo por su apariencia, porque siempre puede cambiar su apariencia.
La mejor parte es que si está en una plataforma de código abierto, puede agregar sus propias funciones cuando lo desee porque tiene el control total.
Por ejemplo, para el rediseño de este sitio, implementé esta pequeña e ingeniosa función de prueba social para mi tienda. Básicamente, cada 5-15 segundos, aparece una pequeña ventana en la esquina inferior izquierda que muestra una compra anterior realizada en el sitio.
En Shopify, puedes comprar un complemento para hacer exactamente lo mismo y pagar $ 15 al mes. Pero me tomó aproximadamente 5 horas (realmente debería haber tomado 2 horas, pero mi codificación estaba oxidada) para bombear lo mismo sin tarifas recurrentes .
De todos modos, estas son solo algunas de las ventajas de poseer el código fuente. Si tiene inclinaciones técnicas, le recomiendo que pruebe el código abierto.
Pero si no tiene ni idea sobre el diseño web y no quiere tener que lidiar con nada técnico, elija un Shopify o un BigCommerce.
Cambiar el esquema de color
Una de las mayores quejas sobre mi sitio desde una perspectiva estética fue la combinación de colores. El sitio antiguo era morado y amarillo y la paleta de colores que elegí hizo que el sitio pareciera anticuado .
Nota del editor: aquí hay un enlace a mi nuevo sitio y puede usar la máquina wayback para ver la versión anterior.
Lo irónico es que en mi curso Crear una tienda en línea rentable, en realidad doy lecciones sobre teoría del color, pero no tenía este conocimiento en 2013, por lo que nunca tuve la oportunidad de ponerlo en práctica .
De todos modos, en pocas palabras, utilicé un sitio llamado color.adobe.com para elegir colores complementarios para mi nuevo diseño. Y para refrescar la apariencia, elegí verde azulado, rosa fuerte y amarillo.
¿Por qué 3 colores? Es porque quería un color específico asociado con "actuar". Quería un color específico para "llamar la atención". Y finalmente, quería un color general brillante para que el sitio se sintiera “joven y moderno”.
El verde azulado es mi color de fondo. El amarillo es mi color de "atención" si tengo alguna oferta especial, y el rosa fuerte se usa para cada botón de acción en el sitio porque se destaca y aparece.
Cada página de mi sitio está diseñada para tener un objetivo singular.
Para la portada, quiero que la gente explore nuestra colección personalizada porque es la sección con los márgenes más altos. En las páginas de categorías, quiero que la gente haga clic en un producto. Y en la página de un producto, quiero que la gente haga clic en "Agregar al carrito".
Los 3 pilares de la conversión
Un gran error que veo que la gente comete al diseñar sus propios sitios web es que intentan copiar Amazon.com . Amazon es la plataforma de comercio electrónico más grande del planeta, así que ¿por qué no modelaría mi sitio según el de ellos?
En primer lugar, el diseño del sitio web de Amazon es feo, genérico y no es adecuado para la mayoría de las tiendas en línea de nicho . La razón por la que Amazon puede salirse con la suya con un sitio web feo es porque todos saben quiénes son, están acostumbrados a la interfaz y ya confían en Amazon.
Pero cuando tienes tu propio sitio web, tienes que establecer esa confianza desde cero porque nadie sabe quién eres.
En general, hay tres cosas principales que son cruciales para cualquiera que acceda a su sitio por primera vez.
Primero, debe informar a la gente que ofrece envío gratuito. Algún tipo de oferta de envío gratuito ahora es normal gracias a Amazon y las otras grandes tiendas de comercio electrónico.
Dos, debido a que usted es una entidad desconocida, desea asegurarles a los clientes que pueden devolver su mercancía si no están satisfechos.
Y finalmente, lo tercero que debes establecer con un nuevo cliente es la confianza, que es quizás el factor más importante de todos.
Si un cliente llega a su sitio y no confía en su tienda porque nunca ha oído hablar de usted, simplemente lo recogerá y se irá.
Para mi rediseño, hago valer la confianza de muchas formas diferentes.
En el encabezado de cada página, hago hincapié en el envío gratuito, las devoluciones sin complicaciones y mi número de teléfono. ¡Tener un número de teléfono a la vista es MUY IMPORTANTE!
Siempre que compro online en una nueva boutique, lo primero que hago es hacer clic en la página de contacto y buscar un número de teléfono y una dirección . Y si no se muestra ninguno de esos artículos o si solo uno de los dos está presente, no compraré allí.
Los clientes quieren la posibilidad de ponerse en contacto con una tienda en caso de que algo salga mal con su compra. Y como resultado, desea que esta información sea lo más visible posible en cada página, incluido el horario de atención.
Tener un "horario oficial de la tienda" también hace que su tienda parezca más profesional porque parece un negocio establecido con un horario de oficina "real".
Prueba social y confianza
Hacia la parte inferior de cada página, tengo una sección dedicada a la prueba social que le da credibilidad a mi sitio.
Después de todo, hemos aparecido en un montón de revistas diferentes y hemos estado en el programa Today, así que, ¿cuál es el punto si no nos jactamos de ello?
Nuestra sección de pruebas sociales / menciones de prensa se encuentra en cada página del sitio, por lo que incluso si no la ve la primera vez, eventualmente lo notará.
También le pedí a un grupo de nuestros clientes su foto y un testimonio que se muestra justo debajo de la sección de prensa.
Estos son clientes reales que compraron en nuestro sitio, estaban muy contentos con su compra y estaban dispuestos a dejarnos un testimonio muy agradable.
Un cliente en particular, Sherri, ha comprado más de ciento cincuenta veces en nuestro sitio porque realmente le gustan nuestros pañuelos.
Y finalmente, he incluido algunas palabras que tranquilizan al cliente de que su satisfacción es nuestra principal preocupación. Nunca dejamos que un cliente se vaya descontento. Y si algo sale mal, proporcionamos reembolsos completos.
Cambiar la navegación
El rediseño de la navegación para mi nuevo sitio fue un área en la que tuve problemas. En primer lugar, soy un ENORME fanático de la navegación del lado izquierdo . Mi antiguo diseño lo tenía ya mis clientes les encantó porque el menú siempre estaba visible y accesible.
El lado izquierdo de una página web también es donde su ojo gravita naturalmente y es el lugar más obvio para comenzar a comprar.
Pero aquí estaba mi dilema ...
Si tuviera que incluir una columna dedicada a la izquierda para la navegación, todo lo demás en el sitio tendría que reducirse.
Por ejemplo, todas las imágenes de mis productos deberían reducirse significativamente, lo que afectaría negativamente a las conversiones .
Las imágenes de mi categoría serían más pequeñas, lo que reduciría el CTR .
La verborrea en cada página ocuparía más espacio en la pantalla, lo que empujaría los productos hacia abajo en la página .
Entonces, en última instancia, opté por un menú desplegable de nivel superior, estilo flotante . La belleza de una barra de navegación de nivel superior es que se comporta de manera similar a una barra de navegación de la izquierda, pero no ocupa la misma cantidad de espacio en la pantalla.
Y al mover la navegación a la parte superior, pude aumentar las imágenes de mi categoría y producto en un 300%, lo que las hizo realmente destacadas.
La otra ventaja de utilizar la navegación de nivel superior fue la capacidad de separar distintas categorías de una manera muy limpia.
Por ejemplo, ahora tengo un menú desplegable de categoría "Comprar por ocasión", mientras que en mi diseño anterior, esta sección se mezcló con el resto del menú de la izquierda, por lo que no se destacó.
También agregué una sección especial dedicada a productos personalizados, más vendidos, recién llegados, una página de preguntas frecuentes, una página de contacto, la página acerca de, ver carrito y pagar.
Básicamente, todos los elementos de navegación más importantes están ahora en la barra principal para que todos los vean.
Enfatizando mi propuesta de valor única
Un principio importante que enseño en mi curso de comercio electrónico es que cada página de destino de su sitio debe tener una propuesta de valor única y sólida .
¿Por qué debería alguien comprar en tu tienda? ¿Por qué debería comprar aquí en lugar de comprar en un competidor? La respuesta debería ser clara de inmediato.
Entonces, para este diseño, elegí enfatizar nuestras fortalezas al frente y al centro en cada página de nuestro sitio.
Por ejemplo, en la página principal, nuestra propuesta de valor está justo dentro de la imagen de bienvenida.
En nuestras páginas de categorías, implementé un cuadro de texto especial para transmitir por qué nuestra tienda es especial.
El objetivo final es convencer a un cliente en los primeros 5 segundos de por qué debería comprarle a usted y no a la competencia.
Embellecimiento de las páginas del producto
Una de las conclusiones más importantes de la crítica de mi sitio fue que las páginas de mis productos no estaban a la altura .
Aquí hay una página de producto del diseño anterior.
Aquí está la misma página que se ve en mi nuevo sitio.
¿Notas alguna diferencia? En primer lugar, debido a que eliminé la barra lateral izquierda, pude aumentar el tamaño de la imagen del producto en un 266% .
No solo la imagen principal es mucho más grande, sino que también reorganicé los elementos de la página del producto para fomentar más clics en "Agregar al carrito".
Por ejemplo, justo al lado del botón "Agregar al carrito" hay cuadros de texto que aseguran al cliente de envío gratis y devoluciones sin complicaciones.
También hay un enlace en la parte superior que le dice dinámicamente al cliente cuándo recibirán su pedido, dependiendo de si eligen estándar o expreso, y todas las tarifas de envío relacionadas involucradas.
También superpuse los botones de Pinterest y Facebook directamente en la imagen en sí para fomentar el intercambio después de notar que la mayoría de los visitantes ni siquiera miraban los botones dedicados para compartir en mi antiguo sitio.
Una cosa que es interesante notar es que originalmente tenía dos enormes botones azul y rojo para compartir en Facebook y Pinterest justo debajo de la imagen como se muestra a continuación.
Pero finalmente decidí eliminarlos porque se destacaban más que el botón rosa "Agregar al carrito". Al final, valoro una acción de "Agregar al carrito" mucho más que una acción en las redes sociales.
Finalmente, también aumenté el tamaño de la sección de venta cruzada para atraer al cliente a comprar artículos similares.
Mejora de Checkout
Mejorar el proceso de pago no era una gran prioridad para mí porque no había ningún problema grave con el sitio anterior. Pero como ya tenía el capó abierto, decidí solucionar algunos problemas pendientes que han estado persistiendo en mi sitio durante bastante tiempo.
En primer lugar, de vez en cuando recibíamos llamadas de personas que estaban confundidas y se preguntaban si necesitaban una cuenta para comprar en nuestro sitio. Así es como se veía la primera página de pago en nuestro sitio anterior.
La solución a este problema fue ocultar el inicio de sesión de forma predeterminada y solo mostrar dos botones de color rosa para el pago.
También hice que los logotipos de confianza fueran más prominentes para asegurarle al cliente que el proceso de pago es seguro y que su satisfacción está garantizada.
El otro cambio importante fue que hice que la compra fuera completamente receptiva .
Nota: Si estás en Shopify, probablemente ya hayas visto cómo se ve un proceso de pago receptivo y atractivo.
Entonces, en lugar de reinventar la rueda, básicamente emulé el diseño de pago de Shopify porque es bastante impresionante.
En pocas palabras, así es como se ve mi pago ahora en diferentes tamaños de pantalla.
Para escritorio…
Para tableta y móvil
Algunas palabras sobre el móvil
Durante el último rediseño de mi sitio en 2013, implementé un sitio web móvil completamente separado del sitio de escritorio que vivía en un subdominio diferente.
Y aunque todavía creo que fue la decisión correcta en ese momento, definitivamente no es el caso hoy. Hoy en día, existen muchos marcos como BootStrap que hacen que el diseño receptivo sea mucho más fácil.
En los últimos años, ha sido un gran dolor de cabeza mantener sincronizados mis sitios móviles y de escritorio, así que estoy feliz de tener ahora un único sitio unificado en todas las plataformas.
La principal desventaja de ser receptivo fue que tuve que probar minuciosamente el sitio en 3 plataformas completamente diferentes : escritorio, tableta y dispositivo móvil. Y dentro de cada plataforma había varias versiones de navegador y resoluciones de pantalla con las que lidiar.
Por ejemplo, tuve que probar IE 8, 9, 10 y 11 para máquinas con Windows. Tuve que probar Safari 6,7 y 8 para Mac.
Al final, revisé mi cuenta de Google Analytics para realizar pruebas de usabilidad para todos y cada uno de los navegadores que se han utilizado en mi sitio durante el año pasado utilizando una herramienta llamada Browser Stack.
No hace falta decir que este proceso fue una mierda y fue mi parte menos favorita del rediseño :(
De todos modos, aquí hay algunos aspectos destacados sobre el nuevo diseño móvil. La mayoría de estas líneas de pedido son bastante estándar, por lo que no lo aburriré con demasiados detalles.
En tabletas y dispositivos móviles, cambié el menú para que se contraiga a un único menú desplegable.
Basándome en mi sitio móvil anterior, descubrí que todo el mundo tiende a ir directamente a la barra de búsqueda, así que me aseguré de incluir la barra de búsqueda al frente y al centro en cada página del sitio móvil.
Debido a que el espacio de la pantalla es mucho más pequeño en un teléfono, eliminé ciertos elementos "no esenciales" de la página para tamaños de pantalla más pequeños.
Cambios en Pinterest
El cambio final que hice fue renovar completamente mis páginas de contenido. Como mencioné muchas veces en el pasado, utilizo nuestras páginas de arte y manualidades para canalizar a las personas a nuestra tienda en línea. Y Pinterest es una gran fuente de tráfico para estas páginas.
Como resultado, rehice por completo la mayoría de las imágenes de manualidades e hice versiones especiales altas y delgadas solo para Pinterest . También hice nuevas imágenes para las fotos de nuestros productos.
Por ejemplo, en lugar de usar una imagen rectangular para Pinterest cuando haces clic en el botón "pin", ahora obtienes una versión alta y delgada de alta resolución.
Conclusión
En total, 7 semanas y $ 1840 es una inversión bastante buena para las ganancias que estoy experimentando ahora. Mi principal problema en este momento es que tengo demasiados proyectos en marcha simultáneamente y no tengo suficiente tiempo para trabajar en cada uno.
Pero aquí está la cosa ...
Aunque mi tasa de conversión era buena antes, el aumento neto en las ventas debido a una tasa de conversión aún mejor probablemente superará los otros esfuerzos de creación de tráfico que había planeado implementar este año.
Y si hay una lección que aprender aquí, es que aumentar la tasa de conversión de su sitio aumentará las ventas en todas sus otras fuentes de tráfico .
La base de su negocio de comercio electrónico comienza con su plataforma y es importante tener todos sus patos en su lugar ANTES de concentrarse en generar tráfico.