Estás leyendo la publicación: Rediseño de mi sitio web de bajo costo que aumentó las tasas de conversión en un 42% en 7 semanas
Hacer 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 podía obligarme a 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 online ha sido creciendo a dos dígitos cada año Entonces, ¿por qué sacudir el bote?
Pero luego asistí a una reunión de expertos hace 3 meses con un grupo de otros veteranos del comercio electrónico y decidí mencionar esto durante mi turno en el “asiento”.
Las respuestas que recibí fueron insoportablemente dolorosas de escuchar.
- Este sitio web parece haber sido 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
- ¿Haces 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 mi mejor esfuerzo para no estar a la defensiva.
Pero tan pronto como regresé de la mente maestra, contacté de inmediato a mi diseñador, preparé una maqueta rápida en Photoshop y empezó a darle vueltas.
Mi proceso para la implementación fue bastante sencillo. Revisé y revisé todas y cada una de las páginas yo mismo, lo diseñé “aproximadamente” como quería que se viera e hice que mi diseñador recogiera las piezas para que “se viera mejor”.
presupuesté sobre 6 semanas para hacer el rediseño conmigo contribuyendo sobre 40 horas de mi propio tiempo. Cada página del sitio se rehizo por completo.
En general, el proyecto terminó tomando 7 semanas. debido a circunstancias imprevistas con la compatibilidad del navegador (¡Te odio, IE!) y me costo $1840.
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, preparé un paquete integral de recursos eso te ayudara lanza tu propia tienda en línea desde cero completo. ¡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 Solo tráfico de CPC de Google.
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 tiene más sentido para fines de comparación.
- Conversión de escritorio tasas aumentaron un 46% ¡Actualizado!
- conversión móvil las tasas aumentaron un 21% ¡Actualizado!
- Conversión de tabletas tasas aumentaron un 25% ¡Actualizado!
Dicho esto, la única forma verdadera de medir las diferencias en la tasa de conversión es hacer una prueba dividida de los diseños, lo que no hice por cuestiones de 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!
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 pocas semanas después del lanzamiento, que se mezclaron con los resultados.
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.
En cualquier caso, a pesar del aumento en la tasa de conversión, no todos los datos fueron color de rosa. Por alguna razón, mis métricas en el sitio como la tasa de rebote ha aumentado aproximadamente un 10% en todos los ámbitos.
¿Qué carrito de compras estoy usando?
La pregunta más común que siempre me hacen con cada rediseño es…
Y cuando les digo a todos que Todavía estoy usando mi carrito de compras de código abierto de la vieja escuela muy modificadopor lo general 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., o 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 back-end que necesita, entonces no necesariamente necesitas cambiar. 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 tan viejo 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ás en una plataforma de código abierto, puedes agregar tus propias funciones cuando quieras porque tienes 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 con sin cargos recurrentes.
De todos modos, estas son solo algunas de las ventajas de poseer el código fuente. Si tiene una inclinación técnica, le recomiendo que pruebe el código abierto.
Pero si no tienes ni idea sobre el diseño web y no quieres tener que lidiar con nada técnico, entonces elige Shopify o 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 anterior era morado y amarillo y la paleta de colores que elegí. hizo que el sitio pareciera anticuado.
Lo irónico es que en mi curso Crear una tienda en línea rentable, enseño lecciones sobre la teoría del color, pero no tenía este conocimiento en 2013, así que Nunca tuve la oportunidad de ponerlo en práctica..
De todos modos, en pocas palabras, utilicé un sitio llamado color.adobe.com para elige colores complementarios para mi nuevo diseño. Y para refrescar la apariencia, elegí verde azulado, rosa intenso y amarillo.
¿Por qué 3 colores? Es porque quería un color específico asociado con “tomar acción”. 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”.
verde azulado es mi color de fondo. Amarillo es mi color de “atención” si tengo alguna oferta especial, y Rosa caliente 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ía, quiero que la gente haga clic en un producto. Y en la página de un producto, quiero que las personas hagan 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, entonces, ¿por qué no modelaría mi sitio después del de ellos?
En primer lugar, el diseño del sitio web de Amazon es feo, genérico y no apto 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.
Uno, debe informar a la gente que ofrece envío gratuito. Algún tipo de oferta de envío gratuito ahora es parte del curso gracias a Amazon y las otras grandes tiendas de comercio electrónico.
Dos, como eres una entidad desconocida, quieres asegurarles a los clientes que pueden devolver su mercancía si no están satisfechos.
Y finalmente, lo tercero que debe 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, lo recogerá y se irá.
Para mi rediseño, impongo la confianza de muchas maneras diferentes.
En el encabezado de cada página, Destaco envío gratis, devoluciones sin complicaciones y mi número de teléfono. ¡Tener un número de teléfono a la vista es MUY IMPORTANTE!
Cada vez que compro online en una boutique nueva, lo primero que hago siempre es hacer clic en la página de contacto y buscar un número de teléfono y una dirección. Y si ninguno de esos artículos se muestra 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 su tienda.
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 para prueba social que se presta a la credibilidad de mi sitio.
Después de todo, hemos aparecido en un montón de revistas diferentes y hemos estado en el programa Today, entonces, ¿cuál es el punto si no alardeamos de ello?
Nuestra sección de prueba social/menciones de prensa está en cada página del sitio. así que incluso si no lo ves la primera vez, eventualmente lo notarás.
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, por último, he incluido alguna palabrería que asegura al cliente que su satisfacción es nuestra principal preocupación. Nunca dejamos que un cliente se vaya insatisfecho. Y si algo sale mal, proporcionamos reembolsos completos.
Cambiar la navegación
Rediseñar la navegación de mi nuevo sitio fue un área en la que luché. Antes que nada, Soy un GRAN admirador de la navegación del lado izquierdo. Mi diseño anterior lo tenía y a mis clientes les encantaba porque el menú siempre estaba visible y accesible.
El lado izquierdo de una página web también es hacia donde tu 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 tendrían que ser reducido significativamente Cuál debería impactar negativamente en las conversiones.
Las imágenes de mi categoría serían más pequeñas, lo que bajar el CTR.
La verborrea de cada página ocuparía más espacio en la pantalla, lo que empujar los productos más abajo en la página.
Así que finalmente, opté por un nivel superior, estilo flotante, menú desplegable. 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 pantalla.
Y al mover la navegación a la parte superior, pude ampliar mi categoría y las imágenes de productos en un 300 % lo que los hizo realmente pop.
La otra ventaja de utilizar la navegación de alto nivel era la capacidad de separar categorías distintas de una manera muy limpia.
Por ejemplo, ahora tengo una categoría desplegable distinta “Comprar por ocasión”, mientras que en mi diseño anterior, esta sección se mezclaba con el resto del menú de la izquierda para que no se destacara.
También agregué una sección especial dedicada a productos personalizados, los más vendidos, los 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 ahora están 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 fuerte propuesta de valor única.
¿Por qué alguien debería comprar en su tienda? ¿Por qué debería comprar aquí en lugar de un competidor? La respuesta debe ser clara de inmediato.
Así que 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 presentación.
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. dentro de los primeros 5 segundos por qué deberían comprarle a usted y no a un competidor.
Embellecer las páginas de productos
Una de las conclusiones más importantes de la crítica de mi sitio fue que mis páginas de productos no estaban a la altura.
Aquí hay una página de producto del diseño anterior.
Así es como se ve la misma página en mi nuevo sitio.
¿Notas alguna diferencia? En primer lugar, porque quité 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 alentar más clics en “Agregar al carrito”.
Por ejemplo, justo al lado del botón “Agregar al carrito” están cuadros de texto que tranquilizan al cliente de envío gratis y devoluciones sin problemas.
También hay un enlace en la parte superior que le dice dinámicamente al cliente cuando van a recibir 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. para animar a compartir después de notar que la mayoría de los visitantes ni siquiera miraron los botones dedicados a compartir en mi sitio anterior.
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 fuerte “Agregar al carrito”. Al final, valoro una acción de “Agregar al carrito” mucho más que compartir en las redes sociales.
Finalmente, yo también aumentó el tamaño de la sección de venta cruzada para atraer al cliente a comprar artículos similares.
Mejorar el pago
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 había abierto el capó, 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 preguntó 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 por defecto y solo muestra dos botones de color rosa fuerte para el pago.
también hice el logotipos de confianza más destacados para asegurar al cliente que el pago es seguro y que su satisfacción está garantizada.
El otro cambio importante fue que Hice el pago completamente receptivo.
Nota: si estás en Shopify, entonces probablemente ya hayas visto cómo es un proceso de pago receptivo 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 dispositivos móviles
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, hay muchos marcos como BootStrap que hacen que el diseño receptivo sea mucho más fácil.
En los últimos años, mantener mis sitios móviles y de escritorio sincronizados ha sido un gran dolor de cabeza, por lo que estoy feliz de tener ahora un solo sitio unificado en todas las plataformas.
El principal inconveniente de ser receptivo era que Tuve que probar a fondo el sitio en 3 plataformas completamente diferentes, escritorio, tableta y móvil. Y dentro de cada plataforma había múltiples 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 ha utilizado en mi sitio el año pasado usando una herramienta llamada Browser Stack.
No hace falta decir que este proceso apestaba y era la parte que menos me gustaba del rediseño 🙁
De todos modos, aquí hay algunos aspectos destacados con respecto al 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 colapsar a un solo 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 en el centro de cada página del sitio móvil.
Debido a que el espacio real 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 por completo mis páginas de contenido. Como mencioné muchas veces en el pasado, utilizo nuestras páginas de artes y manualidades para canalizar a las personas hacia 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 artesanales y hizo versiones especiales altas y delgadas solo para Pinterest. También hice imágenes completamente nuevas para nuestras fotos de 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 que es de alta resolución.
Conclusión
Considerándolo todo, 7 semanas y $1840 es una muy buena inversión por las ganancias que ahora estoy experimentando. 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 fue buena antes, el aumento neto en las ventas debido a una tasa de conversión aún mejor probablemente supere 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.
¿Listo para tomarse en serio el inicio de un negocio en línea?
Si realmente está considerando comenzar su propio negocio en línea, entonces debe consultar mi mini curso gratuito sobre Cómo crear una tienda en línea de nicho en 5 sencillos pasos.
En este mini curso de 6 días, revelo los pasos que mi esposa y yo tomamos para ganar 100 mil dolares en el lapso de apenas un año. ¡Lo mejor de todo es que es gratis y recibirá consejos y estrategias de comercio electrónico semanalmente!
Publicaciones relacionadas en la optimización de conversiones
Sobre Steve Chou
Steve Chou es una persona influyente muy reconocida en el espacio de comercio electrónico y ha enseñado miles de estudiantes cómo vender efectivamente productos físicos en línea en RentableOnlineStore.com.
su blog, MyWifeQuitHerJob.comha aparecido en Forbes, Inc, The New York Times, Entrepreneur y MSNBC.
Él también es un autor colaborador para BigCommerce, Klaviyo, ManyChat, Printful, Privy, CXL, Ecommerce Fuel, GlockApps, Privy, Social Media Examiner, Web Designer Depot, Sumo y otras publicaciones comerciales líderes.
Además, dirige un popular podcast de comercio electrónicomi esposa renunció a su trabajo, que es una Los 25 mejores programas de marketing en todos los Podcasts de Apple.
Para mantenerse actualizado con las últimas tendencias de comercio electrónico, Steve ejecuta un tienda de comercio electrónico de 7 cifrasBumblebeeLinens.com, con su esposa y se pone un conferencia anual de comercio electrónico llamado La cumbre de vendedores.
Steve tiene una licenciatura y una maestría en ingeniería eléctrica de Universidad Stanford. A pesar de especializarse en ingeniería eléctrica, pasó una buena parte de su educación de posgrado estudiando el espíritu empresarial y la mecánica de la gestión de pequeñas empresas.
