blog-header-image

Carrito de compras

UI E-Commerce Mar 2022 - May 2022

En esta entrada entraré un poco más a detalle sobre cómo fue el diseño de un carrito de compras, parte del rediseño del frontend de Dream Factory.

Este fue uno de los primeros proyectos en esta empresa donde diseñé el proceso de principio a fin. Mi responsabilidad no sólo fue definir un estilo visual que pudiera adaptarse facilmente al branding del cliente, sino también propone características de funcionalidad.

Vista de lista:

Mi propuesta comenzó planteando distintas formas de ver las listas de dirigidas tanto a usuarios de escritorio como de dispositivos móviles. ¿La meta? Una vista de lista que tuviera espacio para todos los elementos que pudieran ser relevantes para el proceso de compra, como cantidades, descuentos y botones de compra; que tuviera la posibilidad de ajustarse de diferentes formas únicamente modificando los estilos de la página; Y que fuera visualmente intuitiva y guiara fácilmente a los usuarios a través de su experiencia de compra.

Mockups_listviews

Vista de detalle y carrito de compra:

Una mirada más cercana a los elementos individuales es importante. Al igual que para la lista de elementos fue necesario definir el la estructura del contenido que podríamos mostrar para todos los tipos de producto, aunque este pudiera o no existir para todas las entradas.

Al hacer clic en el ícono del carrito, se activa un panel del lado derecho que muestra el carrito de compras, lo que garantiza una transición fluida desde la navegación hasta la gestión de artículos y el proceso de pago.

Mockups_itemcart

Proceso de pago:

Una vez que el usuario comienza el proceso de pago es crucial no abrumar al usuario con demasiada información, pero aún mantener a la vista lo que el usuario está comprando para darle certidumbre. En esta parte diseñé maquetas para cada etapa y múltiples propuestas de cada paso para asegurarme que nos pudiéramos adaptar a distintos tipos de producto y de compra, como productos digitales, o entrega de comida a domicilio.

Mockups_pago2 Mockups_pago2
Mockups_pago1 Mockups_pago1

Explore more projects