.svg)
Utepi, viene de la palabra noruega Utepils, y se refiere a la actividad de beber cerveza al aire libre, cuando el clima es agradable. No es un secreto que España tiene este concepto muy arraigado en su cultura, ya que tiene uno de los mejores climas de Europa.
España, aunque es el país con mas bares y restaurantes por habitantes en el mundo, con 1 por cada 175 habitantes, en las grandes ciudades es muy común querer ir a una terraza a pasar un buen momento de relax y encontrarse con muchas de ellas totalmente ocupadas, no saber si en la terraza que viste por internet le da el sol en todo momento, si tiene con qué protegerse del sol o del viento o simplemente que esta no cumpla con las expectativas de vistas deseadas.
El objetivo era desarrollar un producto que permitiera al usuario buscar y reservar terrazas en diversas zonas de la ciudad y a su vez conocer el clima y las condiciones ambientales en el lugar donde esta se encuentre.
Para este proyecto, mi responsabilidad era capturar la esencia de la experiencia deseada por el usuario, plasmando sus problemas y necesidad en las protopersonas creadas y partiendo de allí, desarrollar la app de principio a fin, asegurándome de que realmente resolviera las necesidades de los usuarios.
Utepi es un producto diseñado desde cero, en el cuál se realizaron 2 protopersonas, de distintos géneros, edades, entornos y necesidades. A partir de estas, se determinan los principales puntos a trabajar en la app, los cuales serían:
Al momento de comenzar a definir Utepi, se tuvo que determinar las funcionalidades que dieran solución a los problemas planteados en nuestras protopersonas. Para esto, se integrarían funcionalidades como:
Al definir estas funcionalidades, era hora de empezar a construir la arquitectura de la información y el flujo de usuario. Identifiqué las páginas principales y secundarias en la app, además de los principales movimientos del usuario, para así brindarle rutas optimizadas, libre de fricción y estrés. Definí que las secciones principales en las que el usuario navegaría serían el Mapa que sirve de Home y las fichas de las terrazas.
Decidí dotar de botones de acceso rápido en la Home de la app a las funciones relaciones con el clima, para facilitar al usuario el conocimiento del mismo y evitarle pasos en la consecución de esta información, así como también la opción de filtrar y cambiar de formato Mapa a formato Lista desde la misma Home.
Se siguió con la creación de los wireframes de baja fidelidad, para observar como se iban a estructurar las pantallas en la aplicación. Fue importante mantener en todo momento una interfaz limpia, que acceder rápidamente al mapa y conocer el estado actual y futuro del clima. Por esta razón, se facilitó el acceso a mapa desde cualquier punto de la app, y los botones de acceso rápido a widgets climáticos directamente desde el mapa.
Al momento de crear la marca, quería tener siempre la conexión clima - terraza, siendo el isotipo una representación de esta conexión. Tiene 3 partes que siguen la conexión sol, cielo, terraza de manera proporcional. Se optó por una paleta de colores que representa los distintos estados del cielo, que en forma de degradados dentro de la aplicación, darán al usuario una sensación de relajación. Para seguir en esta misma línea, tambien se escogió una tipografía Sans-Serif como Work Sans para mantener un aspecto limpio y claro.
La primera pantalla que ve el usuario de Utepi luego de realizar el Onboarding y registrarse, es el mapa. Acá en esa pantalla, el usuario dispone de varios botones de acceso rápido que le permitirán, principalmente, conocer información del clima y disponer de diferentes vistas del mapa. El usuario podrá ver la disposición de las terrazas a través de este, filtrarlas según diversos parámetros, buscar alguna especifica por su nombre y cambiar de el modelo de vista a modo listado. Todo esto en un solo tap.
Una característica especial en Utepi, es que el mapa va cambiando según la hora del día en que se encuentre, pudiendo estar en el modo día, tarde y noche.
Reservar una terraza en Utepi, es tan rápido como encontrar tu terraza ideal y hacer tap para ver su ficha. Acá tienes la información de ella, junto a su capacidad, el estado actual del clima (sol, sombra o lluvia), el rango de precio, la calificación, horario y ubicación, también la posibilidad de ver la terraza en modo Street View. Luego, hay información mas detallada sobre el estado del clima en la terraza, el estado del sol y su índice UV, la valoración de clientes anteriores y algunas fotos.
El siguiente paso en la reserva , luego de darle click al botón, es seleccionar la fecha (al ser terrazas en la cuál vas a pasar un rato, solo existe la posibilidad de reservar para el día actual y o el día siguiente). También seleccionas la hora, teniendo debajo unas horas recomendadas según el clima.
Luego de seleccionada la fecha y la hora, toca seleccionar la cantidad de personas y la preferencia de mesa, si es sol o sombra. Y así ya está lista la reserva del usuario.
%2520(2).gif)
.gif)
Para la versión en Smartwatch de la app, se diseñaron algunas de las funciones principales de Utepi. Se dispuso de un menú de 5 ítems con las siguientes funcionalidades que se adaptaban de mejora manera con la interfaces y el momento de uso de este dispositivo:
También se diseñó una Landing Page en la que se destacaban los aspectos diferenciadores de Utepi, para atraer nuevos usuarios a la app y para que los usuarios que ya tiene la app, puedan conocer mas mas sobre ella.
-laptop.jpeg)
.jpeg)
2.jpeg)
3.jpeg)
Ya con la aplicación tanto para mobile como para smartwatch, con la landing page diseñada también, se debe probar lo prototipado. Debido a que este proyecto pertenece al trabajo final de la parte de UI del Master realizado en Trazos, todo se enfocó principalmente en la Interfaz de la app, y no se realizó el testeo al finalizar los Wireframes de Baja Fidelidad.
Fue un proceso muy intenso y bonito, desarrollando este proyecto de app en muy poco tiempo y con un problema bastante cotidiano en este país. Diseñar la interfaz de Utepi me permitió explorar nuevas formas de crear interfaces limpias y funcionales. Aunque el enfoque principal fue la interfaz, pude comprender lo esencial que es diseñar con propósito, guiado por las necesidades identificadas en las protopersonas y teniéndolos siempre presente en toda etapa del proceso de diseño.
