Visualittle

Descripción general del proyecto

El desafío principal fue crear un proceso de 20 preguntas que no resultara tedioso o aburrido. En los primeros bocetos traté de esbozar un diseño centrado en hacer la experiencia del usuario simple, fluida y atractiva. Mis objetivos eran:

• Simplificar el proceso de brainstorming para centrarlo en identidades visuales de marca.
• Proporcionar una experiencia de usuario divertida y atractiva.
• Asegurar la usabilidad en diferentes dispositivos con un diseño responsivo.

Público objetivo

• Diseñadores gráficos y profesionales de branding.
• Equipos de marketing y estrategas de marca.
• Propietarios de pequeñas empresas que buscan definir su identidad de marca.

Flujo de usuario (User Flow)

Los bocetos a tamaño real me ayudaron a determinar la medida de los botones para mayor comodidad y usabilidad. Establecí un flujo de usuario funcional:

• Pantalla de bienvenida: Los usuarios leen una introducción e inician el proceso o hacen scroll para obtener más información.
• Cuestionario: Los usuarios responden 20 preguntas eligiendo la opción A, B o ninguna.
• Pantalla de resultados: La aplicación muestra los resultados y permite aleatorizar los resultados o reiniciar el proceso.

Prototipos funcionales

Los prototipos iniciales se centraron en simplificar las opciones A-B y minimizar los pasos para evitar la fatiga del usuario.

• Fondo y colores: Usé un fondo gris claro, resaltados amarillos y texto gris medio para reducir la fatiga visual. El estilo visual imitaba bocetos a lápiz con resaltados en marcador.

• Personaje e iconos: Un personaje en forma de nube guiaba a los usuarios con animaciones, haciendo el proceso más llevadero. Creé 50 ilustraciones para añadir diversión al proceso.

• Feedback del testeo: Las pruebas de usuario iniciales destacaron problemas con la paleta de color, las fuentes serif y la prominencia del personaje. Apliqué ajustes a la nueva versión en consecuencia.

Versión final

La versión final es un enfoque más limpio y más simple, que utiliza fuentes sans-serif e iconos de un color para reemplazar las ilustraciones detalladas. Cambié el fondo blanco y añadí una opción de modo oscuro para reducir la fatiga visual.

• Secciones codificadas por colores: Las diferentes secciones del proceso están codificadas por colores (azul para la bienvenida, naranja para las preguntas y verde para losresultados) en pro de una mejor navegación.
• Personaje refinado: Reemplacé el personaje original con otro más simple en forma de nube más simple. Los vectores SVG y las animaciones CSS facilitan su escalabilidad y reducen los tiempos de carga.
• Optimización de los CTA: Simplifiqué los CTA a comandos de una sola palabra para mayor claridad.

Conclusión

Visualtle es una herramienta funcional para definir la identidad visual de una marca, con opciones para resultados aleatorios. Las mejoras futuras incluirán más parámetros y resultados para mejorar la precisión. La herramienta está disponible para cualquier persona interesada en definir su identidad de marca a través de un proceso interactivo y atractivo.

¿Te gustaría probar Visualtittle?