5.- Prototipo en alta

A continuación se explican las pantallas y se muestran las interacciones realizadas para el diseño de Human Canvas.

Pantalla de inicio

Para la pantalla de inicio se quería conseguir un "ripple effect" alrededor del botón para entrar en la aplicación. Por ello, hay dos pantallas idénticas pero con propiedades diferentes:

En esta primera pantalla, a la onda más pequeña se le baja la opacidad al 0% para crear el efecto deseado con una sencilla interacción de "Smart Animate" y un juego de colores en las funciones "Drop Shadow" e "Inner Shadow".

En esta segunda pantalla, es la onda más grande la que carece de opacidad y tras un breve lapso de tiempo con la función "Dissolve" vuelve a la primera pantalla creando el deseado "Ripple Effect".

El login consta de cuatro pantallas que tras un lapso de tiempo más prolongado hacer que vaya cambiando la imagen de fondo. Estas imágenes se han obtenido de la plataforma Unsplach y pertenecen al artista Alef Vinicius.

Asimismo, el login es sencillo no requiriendo del tedioso proceso de introducir manualmente ningún dato. En una fase posterior del proyecto sí se incluiría una personalización del perfil pero a los efectos del presente proyecto no se ha querido incidir en ello.

Las interacciones entre las pantallas son las de "After Delay".

Homepage

La página principal de la aplicación consta únicamente de los perfiles de los diferentes artistas clasificados por nombre, estilo de tatuajes y su ubicación. Asimismo, hay una herramienta de búsqueda con estos parámetros exclusivamente. La razón es que se ha querido evitar la subida masiva de información como se hace en otras plataformas (por ejemplo, Instagram) donde los usuarios "crean" su marca subiendo contenido a granel. Aquí se quiere hacer hincapié en la identidad de los artistas.

Asimismo, no se ha incluido una barra de herramientas porque las funciones deseados son o bien búsqueda directa o "scroll down" para ver el contenido.

A nivel de diseño, la pantalla de inicio consta de dos frames superpuestos y las interacciones con la siguiente fase se realizan con el clásico "On Tap" + "Navigate to", posible tanto pinchando en un perfil concreto o rellenando la herramienta de búsqueda.

Perfil del artista

Para el perfil del artista se ha utilizado el trabajo de un tatuador real de handpoke. Como muestra del perfil se han incluido los apartados que el usuario podrá ver, separado por categorías frecuentes en el gremio y que pueden resultar de interés para los clientes.

De esta manera, se muestran una serie de diseños disponibles entre los que podrá elegir el usuario y también tatuajes curados. Este dato es interesante y suele incluirse por los tatuadores como "historias destacadas" en Instagram por el hecho de que la tinta se abre con el paso del tiempo y la buena curación distingue un buen tatuador de uno no tan bueno o que necesita perfeccionar su técnica.

Asimismo, las láminas, cuadros o pegatinas también suelen ser un servicio que prestan los tatuadores como parte de su marca dado que muchos suelen ser aficionados a la pintura o al dibujo.

El apartado de "Flash" es una modalidad de "tatuaje rápido", es decir, muchos tatuadores publican determinados diseños para tatuar sobre todo cuando acuden de invitados a algún estudio. Tienen un diseño y precio fijos.

Finalmente, el apartado de contacto, donde el artista da a conocer los medios por los que desea ser contactado en caso de que haya alguna duda que la aplicación no resuelva para los clientes.

Aquí sí se han incluido tres botones sencillos en la parte de abajo: atrás, "probador" (con la herramienta cámara te pruebas el diseño en tu piel o las láminas en tu pared" y reserva (una vez seleccionado un diseño del apartado en el que te encuentres.

Nuevamente, a nivel diseño, el perfil consta de dos frames superpuestos y las interacciones entre los distintos apartados se conectan entre sí con la interacción "On Tap" + "Navigate to".

Disponibilidad

En el propio perfil del artista hay un botón "consultar disponibilidad" que nos lleva al calendario de citas del artista donde podremos ver los huecos que tiene para atender a los clientes.

La disponibilidad se muestra mediante un calendario que marca con una elipse amarilla el día de hoy (por ejemplo, 23 de enero, por ser el día de la entrega de este proyecto) y los puntos situados debajo de los días 26, 29 y 30 son días en los que el tatuador que hemos elegido tiene huecos disponibles.

De hecho, resulta que el día 23 de enero no hay huecos disponibles como aparece en la burbuja introducida con el efecto "Smart Animate".

Por lo tanto, selecciono el 26 de enero para chequear la disponibilidad de ese día y, por suerte, el tatuador de nuestra elección tiene hueco. El efecto es el mismo que el anterior, "Smart Animate". El cambio principal de esta pantalla respecto de la anterior es que para seleccionar un día que no sea el de hoy se rodea el día que se quiere consultar con un círculo amarillo. De esta manera, el usuario se hace una día mental del día presente y el día que consulta. Además, al haber citas disponibles, se activa el botón de "Añadir" situado a la derecha de "Enero 2021".

Check-out

Al pulsar en la función de "Añadir", directamente pasamos a la pantalla final de check-out donde nos aparece un resumen de nuestra solicitud de reserva. La reserva directa no se ha contemplado en esta fase de prototipado porque no es realista al tener que tener en cuenta que el tiempo de la cita depende del tamaño del tatuaje, la zona, la técnica y, por supuesto, una gran oposición manifestada por los tatuadores encuestados.

A modo de resumen arriba se incluye un agradecimiento indicando con claridad el nombre del artista. a continuación la imagen sería el tatuaje elegido (Fornasetti con un pasamontañas rosa). En la ventana se vuelve a incidir en el nombre, fecha y franja horaria solicitada y finalmente, se informa al usuario de que se aceptará/rechazará en el plazo máximo de 24 horas. Asimismo, en caso de equivocarse podrá modificar o cancelar.

Homepage web

Interacciones globales

Trabajo

Todos los entregables se han realizado en Figma (con inspiración en otras plataformas como son Dribbble, Medium, Miró, Thinkers, Infogram, etc). Para ello, se adjunta el link del trabajo realizado por si el lector quisiera ver con más detalle algún aspecto:

https://www.figma.com/file/ZekUaTgt0Ip810FmBHocZZ/Human-Canvas?node-id=0%3A1