Cómo hicimos la página de precios sin la sensación de letra pequeña

Creamos una página de precios que no generaba la sensación de letra pequeña, mejorando la percepción de los usuarios.

---

Introducción al problema

Recientemente, en nuestro canal de Slack, surgió una discusión sobre cómo los usuarios perciben nuestros planes de precios. Uno de los desarrolladores compartió una captura de pantalla de la página con los antiguos precios, y muchos expresaron que la fuente parecía demasiado pequeña y poco legible. Esto nos generó serias preocupaciones, ya que la página de precios es uno de los elementos clave que influye en la decisión de compra de los usuarios.

Por qué es importante

La página de precios no es solo un conjunto de cifras y descripciones. Es una parte importante de nuestro producto que debe comunicar claramente su valor a nuestros usuarios. Cuando los usuarios no pueden entender rápida y fácilmente qué precios ofrecemos, esto afecta negativamente a su decisión. Además, puede alejar a clientes potenciales que buscan transparencia y simplicidad. Comprendíamos que mejorar esta página podría impactar directamente en nuestras tasas de conversión y en la percepción general de la marca.

Detalles del problema

En la antigua versión de la página de precios, los usuarios se quejaban de varias cosas. En primer lugar, la fuente era realmente demasiado pequeña, lo que dificultaba la comprensión de la información, especialmente en dispositivos móviles. Por ejemplo, uno de los usuarios mencionó en los comentarios que no podía distinguir qué plan le convenía debido a la compleja estructura y al texto pequeño. Este problema se agravaba porque la información estaba presentada en forma de tabla con celdas pequeñas y sin claros resaltados visuales.

Lo que probamos primero

Inicialmente, decidimos simplemente aumentar el tamaño de la fuente y cambiar el color de fondo a uno más contrastante. Sin embargo, después de varias iteraciones y pruebas con usuarios, quedó claro que eso no era suficiente. Nos enfrentamos al problema de que al aumentar la fuente teníamos que reducir la cantidad de información en una sola página, lo que tampoco resolvía el problema de claridad. Esto nos llevó a pensar en la necesidad de una revisión completa del diseño de la página.

Enfoque técnico

En lugar de realizar cambios simples, decidimos rediseñar la página de precios desde cero. Nos centramos en el diseño intuitivo y la legibilidad. Como solución, elegimos fuentes más grandes, separadores visuales claros y añadimos elementos interactivos para mejorar la interacción. Aquí hay un ejemplo de nuestro nuevo código CSS:

.pricing-table {
  font-size: 1.2rem;
  line-height: 1.5;
  padding: 20px;
}
.pricing-header {
  font-weight: bold;
  font-size: 1.5rem;
}

También implementamos la posibilidad de que los usuarios cambien fácilmente entre los planes mediante pestañas, lo que hizo que la percepción de la información fuera más dinámica y cómoda.

Cambios en el producto

Después de implementar el nuevo diseño, notamos cambios significativos. Los usuarios comenzaron a interactuar más con los precios, y la cantidad de solicitudes de información disminuyó. La mejorada legibilidad y la interfaz intuitiva permitieron a los usuarios tomar decisiones más rápidamente, lo que tuvo un impacto positivo en la conversión. Estamos seguros de que los precios mejorados también influirán en las páginas /jobs y /for-candidates, ya que la claridad en los precios puede aumentar la confianza en nuestro producto.

Lo que aprendimos

  • La simplicidad y la claridad son más importantes que la cantidad de información.
  • Los elementos interactivos pueden mejorar significativamente la experiencia del usuario.
  • Es necesario probar los cambios con usuarios reales antes de implementarlos definitivamente.

Qué significa esto para los candidatos

Para los candidatos, esto significa que ahora podrán entender más rápidamente y de forma más sencilla qué servicios ofrecemos y cómo pueden ayudarles en su búsqueda de empleo. La claridad en los precios hace que el proceso de elección sea más transparente y menos estresante.

Qué significa esto para los reclutadores

Los reclutadores verán que la página de precios mejorada puede aumentar el interés en nuestros servicios. Precios claros y comprensibles ayudarán a atraer nuevos clientes y mejorar la imagen de la empresa en el mercado.

Próximos pasos

A pesar de los resultados alcanzados, seguimos atentos a los comentarios de los usuarios. Planeamos realizar pruebas A/B adicionales para determinar qué elementos del diseño se pueden mejorar aún más. Si tuviéramos la oportunidad de cambiar algo, prestaríamos más atención a la fase de pruebas para identificar posibles deficiencias en las primeras etapas de desarrollo. ---

Materiales relacionados

  • Chart plannedГрафик взаимодействия с тарифами
    Изменение уровня взаимодействия пользователей с новой страницей тарифов.
  • Code screenshot plannedПример кода CSS
    Код, использованный для улучшения дизайна страницы с тарифами.

También en Fitlane AI

Temas: страница тарифов, пользовательский опыт, дизайн интерфейса, HTML, CSS, Fitlane, AI