Tienda Venus: rediseñar una tienda en línea para que comprar sea fácil
> EN BREVE_
Rediseñé y desarrollé la tienda en línea. El sitio anterior era difícil de usar, así que cambié la forma de mostrar los productos y acorté el camino hasta la compra.
Ficha del proyecto
- Mi rol
- UX/UI + Frontend
- Empresa
- Tres Distribuciones
- Estado
- ● En línea
- Figma
- Next.js
- SCSS
- Axios
El problema
- No había categorías para explorar.
- El carrito era difícil de encontrar.
- No se podía comprar en línea de forma directa.
- Los productos se mostraban de forma rígida y no daban la información que la gente necesitaba.
Qué hice
- Rediseñé el sitio completo.
- Definí la identidad visual.
- Diseñé todas las pantallas en Figma.
- Programé la parte visual con Next.js y SCSS.
- La conecté con el servidor de datos (Axios).
- Creé el algoritmo del Pick & Go para recoger en tienda.
El camino de compra
- Inicio con productos destacados
- Abrir un producto
- Agregar al carrito
- Carrito lateral con botón de finalizar
- Pago: datos personales y tarjeta
Uno de los grandes retos
Necesitábamos un algoritmo que mostrara a cada persona en qué sucursal estaba el producto que buscaba y que, al mismo tiempo, revisara los productos de su carrito para ofrecerle recoger en tienda o envío desde la sucursal.
Por ejemplo, si alguien tenía tres productos, los tres estaban en la misma tienda y su dirección quedaba cerca de ella, le mostrábamos opciones especiales de compra.
Con ese reto construimos el sistema de Pick & Go: comprar en línea y pasar a recoger a la tienda.
Lo que mejoró
- Carga más rápida
- Compra con menos clics
- Más tiempo en cada producto
Lo que aprendí
Aprendí a administrar mis tiempos entre el diseño UX/UI y el desarrollo Front-End mientras colaboraba con un compañero de Back-End que creaba las APIs.
También aprendí la importancia de los tiempos de carga y de reducir los pasos que una persona necesita para completar una acción.
