App Web Best Business

Una empresa dedicada a la comercialización de SaaS (Software como servicio) necesitaba el diseño de una App Web para que sus clientes del rubro gastronómico pudiesen administrar y optimizar los platos, ordenes y pedidos.

Etapas del proyecto

Contexto del proyecto

Se detalló el problema, hipótesis y el objetivo del proyecto y cómo este se desarrollaría.

Rol y responsabilidades

Posteriormente, se estableció el rol de mi cargo y las responsabilidades respectivas.

User persona

A continuación, se perfiló el user persona con el fin de identificar hacia quién se dirigía el producto digital cuáles son sus principales puntos de dolor.

Arquitectura de la informacion

A través de un análisis de los servicios de la empresa y de plataformas similares en la competencia, se procedió a estructurar el inventario de contenidos con el fin de comprender la jerarquización de este.

Mapa de navegación

Para poder representar visualmente el viaje del usuario en la App Web, se procedió a confeccionar un Mapa de navegación con sus respectivas categorías.

Wireframe lo-fi en papel

Para el proceso de diseño, se utilizo la metodología Mobile First, por lo que se generaron wireframes lo-fi en papel, ya que de esa manera fue más fácil modificar poder modificar e iterar el diseño.

Wireframes digital lo-fi responsive

Posteriormente, se diseñó a través de Figma una estructura clara y minimalista en donde el usuario pudiese navegar de forma vertical a través de las secciones de la interfaz.

Puntos relevantes responsive

Se diseñaron puntos claves o relevantes en las interfaces, ya que de esta manera el usuario podría fácilmente entender cada uno de los elementos.

Wireframes digital lo-fi web

Por otro lado, en la versión web se mantuvo el minimalismo, lo cual ayudó a que no se sobresature el usuario en el uso de la interfaz.

Puntos relevantes web

Además, en la versión web se diseño la categorización de las reservas, órdenes y pedidos, a lo cual se le suma herramientas de accesibilidad.

Wireflow

Posteriormente, se detalló el viaje del usuario a través de Figjam, con el fin de entender las decisiones de este y cómo se relacionará con las distintas interfaces.

Componentes

Posterior a lo anterior, se generó una serie de componentes para agilizar el proceso de diseño de distintos wireframes.

Guidelines versión responsive

Después, se estableció las medidas principales del diseño responsive para que el equipo de desarrollo comprendiera los márgenes y padding respectivos.

Guideline responsive web

Adicionalmente, se realizó lo anterior con el las interfaces del sitio web en versión escritorio.

Diseño final responsive

Considerando todo lo anterior, se procedió a diseñar la interfaz final de la versión responsive.

Diseño final web

Finalmente, se diseñó la interfaz final de la versión web.