Rol y equipo: 

Mi rol en el proyecto fue liderar la arquitectura de la información, el diseño de interacción y la nueva interfaz, asegurando la correcta implementación del sistema de diseño previamente definido.

Trabajé en colaboración con una agencia externa encargada del desarrollo front-end, back-end y QA, coordinando revisiones y asegurando la alineación con los lineamientos de diseño y funcionalidad.

Dentro del equipo interno, contamos con un desarrollador lead, quien definió los requerimientos técnicos y sirvió de puente entre diseño y desarrollo.
‍

‍Proceso y decisiones clave

Como parte del proceso de creación del modelo de membresías de la empresa, se realizó un análisis de la experiencia global del usuario. El objetivo fue definir el nuevo flujo de usuario, incorporando el registro como paso necesario para completar exitosamente el proceso de inscripción a un evento.

‍

https://www.figma.com/board/zS3HU9PLKtKbfD0FbZBXIg/User-flow---Events-and-webinars?node-id=0-1&t=6T9p0ytxtQYSDyqh-1

‍

‍

A partir del nuevo flujo de usuario, se diseñaron diferentes casos de uso en los que el usuario podría encontrarse al intentar registrarse en un evento. Estos casos fueron los siguientes:

1. El usuario desea registrarse en un evento, pero no está logueado.
2. El usuario quiere registrarse, pero el evento está fuera de su suscripción.
3. El usuario desea cancelar su inscripción a un evento al que ya está registrado.
4. El usuario completa exitosamente su registro para el evento.
   
   

A continuación, se muestran los wireframes del flujo de registro previo (en la parte superior de la imagen) y los wireframes del flujo de registro con la nueva interfaz (en la parte inferior de la imagen).

‍

‍

‍

‍

‍

‍

Los cambios realizados en la UI del flujo de usuario, fueron motivados principalmente por un análisis heurístico y también responden al momento actual de las necesidades del negocio, dado que se evolucionó a un modelo de negocio por suscripción, tuvieron que ser adaptados para responder mejor esas necesidades. 

A continuación, se muestran a detalle algunos componentes de la interfaz que sufrieron cambios a partir de los hallazgos mismos que se documentan en los ejemplos:

‍

‍

‍

‍

Este es el ejemplo del componente Card, utilizado en el overview de los eventos disponibles. Sin embargo, presenta varios problemas:

1. Jerarquía visual poco clara: La información sobre el patrocinador, el tipo de evento y la fecha tiene el mismo nivel de relevancia, lo que dificulta su comprensión.
2. ‍Tamaño del CTA: El botón de llamada a la acción (CTA) es demasiado pequeño en comparación con el tamaño total del componente, lo que reduce su usabilidad. Un click target tan reducido afecta la interacción del usuario y genera problemas de accesibilidad.
3. ‍Contraste insuficiente: El color del texto en el CTA no cumple con el estándar mínimo AA de las guidelines de la WCAG, lo que dificulta su legibilidad.
4. ‍Falta de categorización: El componente no incluye una etiqueta que indique la categoría o subcategoría del evento, lo que impide una identificación rápida de su tipo.
   
   

Estos problemas afectan tanto la experiencia del usuario como la accesibilidad del sistema, por lo que fue fundamental mejorar la jerarquía visual, ajustar el tamaño del CTA y garantizar un contraste adecuado.

‍

‍

‍

‍

Este es el nuevo componente Card, diseñado para el overview de los eventos disponibles, incorporando mejoras en funcionalidad, jerarquía de información y accesibilidad.

Las principales optimizaciones incluyen:

• Mejor jerarquía visual: Se diferencian claramente los elementos mediante ajustes en el tamaño y estilo de la tipografía, asignando pesos visuales adecuados a cada nivel de información.
• ‍Mayor accesibilidad: Se optimizó el contraste entre el contenido y el fondo, mejorando la legibilidad y cumpliendo con los estándares de accesibilidad web.
• ‍Incorporación de etiquetas (labels): Ahora el componente incluye labels que permiten a los usuarios identificar rápidamente el tipo de evento.
  
  

Estas mejoras hacen que el componente sea más claro, funcional y accesible para todos los usuarios.

‍

‍

‍

‍

Este es el componente que se mostraba en la página de detalles del evento, donde se presenta la información general del mismo. En el análisis de este componente, identificamos varios problemas de usabilidad:

1. Falta de enlace para la localización: No había un enlace que permitiera abrir la ubicación del evento en una plataforma de navegación, como Google Maps.
2. ‍Baja flexibilidad: No se podía seleccionar a qué tipo de calendario se deseaba añadir el evento, limitando la experiencia del usuario.‍
3. UI inconsistente: Se usaba un tamaño de botón diferente, lo que generaba inconsistencia en la interfaz y afectaba la coherencia visual del componente.
   
   

Estas áreas de mejora son clave para optimizar la experiencia de usuario y la funcionalidad del componente.

‍

‍

‍

‍

Este es el nuevo componente de detalles del evento, disponible en la página correspondiente. Las mejoras incluyen:

1. Localización con enlace: Se añadió un enlace que redirige a la aplicación de mapas predeterminada en el sistema del usuario, permitiendo ubicar fácilmente el evento.
2. ‍Generación de código QR: Se incorporó la opción de generar un código QR, respondiendo a la necesidad de negocio de permitir el registro de asistentes mediante un código de identificación al llegar al evento.‍
3. Consistencia visual en botones: Se rediseñaron los botones de los CTA, alineándolos y asegurando que ambos sigan parámetros de consistencia visual.
   
   

Estas mejoras optimizan la funcionalidad y la experiencia de usuario, haciéndola más intuitiva y eficiente.

‍

‍

‍

‍

En el modal que el usuario debe completar para finalizar su registro en el evento, identificamos varios problemas en la versión anterior:

1. Falta de feedback visual: No se proporcionaba una indicación clara de qué usuario estaba en proceso de registro, lo que generaba confusión.
2. ‍Ausencia de autopopulación de datos: La información que ya estaba registrada en nuestra base de datos no se autopoblaba en los campos del modal, lo que obligaba al usuario a completar datos ya conocidos.‍
3. Campos innecesarios: Se incluían campos como el nombre y el correo electrónico, que rara vez cambian y probablemente no necesitan ser editados durante el registro.
   
   

Estas cuestiones afectaban la usabilidad y la eficiencia del proceso de registro, por lo que se han realizado mejoras para simplificar la experiencia del usuario.

‍

‍

‍

‍

En los cambios realizados al modal previo a finalizar el registro para la asistencia a un evento, se implementaron mejoras clave para optimizar la experiencia del usuario:

1. Segmentación más clara: Se separaron los campos en una página distinta para editar datos que no cambian frecuentemente, como el nombre y el correo electrónico.‍
2. Auto-fill de datos: Se añadieron indicaciones en la plataforma de diseño para utilizar la funcionalidad de auto-fill, completando automáticamente los campos con la información ya registrada en el sistema.‍
3. Mayor flexibilidad: Se incluyó la opción de cerrar el modal mediante el icono de "x", brindando al usuario la posibilidad de corregir el proceso si lo desea.‍
4. Eliminación de campos innecesarios: Se eliminaron campos que no son esenciales para completar este flujo específico, simplificando el proceso.
   
   

Estas mejoras mejoran la usabilidad, reducen la fricción en el proceso de registro y proporcionan una experiencia más fluida y flexible.

‍
IMPACTO

Tras medir los resultados mediante Hotjar durante un mes después de la implementación, obtuvimos los siguientes datos:

De los 218 usuarios que visitaron una página de detalle de un evento, 40 completaron exitosamente su proceso de registro, lo que representa un 18.35% de conversión.

De las 154 nuevas cuentas creadas en ese mes, 40 correspondieron a usuarios que, incentivados por el proceso de registro para asistir a un evento, crearon una nueva cuenta en el sistema. Esto representa un 25.97% del total de nuevas cuentas creadas durante ese periodo, posterior al lanzamiento del nuevo sistema de registro de eventos.

‍

‍