Diseño de la identidad gráfica y UI de Data Lovers
Duración
Proyecto
| 6 semanas
| BBVA Future Designers
Data Lovers es un videojuego creado para enseñar conocimientos sobre análisis de datos al equipo de diseño de BBVA.
1 | ¿En qué consiste Data Lovers?
Data Lovers es un mundo en el que, tras elegir a un personaje, el usuario va explorando diferentes zonas descubriendo conocimientos sobre el análisis de datos. En este viaje, también encontrará con distintos miembros del equipo de diseño que le contarán su rol.
El desarrollo del videojuego lo llevó acabo el estudio The Three Axis y el contenido lo realizó el equipo de diseño de BBVA y el estudio Relajaelcoco
2 | Objetivos
Mientras el equipo de desarrollo iba trabajando en el videojuego, nos encargaron los siguientes aspectos para su finalización:
Storytelling del proyecto
Logo
UI Kit
Ficha de personaje
Insignias de recompensa
Kit de bienvenida
Tuvimos que tener en cuenta los conceptos que se buscaron transmitir al principio del proyecto:
Unidad
Colaboración
Equipo
Cercanía
Empatía
Superación
Energía
Ilusión
Mi rol en
el proyecto
3 | Exploración
En una primera fase planteé diferentes formas de realizar los diseños basados en referencias de otros videojuegos, la propia identidad del BBVA y las limitaciones del proyecto.
+
Identidad BBVA
Fall Guys
Equipo
Cercanía
Energía
Ilusión
Líneas a -45º
Colores corporativos
Formas redondeadas y borde blanco que imita un estilo de cómic
Prueba exploratoria
Dejar que se vean los personajes que están hablando en pantalla (diálogo solo en la parte inferior)
Presencia del "nivel" en la pantalla
Posibilidad de contestar en los diálogos (elegir entre respuestas aunque no afecte a la narrativa)
Ficha de personaje como pasaporte o como cuaderno
Anotaciones hechas a mano
Equipo
Cercanía
Empatía
Superación
Energía
Ilusión
Cercanía
Empatía
Cercanía
Empatía
Superación
Ilusión
Unidad
Colaboración
Equipo
Cercanía
#001D52
RGB (0, 29, 82)
#85CAFF
RGB (133, 202, 255)
#F78BE8
RGB (247, 139, 232)
#FFDA0A
RGB (255, 218, 10)
4 | UI Kit
Teniendo muy presentes los conceptos que se querían transmitir y con las restricciones del equipo de desarrollo este es el resultado final.
Se optó por botones de formas redondeadas, colores planos y sombras marcadas, siguiendo con la estética del videojuego.
Los iconos utilizados son de la librería del BBVA. La paleta de colores y la tipografía se eligieron de forma conjunta para la totalidad del proyecto. Para el UI se aplica el color según la interacción:
#F7F8F8
RGB (247, 248, 248)
Cuadros de diálogo y botones de ajustes
Botones de navegación por los cuadros de diálogo
Versión hover de estos botones
Botones de interacción con elementos del videojuego
Versión hover de estos botones
Selección de personaje
Se incluye el botón “Soy yo” para fomentar la implicación con el videojuego.
Cercanía
Empatía
Al hablar con un personaje, el cuadro de diálogo tiene forma de bocadillo y se mantiene visible su nombre para personalizarlos y generar empatía con ellos.
Cercanía
Empatía
Unidad
Equipo
Se mantiene presente el nivel para que la persona usuaria no pierda la referencia de su avance.
Los botones de interacción que se encuentran dentro de un cuadro de diálogo no tienen sombra interior para visualizar la diferencia.
Superación
Energía
Ilusión
Diálogo con el equipo
Niveles de información
5 | Ficha de personaje
Se eligió finalmente que la ficha de personaje sería un cuaderno de viaje en el que la persona usuaria iría viendo sus avances y sus logros.
Puede ver a su personaje y a los miembros del equipo. Al hacer hover sobre ellos se puede ver el rol que tienen.
Se le indica que aún le quedan elementos que desbloquear con esa línea discontinua inspirada en los álbumes de cromos.
