Descripción

Hotmart es una potente plataforma de aprendizaje en línea que funciona como un mercado, un espacio dedicado a la compra y venta de productos digitales. Desde cursos y libros electrónicos hasta podcasts y suscripciones, la variedad es amplia y abarca numerosas categorías.

• Roles:

  Investigación de UX

  Diseño de UX
  Diseño de UI

• Herramientas:

  FigJam

  Figma

  Formularios de Google

  Optimal Workshop

  Balsamiq

  
  

Problema

Hotmart cuenta con más de 35 millones de usuarios (creadores de contenido, afiliados y compradores) y más de 580 mil productos (cursos, libros electrónicos, podcasts, eventos y mucho más); actualmente, la plataforma es deficiente en cómo está estructurado su contenido, y existen brechas totalmente necesarias dentro de su mercado, donde no hay un punto de equilibrio en lo que ofrece y en cómo se ofrece dentro de su proceso. Compra, desde la búsqueda de productos, consulta de información, compra y visualización. La plataforma debe llevar a cabo una revisión exhaustiva de su estructura y contenido para competir eficazmente en el mercado actual. De esta manera, puede maximizar su potencial y atraer a más usuarios interesados en sus servicios.

Objetivos y metas

• Mejorar la calidad y apariencia de la plataforma

• Los usuarios pueden comprar de forma rápida y sencilla

• Es natural que los usuarios localicen un producto según el tipo de contenido que sea.

• Los usuarios tienen la certeza total de que el contenido es lo que están buscando, gracias a los detalles mostrados, y que la misma satisfacción se mantiene desde el primer momento en el momento de la compra.

Investigación cuantitativa

Se realizó una encuesta, con 15 preguntas cerradas y 2 preguntas abiertas, con personas de entre 25 y 35 años y participaron de forma voluntaria.

Observaciones

• 50% Usa una plataforma para ampliar sus conocimientos

• 83% No compraría un curso que no tenga un video introductorio de este

• 67% Prefiere iniciar sesión desde las opciones sugeridas

• 90% Usa una computadora para realizar cursos en línea

Análisis de competidores

Conclusiones en el benchmark

• La apariencia de estética.

• La mayoría de los competidores solo ofrecen contenido tipo curso.

• Preguntas y respuestas, y lista de deseos, son funcionalidades que la mayoría no tienen implementadas.

• En la UI, las tarjetas de cursos muestran el precio, y el carrito dentro del botón de compra, esto también es visible en el encabezado.

• Para iniciar sesión, la mayoría muestra diferentes opciones de inicio de sesión social.

Persona del usuario

Alonso Martínez es un profesional del área de TI, y entre sus motivaciones está adquirir nuevos conocimientos y poder compartir sus enseñanzas. Por lo tanto, una de sus necesidades importantes es encontrar una plataforma de cursos variados e innovadores para cumplir su objetivo de aprender una nueva habilidad, esto surge de una frustración que le hace sentir que le faltan habilidades técnicas.

Mapa de recorrido del cliente

Conociendo un poco sobre la historia de Alonso, se planteó el siguiente escenario: “Alonso quiere comprar un curso que le ayude a tener contenido que pueda abordar en su canal.” Y así es como desglosó aún más las emociones que se evocaron en cada uno de los pasos para dicho escenario.

¿Cómo podríamos…

“Cada problema es una oportunidad para el diseño”, y siguiendo esta ideología es como se generan varias ideas para las diferentes secciones donde podemos idear y proponer una mejora, y al final tomar la opción más viable para obtener una solución, colocando todas ellas en la matriz de trazabilidad, validando el esfuerzo que se requeriría para resolverlo, y el valor agregado que generaría para el usuario.

Arquitectura de la información

El arte de organizar la información de la manera más clara y lógica posible. De esta manera, el usuario podrá encontrar fácilmente lo que busca. Y actualmente, la sección de categorías tiene una gran variedad, razón por la cual se decidió aplicar un estudio de organización de tarjetas, para saber si esta organización funciona para el usuario.

Después del estudio y basándose en las respuestas obtenidas, fue posible agrupar algunas subcategorías dentro de otras categorías, e incluso crear nuevas categorías con subcategorías existentes, haciéndolas más comprensibles para el usuario.

Flujo de usuario

El recorrido del usuario se representa con un diagrama de flujo para mostrar gráficamente los pasos que debe seguir para completar una experiencia en un entorno digital. Este flujo de usuario formó parte del inventario que la plataforma tiene actualmente en su proceso de compra de carritos y productos.

Y al no tener una opción de carrito principal, los usuarios no tenían forma de regresar y podrían realizar más de una compra. Con este rediseño en el flujo: el carrito de compras, una parte indispensable y esencial del flujo principal, se resuelve.

Wireframes - Mediana fidelidad

Representación esquemática de cada una de las pantallas más significativas que refleja las funcionalidades que estarán presentes una vez implementadas. Mostrando así el diseño de la interfaz de escritorio, orientado hacia las soluciones destacadas en la sección de ideación.

Diseño de interfaz

Iniciar sesión

Se agregó la opción de ingresar a través de una cuenta de Gmail (Google) en la pantalla de inicio de sesión. Y se adaptó a un alojamiento más común.

Categorías

Desde esta pantalla ahora se puede agregar al carrito, el botón se encuentra en cada una de las tarjetas. También se puede ver el video introductorio sin necesidad de ir a un curso específico. Se agregó un botón para borrar filtros aplicados, y etiquetas para reconocer el tipo de contenido, y se ajustó la guía a dónde te encuentras actualmente.

Subcategoría

Una vez que estás en un curso seleccionado y clasificado, puedes identificar de qué tipo de contenido se trata y su clasificación. Se agregó una vista previa del contenido, para el formato de video y libro electrónico.

Orden de compra

Esta vista fue completamente rediseñada, agrupando y separando las secciones, haciéndolas más visibles y ordenadas. Enviando los detalles de compra a la izquierda, y los datos de la persona y los métodos de compra a la derecha.

Pruebas de usabilidad

Realizando la prueba de usabilidad en algunos usuarios, se recibieron muy buenos comentarios, que sirvieron para ver dónde se encuentra el rediseño de cada una de las pantallas, y el resultado fue favorable, ya que los usuarios pudieron completar todas las tareas propuestas, y les resultó fácil ejecutarlas, completándolas en un tiempo relativamente corto, y sin ninguna dificultad; Para ellos el flujo es lógico. Asimismo, las mejoras propuestas y mencionadas por los participantes son de gran ayuda para entender los posibles ajustes que se deben implementar.

Conclusión

El proyecto de rediseñar el mercado de Hotmart fue un gran desafío para mí, ya que había puntos de mejora desde la UI hasta puntos algo críticos, como no tener un carrito de compras en su encabezado, ya que la mayoría de los mercados son de esa naturaleza, deberían tener uno y siempre darle al usuario, lo que incluso la comparación entre los competidores dejó muy claro. E incluso hubo factores que destacaron a simple vista y que siguen requiriendo un rediseño total, general.

Siempre debemos tener en cuenta que un diseño estructurado y fácil de entender mejorará su experiencia, facilitando la navegación, incluyendo la interacción, para asegurarse de que los usuarios encuentren lo que buscan en un tiempo relativamente corto.

La reorganización de categorías claras y simples ayudará a simplificar la búsqueda y selección de productos, y así garantizar compras más eficientes tanto para el usuario como para el cliente. Todo esto muestra los aspectos más relevantes y los hallazgos encontrados y resumidos de manera amplia. Al final, me hizo sentir satisfecho con el resultado obtenido, ya que fue esencial crear y descubrir cómo ayudar a un usuario que compra productos digitales.