Contexto del proyecto
Neety webapp es una herramienta de automatización de mensajes generados mediante IA para la venta a través de mensajes de Linkedin. A principios del año 2024 dio comienzo este proyecto como un MVP.A finalmes de año, mediante la escuela tribux, 5 compañeros y yo comenzamos la colaboración con el equipo de Neety.
Objetivos
Después de la reunión inical con el equipo de Neety, concretamos sus objetivos en las siguientes:
- Mejorar la usabilidad y experiencia de usuario optimizando los flujos de las diferentes tareas
- Mejorar el copy que acompaña los procesos para que sea más comprensible
- Asegurar la consistencia de los elementos en toda la interfaz mediante la creación de componentes
- Mejorar la estética de la herramienta en línea con sus valores de innovación y automatización
Reaserch
Durante tres meses aproximadamente realizamos trabajo de investigación. Comenzamos analizando la competencia con un completo benchmark donde pudimos conocer el mercado y las fortalezas y debilidades de otras empresas. Posteriormente realizamos entrevistas personales a usuarios de Neety y a potenciales usuarios de la herramienta. A partir de los insights extraídos realizamos un kano model con el que priorizamos, junto con los stakeholders, las acciones mas prioritarias a realizar en el rediseño.
Acciones a llevar a cabo
- Optimizar el flujo principal de creación de campañas guiando al usuario en cada paso, añadiendo un stepper, mejorando el copy, eliminando elementos superfluos o repetitivos, entre otros.
- Mejorar la experiencia de usuario creando un onboarding donde visualizar de un vistazo el rendimiento de las campañas y el estado de los últimos mensajes enviados
- Cambiar la nomenclatura de los items de la sidebar a un lenguaje menos técnico
- Añadir gráficos y etiquetas que informan sobre el estado y generación de mensajes
- Añadir elementos de feedback del sistema en momentos de carga o generación con barras de carga y notificaciones de éxito o error
Fundamentos de diseño
Basándonos en el brand book con los colores de marca definidos, escogimos el blanco y naranja como los colores principales de la interfaz y dejamos el azul oscuro para los acentos. Utilizamos las mismas tipogragías ya que estas dotan de mucha personalidad a la marca y hacen buen contraste. No obstante establecimos una escala tipográfica para ser consistentes en todas las pantallas.
Creación de un kit de componentes
Creamos componentes para un sistema consistente. Los componentes mejoraron la estética general y la usabilidad de la herramienta. También actualizamos los iconos escogiendo todos de la misma familia. Añadimos un tercer tipo de botón y establecimos una jerarquía clara entre todos los botones
La idea de crear este ui kit también es facilitar el desarrollo de futuras funcionalidades.
