Sinergia

Proceso UX / UI

Experiencia de Usuario

Objetivos de la App

Facilitar el comercio de productos amigables con el medio ambiente a través de una App móvil que conecte a las tiendas con sus posibles clientes.
Ofrecer información sobre el movimiento ambientalista de la ciudad de Medellín, a través de 3 categorías específicas (tiendas, blog y eventos).
Permitirle a nuestros usuarios enterarse de las ferias y eventos ambientalistas de la ciudad y agendarlos con su Google Calendar.

Nuestros Usuarios

Usuario 1 Activistas ambientalistas de la ciudad de Medellín que buscan conocer los eventos, ferias y espacios alrededor del movimiento ambientalista
Usuario 2 Personas del común que deseen comenzar a tener un consumo más amable con el medio ambiente y no saben dónde conseguir productos de este tipo.
Usuario 3 Personas del común sin intereses específicamente ambientalistas, pero que desean comparar precios en los diferentes productos que ofrece la aplicación, en relación con los productos normales del mercado.

Protopersona

A partir de una identificación de patrones de comportamiento realizada a apersonas cercanas, construimos arquetipos o personajes ficticios que representan a los posibles usuarios de la app que nos serán de utilidad para validar las decisiones de diseño centrado en el usuario. Con este propósito, utilizamos un esquema simplificado para identificar las características que necesita nuestro producto con base a las necesidades de los usuarios y para crear hipótesis sobre nuestro producto o servicio. Las categorías del esquema incluyen: nombre y apodo, imagen o dibujo, datos demográficos, comportamiento, necesidades y objetivos (con respecto al proyecto).

Viajes de Usuario

Dado que se cuenta con unos prototipos de usuario, se crea un mapa de viaje de cada uno especificando las acciones, y la experiencia emocional de estos (puntos de dolor, momentos felices). Esto nos permitirá visualizar los procesos que funcionan según lo planeado, y qué cosas pueden requerir ajustes o cambios en relación a la funcionalidad.

Árbol de Navegación

Para continuar con el proceso creativo se requiere un mapa de navegación que permita tener claro todas las rutas y funcionalidades de la aplicación móvil. Además permite organizar las características y arquitectura del contenido en función de las prioridades.

Interfaz de Usuario

Wireframes lo-fi

En este punto del proceso, se comienza la traducción de las funcionalidades que se desean en la aplicación móvil, a pantallas. Con este propósito se diseñan bocetos de las pantallas que componen la experiencia y que permiten lograr los objetivos de esta. En este espacio se puede ver una guía visual de lo que se vera en cada pantalla. Describe además la interfaz.Responde también a preguntas como ¿Quién es el usuario?, ¿Cuáles son los objetivos de usuario previstos al interactuar?, ¿Cuál debería ser el contenido y cómo debería organizarse para a poyar los objetivos?, ¿Cómo enviar el mensaje principal al usuario?, ¿Dónde está el llamado a la acción?, ¿Qué debería ver primero el usuario? y ¿Qué esperará ver nuestro usuario en la pantalla?

Wireframes Hi-Fi

Para crear la versión Hi Fi de como se vera la interfaz, se deben tener en cuenta al usuario y todo lo que este pueda requerir para comprender el funcionamiento de la interfaz. El usuario debe tener claro lo que sucede en la interfaz, en que parte del flujo se encuentra, que puede hacer en cada espacio, y lo que puede ocurrir en caso de que ejecute alguna acción. En este espacio puedes ver un primer ensayo de la versión en Hi-Fi de la interfaz de Sinergia. La cual se vera sujeta a modificaciones según las necesidades que se detectan en el proceso.

Mockups | Prototipos

Esta permite definir con más detalle el formato visual de la propuesta, el tamaño de los elementos, el espacio entre ellos según el tipo de interacción y priorizar los llamados a la acción, además tener una versión más cercana a la versión final, donde se puede simular el viaje de usuario o el flujo de navegación en plataforma para realizar los ajustes que se requieren hasta el momento. Este es el paso previo para la implementación nativa en Bravo Studio. A continuación, puedes encontrar el prototipo de la aplicación.

Identidad Visual

Imagen corporativa

Es ahora el momento de construir el sujeto institucional que se manifiesta en todos los componentes del proyecto, desde los creados y utilizados específicamente para identificarla, hasta aquellos elementos no esencialmente sígnicos, pero que connotan rasgos y valores de la entidad. Tal es el caso del logotipo, imagotipo, colores corporativos, tipografía principal y secundaria, los tamaños de reducción, aplicaciones, entre otros. Teniendo en cuenta los valores y personalidad que se desea para el proyecto, mientras se destaca este sobre otros proyectos semejantes.