- Cliente: Safety Depot (difícil)
- Tipo de proyecto: Creación de página web e interfaz de usuario
- Herramientas: Adobe Photoshop, Front-end development, Invision
Descripción del proyecto
Safety Depot necesitaba renovar completamente el diseño de su página web, así como también darle importancia a los nuevos productos y añadir secciones que no existían que necesitaban, como bolsa de trabajo, proveedores, etc. Otro punto importante a destacar es que querían unificar el inventario de la tienda física con el de la tienda en línea para tener un control exacto de sus productos y con esto poder brindar un mejor servicio a sus clientes en tiempo y forma.
Saberes aplicados
- Metodología agile y atom
- Secciones nuevas con código directo al template (html, liquid)
- Edición del código css del template
- Edición del código liquid del template
- Creación, edición y exportación de assets
- Seguimiento constante con el cliente
- Integración y configuración de apps (reviews, mapa, testimoniales)
Retos
- Crear una página web que tenga secciones para las colecciones de todos los productos que manejan
- Proyectar todos los requerimientos del cliente sin afectar el diseño previamente aprovado
- Crear y editar nuevas plantillas con código liquid para adaptar el template elegido
- Realizar el prototipo en un periodo reducido de tiempo
- Hacer las secciones manipulables para el cliente
Aprendizajes
- Crear una interfaz amigable y simple para la gran cantidad de productos que manejan
- Creación de plantillas y secciones del código liquid de shopify
- Cómo crear catálogos y colecciones con un alto número de productos para el inventario
- Modificación de detalle de producto para agregar más de 2 opciones con variantes del mismo
Antes que todo la seguridad
El reto más importante a realizar del proyecto fue el organizar el inventario adecuadamente para que ambas tiendas coincidieran. Por eso mismo tuvimos que organizar y dividir los productos por colecciones, variantes y categorías específicas, esto nos brindaría una mejor organización para poder realizar las adecuaciones necesarias.
Con todas las secciones necesarias y todos los requerimientos del cliente bien aplicados en el diseño, la página se aprobó con éxito y la maquetación se realizó en tiempo y forma para el día de la entrega.
El mejor diseño para todos los productos
Todos los productos tienen sus variantes específicas, ya sea en tallas, dimensiones, tamaños y accesorios. El diseño de los productos y sus variantes fueron unas de los principales requerimientos del cliente, ya que los usuarios deben tener acceso a esas opciones para poder realizar el pedido correcto.
Otro aspecto a destacar es en las colecciones de los productos, aplicamos una amplia cantidad de filtros para poder simplificar la elección de búsqueda de los clientes. También se añadió una sección de banner promocional para mejorar la experiencia de compra.
Una maqueta responsiva
Todas las secciones aplicadas al diseño deben ser responsivas como en todos los proyectos que se relizan actualmente. En todas las páginas creadas en el proyecto se maquetaron para que se puedan adaptar a todos los dispositivos móviles. Por lo mismo, logramos organizar todas las secciones para que se vieran bien en cualquier dispositivo y todas tuvieran las funcionalidades adecuadas.
