las frutis — fase II solución
Bien, después de la etapa de research toca darle forma a la capa visual.
Como vimos anteriormente y gracias al metodo MoSCoW, priorizamos todas nuestras ideas referentes al contenido de la aplicación. Las funcionalidades de las que podrán disfrutar los usuarios de la app son:
- Consulta sobre el perfil nutricional de los alimentos
- Listado de aditivos alimentarios
- Conocer que aditivos son de riesgo y/o vegan-friendly
- Posibilidad de comprar el Manual ilustrado para una dieta basada en plantas
- Listado de mitos alimenticios extendidos en la actualidad
- Será una app fremium
Card sorting
El card sorting es un método utilizado con el fin de ayudar a diseñar o evaluar la arquitectura de información de un sitio web o una app. En esta metodología son los participantes los que agrupan los diferentes elementos o términos y los categorizan entre si. Podemos llevar a cabo el card sort de forma presencial con cards de papel, o vía online utilizando diferentes herramientas.
En nuestro caso, utilizamos una plataforma online para realizar el card sort y en base a los resultados obtenidos decidimos modificar el nombre de algunas de nuestras categorías, proporcionando así mayor claridad a la hora de navegar por la app.
Decidimos cambiar el apartado de Nº E / Aditivos por Listado de aditivos, el referente a alimentos por Conoce a los alimentos y el de libro por Nuestro Libro.
Sitemap
La siguiente imagen representa el mapa de sitio de la aplicación de las frutis. Se centra en las funcionalidades de la app a las que puedes llegar a través del menú hamburguesa.
En la Home aparecerán cuatro botones referentes a las cuatro primera categorías que aparecen en el mapa de sitio. Siendo estas las funcionalidades principales de la aplicación.
Flowchart
Si hablamos del flujo, diremos que por el timing dado no se podían desarrollar todas las funciones de la app en el prototipo, por lo que nos hemos centrado en las principales. En la siguiente imagen el area sombreada corresponde a las partes que no se han desarrollado.
El flujo anterior puede llevarse a cabo tanto por usuarios registrados como por los que no le están. Se pueden llegar a las cuatro funcionalidades principales a través de la Home y a través del menú hamburguesa, el cual estará presente durante toda la experiencia del usuario utilizando la app.
Tanto Lista de aditivos, como Conoce a los alimentos y Mitos incluirán un buscador para agilizar la búsqueda.
Wireframing
Llegó el momento de coger el lápiz y poner en práctica todos los insights recogidos durante la etapa de research. Empezamos con los wireframes y aquí, no podíamos perder de vista que la app debía ser clara y sencilla.
Se intentó seguir una consistencia en todas las pantallas para hacer la experiencia del usuario más fluida. Aunque se iteró algunas veces, el diseño final no difiere tanto de los primeros bocetos.
En la navigation bar tenemos siempre el nombre de la categoría en la que estamos, además de una flecha para retroceder y un menú hamburguesa. En la parte inferior descansa nuestro menú principal, el cuál contiene las 4 secciones en las que se divide esta app.
Identidad Visual
Hablar sobre la identidad visual de la marca nos daría para un artículo entero de Medium, por lo que señalaremos levemente los conceptos clave.
Logo
Colores corporativos
Los colores principales serán los utilizados en la interfaz y los secundarios pertenencen a las ilustraciones de los personajes de marca. Al ser una aplicación sobre alimentación vegan-friendly, no quisimos caer en tópicos y elegir entre los colores principales el verde. Por eso el color predominante es el rojo, intentando así destacar y salirnos un poco de la norma.
Tipografía
La tipografía elegida ha sido Roboto tanto para titulares como para texto corrido.
Personajes de marca
Hemos cogido los personajes de marca de Organic Land, cliente de este Case Study, los cuales aparecerán en las pantallas de descripción de los alimentos.
A continuación se muestran algunos de ellos;
Mockups y prototipo
El diseño de la interfaz se hizo siguiendo una grid de 8 puntos y 4 columnas. Como ya mencionamos, solo desarrollamos el proceso de las 4 funcionalidades principales de la app, para poder llegar al deadline dado durante el briefing. A continuación os dejamos algunas de las pantallas y un vídeo del prototipo final.
