Birra a Casa — Ux/Ui Case of study

Fátima Castilla
3 min readAug 17, 2021

--

El mundo de la cerveza en tus manos

Article available in English

Descripción del proyecto

Llevar a los amantes de la cerveza un servicio de entrega de cervezas a domicilio, entradas a catas, conciertos, maridajes…

Duración del proyecto: 3 meses — mayo a agosto de 2019

Proyecto general

El objetivo final del proyecto es crear una aplicación, una plataforma de comercio electrónico (app), para la venta de cerveza y entradas a eventos.

Objetivos de negocio

El resultado esperado:

  • Venta de cervezas y entradas
  • Crear una comunidad
  • Llegar a jóvenes adultos

Problema

Se intenta combinar varias funcionalidades, la venta de cerveza, la venta de entradas y la creación de blogs en una sola aplicación. Además de las funcionalidades asociadas a ellas.

Público objetivo

No se realizó ninguna investigación previa. Se partió directamente de un usuario mayor de 25 años, amante de la cerveza y con intereses culturales y gastronómicos.

Rol y responsabilidades

En este proyecto, he llevado a cabo:

  • Arquitectura de la información
  • Sketching, wireframes low-fi
  • Flujos de usuario y Prototipado
  • Diseño Visual

Proceso de diseño

Empecé con el proceso de diseño de la interacción con los bocetos con los primeros flujos de usuario.

Primeras ideas

Diseño de interacción

Sitemap

Arquitectura de la información

User flow

Caso de uso: Búsqueda y compra

Con esta organización clara, se diseñaron los wireframes Mi Fi.

Caso de uso: búsqueda y compra

Diseño visual

Empecé con los moodboards para inspirarme.

Moodboards

Durante el desarrollo del proyecto se propusieron dos líneas gráficas totalmente diferentes. La primera con una tendencia, geométrica en colores vivos y la segunda, “naïf” con un diseño más limpio y sencillo.

Brutalist Moodboards

Naif Moodboards

UI Kit (guía de estilo)

Finalmente, se decidió desarrollar la segunda propuesta “Naif” que se ajustaba a la imagen que se quería dar de la aplicación: “Una aplicación accesible y sencilla para cualquier tipo de usuario “.

Con estas premisas se diseñó la guía de estilo y las pantallas.

Guía de estilo

Prototipo final

Prototipo realizado con Hi-fi Wireframes en Invision.

Prototipo

Conclusiones y aprendizajes

Trabajar en este proyecto me dio la oportunidad de darme cuenta del proceso de creación de una aplicación como producto final. Aunque el objetivo del proyecto era el desarrollo del diseño visual, se valoró también el proceso de definición del producto, desde la arquitectura de la información hasta la evolución y desde el skectching hasta el Mi-fi Wireframe.

El desarrollo de dos líneas gráficas totalmente opuestas para dar opciones totalmente diferentes a nivel visual del producto, fue un reto personal.

--

--