Optimización de una landing page de venta de electrodomésticos

El año pasado colaboré con la tienda de electrodomésticos de los pantallazos y trabajé con ellos, entre otras cosas, la conversión a venta de su tienda en general, y de sus fichas de producto en particular.

Dejo por aquí el antes y después, y gráfico de cómo fuimos evolucionando la conversión general de la Web.

Utilizo el modelo LIFT para trabajar estas cosas y trato de actuar sobre los parámetros que el modelo propone. Como podréis ver en los pantallazos trabajamos varios puntos. Aunque os dejo sólo el antes y el después, hubo un montón de pruebas intermedias de cada uno de los puntos.

  • El botón de comprar: revisión de la CTA (transmitir Urgencia), integración del mensaje de seguridad (candado) en el botón (reducir la Ansiedad). Aquí post con las pruebas específicas de botón.
  • Hacer más visible el nombre del producto, tamaño de fuente más grande, más centrado en la pantalla, mejorando su visibilidad. Potenciar la Relevancia.
  • Zona precios y descuento. Precio en negro, descuento en rojo. Mejorar la Claridad.
  • Eliminar tantos elementos rojos, y dar contraste al botón de acción. Eliminar Distracciones.
  • Tips de compra debajo del botón: facilidades de pago, recordatorio de condiciones de entrega, devolución, sello de confianza online.. Reducir la Ansiedad.

En definitiva, reducir las distracciones y mensajes no imprescindibles, revisar el diseño para aportar claridad (era todo rojo.. todo llamaba la atención..).

Los resultados en el tercer pantallazo. Pasamos de una conversión general del 1% al 2%.

Ojo: Es cierto que en verano se experimenta en el sector un tirón de demanda motivado por productos específicos de esta temporada, y luego observamos un ligero decrecimiento de la conversión, pero la mejora fue notable.

¿Qué os parece la evolución? ¿Conocíais el modelo LIFT?

Desarrollo Web con Wireframes

Terminamos en Efor hace un par de semanas la Web de un importante cliente para la que seguimos la metodología comentada en anterior post.

Simplemente dejo por aquí parte de los Wireframes empleados en este desarrollo Web.

No es que sea esta la que considero mejor manera de atacar un desarrollo Web.. es que creo que es la única que permite hacerlo con garantías de éxito

Pego debajo 9 Wireframes correspondientes a Home, secciones de presentación (tipo filosofía y valores, la empresa en cifras), la ficha de producto, contacto, galerías de imágenes/vídeos, secciones infográficas, etc. Destacar la creación de Wireframes para la visualización en móviles, que siempre se nos olvida…

¿Puedo permitirme este esfuerzo?

Quizá te estés preguntando si tienes tiempo para realizar este trabajo.. si puedes permitírtelo.. Créeme, pruébalo y verás si la próxima vez lo que te preguntas es si puedes “no permitírtelo”

Por cuestiones de privacidad he preferido ocultar el nombre del cliente. Me encantaría mostrar el resultado final para comparar pero no he recabado su consentimiento y no me parece oportuno… Sorry.. :(

Fases iniciales de un Desarrollo Web – metodología sencilla

Estamos en la empresa realizando un proyecto de Desarrollo Web que por lo bien que está saliendo en cuanto a fases, metodología y orden, me apetece comentarlo y documentarlo aquí.

Como el título indica, estamos todavía desarrollando el proyecto y comento a continuación la evolución de las primeras fases de este desarrollo web.

Tras recibir y estudiar la oferta comercial acordada con el cliente, e incluso disponer de reportaje fotográfico realizado en el cliente (empresa del sector industrial de la provincia de Zaragoza), nos desplazamos el diseñador del proyecto (Jotaperkins) y yo mismo a las instalaciones del cliente para una reunión de toma de datos, fijación de alcance, definición de requisitos… y aprovechamos para dar una vuelta por la empresa, amablemente guiados por el gerente.


Posteriormente realizamos unos primeros Wireframes a mano, es en esta fase donde salen las primeras preguntas y empezamos a orientar el proyecto hacia las necesidades específicas.

Apenas dos pantallas bastan para acordar las directrices generales y lanzar la siguiente fase.

De vuelta a la oficina, realizamos un trabajo de propuesta de secciones, de acuerdo a las particularidades y necesidades de comunicación del cliente, que cristaliza en un árbol de contenidos.

Es un documente sencillo – una hoja pdf con las secciones principales y sus correspondientes subsecciones – agrupadas a modo de mapa mental. Lo enviamos al cliente para conocer su opinión, recibir las primeras correcciones…

Transformaremos después estos Wireframes en un prototipo. Nos apoyamos en la extensión para Power Point, Power Mockup para realizar los wireframes de todas las pantallas del proyecto, que han sido definidas con anterioridad y reflejadas en el árbol de contenidos que estamos trabajando con el cliente.

Una vez “pintadas” todas las pantallas es sencillo – aunque algo laborioso – dar vida al prototipo linkando los menús y permitiendo cierta interactividad con el prototipo. Power Point es genial para esto, y además muy sencillo de presentar o enviar a los clientes (modo presentación).

Finalmente, validado este prototipo abrimos por fin Photoshop y realiza Javier los primeros bocetos.

Una vez preparados varios elementos gráficos, los imprimimos y recortamos para jugar visualmente con ellos, lo que nos da cierta perspectiva y nos permite re-ordenarlos y elegir las mejores combinaciones para su final presentación al cliente.

Ya os contaré cómo acaba, pero el cliente quedó muy contento con estas primeras versiones y el proyecto anda bien encaminado.. :)

Es importante centrar bien un proyecto desde sus fases más tempranas para ahorrar tiempo en su implementación posterior.

No hay nada como utilizar este tipo de técnicas para intentar que el cliente tenga una idea clara del producto que va a recibir (no olvidemos que es un intangible..) y así no haya sorpresas al final

Metodología Desarrollo Web en imágenes