ValueMe
Ganar recompensas diarias nunca ha sido tan fácil
PRODUCT DESIGN / INTERACTION DESIGN / UI DESIGN / BRANDING
ValueMe es una app que permite a los usuarios conseguir tarjetas regalo compartiendo su actividad y ubicación o participando en encuestas y retos
Contexto
De un tiempo a esta parte los usuarios hemos visto como aceptar o rechazar las cookies es la primera interacción que hacemos cada vez que entramos por primera vez a una web o una app. El uso de las cookies está cada vez más regulado y los usuarios desean tener el control total de sus datos. Con esta premisa nace ValueMe, una plataforma de investigación en la que los usuarios reciben recompensas a cambio de un uso controlado de sus datos.
Metodología
El proyecto se dividió en dos fases. El objetivo de la primera fase era diseñar un prototipo funcional para poder testar la idea y poder avanzar a una segunda fase con un MVP que incluyera todas las funcionalidades definidas en la primera fase. En esta primera fase se trabajó junto al cliente para definir el servicio y todos los requisitos técnicos para poder desarrollar la app. También se diseñaron los wireflows de la app, así como la propuesta visual. En la segunda fase se iteraron algunas de las funcionalidades y se le dio más relevancia al branding y al diseño visual. Durante las dos fases los diseñadores trabajamos de la mano del cliente para definir la solución y tomar decisiones. El equipo de desarrolló trabajó en paralelo junto con el cliente y el equipo de diseño para poder tangibilizar la solución.
Los usuarios cada vez son más conscientes del valor que tienen su privacidad y sus datos, por lo que quieren tener un control total del uso que se hace de ellos buscando la mayor transparencia.
Definición y wireflows
El primer paso que se dio junto al cliente fue definir en qué iba a consistir la solución. Una app en la que los usuarios puedan compartir su actividad y su ubicación o participar en encuestas a cambio de puntos para canjearlos por tarjetas regalo. Los pilares de la app serían la transparencia y el control total por parte del usuario. Esta app tendría identidad propia, pero en siguientes iteraciones se podrá adaptar a diferentes marcas. En este punto definimos las funcionalidades que tendría el prototipo funcional y cuáles formarían parte del MVP. Los flujos que se diseñaron durante las dos fases fueron el de onboarding, login, home, rewards y profile.
Una vez definidas las funcionalidades se diseñaron los flujos de la app. En este punto se decidió diseñar los flujos en formato diagrama o wireflows para que fuera más fácil entender las interacciones del usuario así como el desarrollo de front, back o las integraciones con plataformas externas. Estos flujos se fueron iterando hasta la última fase de diseño del MVP según se iban añadiendo casuísticas y funcionalidades. A partir de aquí se pasó a la propuesta visual y al diseño de componentes.
Diseño visual
A la hora de introducir la capa visual se propusieron tres direcciones diferentes basadas en un framework que organiza los valores y las emociones en un sistema. La primera propuesta estaba orientada a lo emocional, colores planos, muy sencilla, simple, honesta. La segunda propuesta se acercaba a lo racional, siendo más funcional, técnica y precisa. La última propuesta era más expresiva, energética, haciendo uso de colores más vivos. Finalmente se decidió que el diseño se acercará a lo racional, que fuera cálido, acogedor, honesto y empático.
A partir de aquí se definió la paleta de colores, las fuentes tipográficas y las formas básicas, que consistirían en formas redondeadas, ya que son más fáciles de percibir y requieren menos esfuerzo cognitivo para ser procesadas.
Con las bases del diseño visual se empezaron a crear los componentes al tiempo que se diseñaban las pantallas planteadas en los flujos. Se diseñaron los botones, formularios, cards, diálogos, iconos, navegación. Con el tiempo se fueron ampliando los componentes según las funcionalidades que se iban introduciendo, dando como resultado una librería de componentes extensa para futuras interacciones de diseño.
Con los componentes definidos, se empezaron a diseñar las pantallas planteadas en los wireflows. Es la manera ideal de validar el diseño y las interacciones con el cliente, además de poder documentar los flujos para el equipo de desarrollo. Una vez validados los diseños y flujos se cargaron a Zeplin para que el equipo de desarrollo tuviera la versión cerrada.
Al mismo tiempo que se diseñaban las pantallas, surgió la necesidad de incluir ilustraciones en algunos momentos de la experiencia. Se decidió seguir con un estilo simple y cercano, siguiendo los principios definidos en la propuesta visual. Se diseñaron una serie de ilustraciones con perspectiva isométrica. El color turquesa destaca sobre fondos claros, así como sobre el color azul de la marca.
Durante la primera parte del diseño del prototipo funcional, la marca había quedado relegada a un segundo plano. Pero durante la fase de diseño del MVP era necesario crear una identidad para ValueMe que reflejara de nuevo los valores y principios de la marca que ya se habían establecido. Tras explorar diferentes opciones, el resultado final es un logotipo sencillo que junto al símbolo transmite esa retroalimentación que genera la solución. Tanto el logotipo como el símbolo se tuvieron que ajustar para que se visualizan correctamente en la Play Store.
Sistema de notificaciones y programa de recompensas
Durante el MVP se diseñó un documento que recogía todas las indicaciones para que el sistema de notificaciones tuviera consistencia. Se definieron tres tipos de notificaciones dependiendo de cada target y objetivo. Las notificaciones funcionales son las que se deben enviar para el correcto funcionamiento de la app así como la relación con el usuario. Las notificaciones de recuerdo deben servir para alertar o informar al usuario de determinadas acciones. Por último, las notificaciones de engage hacen que el usuario interactúe más con la app y aumente la frecuencia de uso.
En cuanto al programa de recompensas, surge de la necesidad de recoger en un documento todas las casuísticas en las que el usuario puede conseguir y canjear puntos. Además este documento recoge posibles iteraciones a explorar en un futuro, haciendo uso de la gamificación para conectar con los usuarios.
Documentación
Después de finalizar la segunda fase del MVP era necesario recoger toda la información y diseños generados en un documento. Para ello se utilizó la herramienta Confluence, ya que el cliente estaba familiarizado con ella al haberla utilizado previamente para documentar procesos internos y del desarrollo de backend. Confluence es una herramienta sencilla que permite colaborar entre equipos y tener todo el trabajo organizado.
En este caso se separó la documentación en 3 partes. La primera compuesta por todos los elementos de marca e identidad, que indicaban como usar logotipos, colores, etc. La segunda parte contenía toda la documentación sobre la librería y los componentes diseñados durante todo el proceso. Por último, la tercera parte reflejaba las adaptaciones de marca, es decir, cómo podría convivir la app con otras marcas en un futuro, combinaciones de colores, logos, etc.
