Proyecto
Flamond
Desarrollo del sistema de diseño en Figma. Creación de componentes. Diseño de flujos de usuario. Prototipos animados desktop y responsive.
Rol
Product Designer | Diseño del Sistema | Responsable de Marca
Año
2024
Objetivo:
Establecer una base sólida para la marca en el entorno digital, con una interfaz funcional, escalable y visualmente coherente.
diseño ux
Sistema de diseño
Uno de los pilares clave del proyecto fue la creación de un sistema de diseño integral. Esto incluyó:
- Definición de una paleta de colores, tipografías y estilos visuales coherentes con la identidad de marca.
- Guías de espaciado, uso de grids, patrones de interacción y reglas para la construcción de interfaces escalables.
- Desarrollo de una librería de componentes desde los más básicos (botones, inputs, iconografía) hasta componentes complejos (tarjetas de producto, modales, formularios dinámicos).
Este proceso incluyó:
- Diseño de elementos básicos
- Personalización de componentes de Librerias como TailWind
- Creación de componentes complejos reutilizables.
- Publicar recursos en las bibliotecas del equipo
diseño ui
Diseño del e-commerce
Interfaz de la tienda online de Flamond tanto en su versión de escritorio como responsive. Algunas de las tareas clave incluyeron:
- Arquitectura de la información y navegación intuitiva.
- Diseño de páginas clave: home, catálogo, detalle de producto, carrito, checkout.
- Optimización para una experiencia fluida en dispositivos móviles, manteniendo la elegancia y funcionalidad.
Experiencia de usuario
Workflows
Para mejorar la experiencia del usuario y adaptarla a las necesidades específicas de la marca, diseñé varios flujos de interacción, destacando:
Wizard de configuración de la joya:
- Flujo paso a paso que guía al usuario en la creación de una pieza única. Este proceso incluyó la definición del user flow, interacciones, errores y validaciones. Wireframing y prototipado de alta fidelidad.
- #FigJam #Figma
Experiencia de usuario
Workflows
devolución de producto
- Enfocado en la claridad, accesibilidad y la reducción de fricción. Planificación del User journey, wireframing y prototipo de alta fidelidad.
- #FigJam #Figma
