Un proyecto de re-diseño de una aplicación para smartphones (prototipado de app) que actualmente se encuentra en fase de desarrollo. El cliente necesitaba cambiar la interfaz de usuario por una mas novedosa. Esta app esta hecha para la gente que desee dejar de fumar y en principio su ámbito internacional la condiciona al idioma inglés.
Mi trabajo se ha basado principalmente en la parte visual, desde elegir la tipografía y colores a crear una iconografia e ilustraciones propias adaptándolo todo a las distintas pantallas de la app con unos wireframes de alta fidelidad. Una vez finalizado esto he tenido que comunicárselo al equipo de desarrollo a través de herramientas como zeplin, que permiten simular el resultado final y hace que los programadores puedan obtener recursos como colores, tamaños, posición, iconos y gráficos de una manera sencilla.
El sistema que propone esta app para ayudar a las personas a dejar de fumar se basa en establecer una serie de objetivos y mediante un asistente virtual informar de los progresos al usuario.
Su eslogan es «Mobile platform for people motivated to quit smoking» y la palabra motivated cobra mucha importancia en el estilo y tono de sus mensajes ya que es el principal pilar de la app.
Un estudio previo a sus clientes les aclaro que la app tenia que cambiar su apartado visual para adaptarse mejor al mercado y a sus necesidades.
La app ya tenia unos colores pero eran muy escasos y por tanto decidí ampliar la paleta a otros mas cercanos y armónicos, utilizando cada uno en una de las 3 secciones principales para ayudar a ubicar al usuario en cada momento.
La tipografía elegida es una muy común en las app y forma parte de material design de google. La aplicación al ser del sector de la salud no podía permitirse otras tipografías mas originales ya que perjudicaría la legibilidad y eso es algo muy importante aquí.
Al igual que con la tipografía, la parte gráfica e icónica también debía ser fácilmente entendible y legible, esto es debido a que el público de la app es un segmento de personas muy amplio y comprende edades que no están muy familiarizadas con el mundo digital.
La sencillez es algo importante en la app y los iconos en muchas ocasiones van acompañados de su texto descriptivo.
Antes de iniciar el diseño de las pantallas de la app es importante saber bien su estructura interna y por eso se hace una especie de mapa que sirve tanto para los diseñadores como para los desarrolladores.
El objetivo principal de esta estructura es saber las distintas opciones que se puede encontrar un usuario al interactuar con la app, y por tanto, el camino que le puede llevar a cada una de ellas.
En este proyecto era importante un tutorial al principio de la misma para guiar al usuario y explicarle algunos aspectos esenciales, después el mismo debía ingresar algunos datos de su forma de vida para establecer objetivos y tener una experiencia personalizada.
Una de las novedades mas destacables de este re-diseño de la app es incorporar un bot o asistente que sea el emisor de los mensajes que se envían para establecer una sensación de cercanía hacia el usuario.
El diseño del mismo a pasado por distintas opciones hasta llegar a la definitiva. Desde una figura real hasta otra ilustrada de una persona, se llegó a la conclusión de que lo mejor era un robot sin género y aspecto cercano, simpático y neutral.
Era importante mantener el logotipo de la marca y que el mismo fuera bien reconocible en tamaños muy pequeños, por ello su simplicidad.
Aquí podemos ver los wireframes de alta fidelidad con los que se guiará el equipo de desarrollo, en esta presentación solo puedo mostrar algunos ya que como dije aún está en fase de desarrollo.
En el mismo se puede observar que el asistente virtual digibot se comunica con el usuario para ofrecerle asesoramiento y motivándolo a través de mensajes en bocadillos.
Al ser una aplicación que contiene mucha cantidad de texto y formularios ha sido un reto adaptarlo a cada situación y diferenciarlo por etapas en algunos casos. Todo esto mejorará la interfaz y por tanto la experiencia de usuario.
Mas información aquí
