Pantallas del prototipo de Vitae App
En esta sección encontrarás las instrucciones para descargar y utilizar Vitae App, así como información sobre el prototipo, información sobre la ruta y sobre el componente físico (wearable) Vitae Pin.
Instrucciones para instalar / abrir Vitae App:
- Para abrir el prototipo se debe dar clic al link que aparece abajo.
- Está diseñado para utilizarse en smartphone.
Instrucciones para usar Vitae App:
- Este prototipo de media fidelidad se debe utilizar pasando las pantallas de derecha a izquierda.
IMPORTANTE: Se debe ver el prototipo al mismo tiempo que se lee la información de la ruta para poder comprenderlo de la mejor manera. Los números que aparecen entre paréntesis dentro de la descripción de la ruta corresponden al número de pantalla que se está viendo. Cada línea junto a un guión corresponde a una pantalla nueva por lo que se tendrá que cambiar en el prototipo y leer la información relacionada a esta.
Información sobre el prototipo:
Vitae App funciona en conjunto con un componente físico llamado Vitae Pin, al final de la ruta podrán encontrar un moodboard y bocetos de este pin.
Link de Adobe XD:
Ingresa a este link: https://xd.adobe.com/view/46b17a0a-5272-4aff-43bc-4c6fc829aa8b-3080/
O puedes probarlo desde nuestro blog:
(Pero recuerda que se deben leer las instrucciones de la ruta al mismo tiempo que se ven las pantallas)
Descripción de la ruta:
- Vitae App comienza con el logo (1).
- Le sigue la pantalla de inicio de sesión con correo (2), cuenta de Google o Facebook.
- Después se encuentra la pantalla de registro de una cuenta nueva (3).
Sabemos que la identidad de cada usuario es única e importante, por lo que el siguiente paso es la personalización de un avatar:
- La primera opción es para seleccionar el género (4)
- Después el tono de piel (5).
- Color de cabello (6).
- Estilo de peinado (7).
- Un extra de colores adicionales (8).
- La siguiente opción a elegir es la forma de ojos (9).
- Seguido por la forma de las pestañas (10).
- Luego viene la parte de la distancia entre los ojos (11).
- Después aparece la opción del color de ojos (12).
- En la siguiente pantalla se puede seleccionar la forma de las cejas (13).
- Seguido de esto se encuentra la opción del color de las cejas (14).
- También se debe seleccionar la forma de la nariz (15).
- La forma de la cara (16).
- La forma de los labios (17).
- Añadir líneas faciales (18).
- Opciones de ‘blush’ para el rostro (19).
- Opciones de sombras para los ojos (20).
- El color de labios (21).
- La estatura, peso y musculatura también son importantes (22).
- La condición física y lesiones también se deben agregar pues varían según el usuario (23).
- El tipo de lesión y la parte del cuerpo pueden ser seleccionados por medio de un mapa del cuerpo humano (24).
Las características físicas no son las únicas importantes, hay aspectos de la personalidad y de salud mental que se deben tomar en cuenta, como:
- Introducción a la sección de personalidad (25).
- Actitudes relacionadas con el estrés (26).
- Actitudes relacionadas con la ansiedad (27).
- La percepción de la vida según cada usuario (28).
- Actitudes relacionadas con el ánimo (29).
- Comportamientos y consumo (30).
- Sentimientos de presión (31).
- Percepción personal de la autoestima (32).
- Y por último, relaciones personales (33).
Ya que la ubicación es una parte esencial dentro de la propuesta, Vitae App tiene la opción de agregar la ubicación del usuario y, con esta información, localizar los parques y áreas verdes más cercanos en los que se realicen actividades de salud física y mental:
- La primer pantalla de esta sección muestra información sobre la ubicación (34).
- En la siguiente se podrá añadir la ubicación de la casa (35).
- El siguiente lugar importante es el trabajo (36).
- Para terminar, la ubicación del colegio / universidad (37).
- Después de esto aparecerán los parques y áreas verdes cercanas a las ubicaciones que agregue cada usuario (38).
Para terminar con la personalización del avatar el usuario podrá escoger el estilo de ropa:
- Introducción a la sección de ropa (39).
- Selección de playeras / top (40).
- Selección de pantalones / shorts / faldas (41).
- Selección de vestidos (42).
- Selección de zapatos (43).
Ahora que el usuario ha personalizado su avatar, puede comenzar a utilizar Vitae App.
La primer sección es la del ‘feed de actividades’:
- En esta se encuentran las actividades a las que el usuario se puede unir y que están relacionadas con su ubicación. En la parte superior de esta pantalla se encuentra el buscador de amigos, junto a esta se encuentra el ícono de avión de papel que sirve para que el usuario pueda enviar las actividades a sus amigos y junto a este ícono se encuentra el ícono de agenda. En la parte posterior de esta pantalla se encuentran las 5 secciones principales en las que está dividida Vitae App, la del feed es la central (44).
- La siguiente pantalla se encuentra también en el ‘feed de actividades’, en esta aparece un mapa con la ubicación del usuario, aquí se muestran los parques cercanos a la casa, trabajo y lugar de estudio, en los que puede realizar alguna actividad ya sea de deportiva o de salud mental (45).
La agenda es una subsección dentro del ‘feed de actividades’, el símbolo se encuentra en la parte superior derecha:
- Las actividades que aparecen en el feed pueden agendarse de forma automática, aparece la hora, el es y el día de la semana (46).
- Al darle clic a la actividad dentro de la agenda aparecerá toda la información de la actividad (47).
La salud física es una función que cubre Vitae App, por lo que la sección de ‘rutina’ cuenta con:
- La salud física del usuario por medio de gráficas personalizadas que miden los pasos, calorías quemadas en el día, el ritmo cardiaco del usuario durante el ejercicio y la ubicación. Estas funciones se pueden utilizar de forma aproximada con base en la información que el usuario agregó al personalizar su perfil, o de forma personalizada con el uso del wearable ‘Vitae Pin’. (48).
- Si el usuario selecciona la opción de ejercicio aparece una lista de ejercicios con información y un video explicando cómo se debe realizar (49).
- Al seleccionarse cada ejercicio se podrá ver el video de la explicación e información importante y tips para realizarlo de la mejor manera (50).
- Al finalizar cada ejercicio se podrá ver el tiempo, lo pasos del usuario al día y el ritmo cardiaco al que llegó durante la rutina de ejercicio (51).
- Aparecerá el nivel del usuario con respecto a la actividad física (52).
- Y algunos premios con los que se podrá personalizar el avatar o el cuarto en la sección del perfil (53).
- Si el usuario selecciona la parte de rutina podrá ver las rutinas que ha realizado a los largo de la semana (54).
- Y agregar más (55).
Pero la salud física no es lo único que importa, por lo que Vitae App también cuenta con información personalizada con respecto a este tema:
- Aquí se encuentran tres subsecciones: un cambio de hábitos, fuera zona de confort y comida sana, cuerpo sano (56).
- Cada una tiene retos semanales que el usuario debe completar para mejorar en distintos aspectos su salud mental (57).
AVISO: El perfil del usuario es uno de los elementos más importantes de cualquier app por lo que está siendo trabajado de forma rigurosa y sigue en proceso, así que no fue añadido a este prototipo. Agradecemos su comprensión.
Moodboard de Vitae Pin:
Bocetos:
