La historia detrás de la landing page de planes y precios de Tiendanube

Bruno Rodrigues
Tiendanube Design
Published in
6 min readFeb 6, 2020

--

Qué hicimos con nuestros planes y precios

El año de 2019 fue un año de muchos proyectos estratégicos en Tiendanube. Uno de los grandes ejemplos fue nuestro rebranding.

En este artículo, Pedro (User Reasearch en Tiendanube) y yo (Bruno — Designer en Tiendanube), vamos a contarles sobre el desafio que tuvimos en Enero del 2019: repensar nuestro sistema de precificación, junto con nuestra patalla de planes y precios.

¿Con esta intro ya se ve qué es una iniciativa de research, con una interfaz grande y que toca muchas áreas de la compañía no?

Antes de empezar, repasemos por que hablamos de “repensar”

Significa que queremos ir más allá de la construcción del diseño/layout; se trata de pensar estrategicamente antes de poner en práctica cualquier idea visual que tengamos en mente.

Para esto, necesitabamos un proceso y para lograr buenas colaboraciones con los diferentes equipos.

El comienzo

Todo empezó cuando recibimos algunas tareas top-down. Que no eran acciones para ejecutar soluciones, sino entender problemas y desafios.

Con este pedido, empezamos una fase de conversaciones, buscando entender principalmente la generación de valor de nuestra plataforma y nuestro ecosistema de socios. Y claro que fue un research de precios, pero… jamás hicimos la pregunta: “¿Que pensás sobre nuestros precios?”

¡Acción!

En la medida que íbamos entrevistando algunos clientes, empezamos a formatar un nuevo sistema de planes y precios para testear con el mercado.

Hicimos algunos A/B Tests y llegamos a nuestros primeros resultados. Pero todavía no eran “redondos”, nos faltaba entender… Así que volvimos a poner aún más esfuerzos de Research y Diseño.

El poder de la colaboración

La pantalla de planes y precios de Tiendanube tiene impacto en muchas áreas de la compañía y fuimos madurando esto al largo de esta primera etapa. Ahí entendimos que, más allá de las conversaciones con clientes, para dejar esa pantalla aún mejor, necesitábamos juntar a las personas clave de los principales equipos que tienen contacto con clientes y socios, para trabajar todos juntos en la solución.

A partir de esto empezamos nos acercamos de personas de Finance, Customer Success, Research, Diseño, Sales, Partners y los invitamos para una acción colaborativa.

El proceso

Necesitábamos de algo dinámico e interactivo, y no podíamos dejar de considerar que al ser varias personas con agendas muy ocupadas contábamos con poco tiempo en cuál podíamos trabajar juntos..

Desde el principio, habíamos pensado en usar nuestros conocimientos en Design Thinking y UX Research, y así es como comenzamos con nuestro Workshop de Co-creación, que se dividió en tres partes.

En nuestro caso, como eramos alrededor de 8 personas en una sala, nos dividimos en 2 grupos y aplicamos el siguiente proceso…

#1 Solución actual

En esta parte inicial, exploramos la solución actual, en este caso, la landing page de planes y precios. Dividiendo la exploración en dos tablas:

Cuadro de problemas y oportunidades de la ‘Solución actual’ (landing page)
Cuadro de problemas y oportunidades de la ‘Solución actual’

Explicando la imagen arriba:

Problemas

  • Durante 10 minutos, les pedimos a todos que analizaran la pantalla y documentaran todos los problemas que encontraban, desde el copy hasta la visibilidad de botones, imágenes, etc.

Oportunidades

  • Acá todos tenían 10 minutos para documentar todo lo que consideraban útil para el usuario.

Después de completar todo, cada grupo tuvo que presentarlo en 5 minutos.

#2 Negocio actual

Acá dejamos de lado la página y pensamos en el negocio en su conjunto, pensando en el producto y en la propia empresa.

Desventajas y ventajas del ‘negocio actual’

Desventajas

  • Nos tomamos 10 minutos para mirar “dentro de la casa” y ver qué estaba fuera de lugar. Los participantes documentaron todo lo ponía a la empresa en desventaja.

Ventajas

  • Todos tenían 10 minutos para analizar y documentar las ventajas de nuestro negocio y lo que podíamos explorar de manera más efectiva en el proyecto.

Como en el paso anterior, después de completar todo, cada grupo tuvo que presentar.

#3 Prototipos

En esta etapa, sin la ayuda de un Diseñador, los dos equipos crearon modelos visuales en papel de la landing page basandosé en los pasos anteriores, este proceso se lleva a cabo con lápiz y papel, para que todos tengan total libertad y ganar velocidad.

Creando los prototipos

Resultado

Con una dinámica súper simple, que duró aproximadamente 2 horas, pudimos entender perfectamente cuáles eran nuestros desafíos y en las siguientes semanas comenzamos a trabajar en soluciones qué involucraban UI y UX.

Entre los principales resultados positivos con las ideas del Workshop de co-creación y nuestro proceso de investigación, podemos destacar algunos:

# 1 — Inclusión de un componente interactivo con visualización dinámica de los valores finales (mensual, trimestral y anual). En promedio, el 90% de los usuarios usan esta función antes de elegir un plan.

Heatmap con clicks

#2 — El soporte visual y niveles de lectura en el plan “Influencia”(BR).
Las personas realmente están viendo este plan más y están leyendo toda la información relacionada con los costos y recursos diferenciales.

Eyetracking del card con detalles del plan “Influencia”

#3 — Este era uno de nuestros mayores temores, ya que era diferente a todo lo que habíamos hecho en la historia de esta landing page. Decidimos no mostrar una tabla comparativa con todas las características de inmediato, sino dejar un botón justo debajo de las cards comparativas: “Ver todas las características”. Los resultados muestran que las personas están haciendo click allí y no tuvimos consultas o dudas de los que no lo hacían (cosa que nos pasaba cuando no poníamos la tabla comparativa).
Con este cambio dejabamos el control del lado del usuario, ellos solo miran la tabla comparativa en el caso de necesitarla.

Heatmap del link para ‘Ver todos os recursos’

#4 — Sobre nuestro plan Empresarial, decidimos darle más destaque en la landing page de esta nueva versión y, aunque es un plan muy importante, la gente se detiene mucho más en este banner para leer lo que está escrito y tuvimos más leads calificados.

Heatmap de la sección para el plan Empresarial

Conclusión

Estos son algunos de los resultados que tuvimos obtenido desde el lanzamiento. En Brasil tuvo tanto éxito que aplicamos el mismo padrón de diseño para landing page de Tiendanube Argentina.

Pero no paramos ahí, todavía tenemos un largo camino por recorrer, seguimos aprendiendo y mejorando con la ayuda de nuestros clientes.

¿Te interesa leer más?

Además de estos contenidos tenemos mucho más sobre producto, ingenieria, diseño, UX, marketing, SEO y más:

En Tiendanube estamos contratando, vení a potenciar histórias de éxito.

--

--