Exploración de concepto y prototipo funcional · No lanzado
LĒVO Oil
Más allá de la máquina: repensar la experiencia de compra a través del storytelling de producto, un UX cuidadoso y un enfoque de e-commerce guiado por el diseño.
- Cliente
- LĒVO Oil
- Año
- 2026
- Rol
- Dirección de arte, Diseño UX/UI, Prototipado en Shopify
Introducción
LĒVO Oil fabrica máquinas de cocina que secan, descarboxilan e infusionan hierbas en aceites, mantequillas, miel y más. Trabajando dentro de la identidad establecida de la marca, desarrollé una nueva dirección visual y de UX para su tienda en línea (home y página de colección, en escritorio y móvil) y llevé el home a un prototipo funcional en Shopify. El rediseño completo no se lanzó.
Mi aporte
- Diseño visual
- Diseñador principal
Concepto, dirección de arte y diseño UX/UI para escritorio y móvil, y un prototipo del home en Shopify. El logo, los colores, la tipografía, la fotografía de producto y la estructura de navegación pertenecen a la marca; las escenas contextuales de las máquinas se generaron con IA bajo mi dirección de arte.
Con Desarrollado para un cliente de The Limitless Agency
01 · El desafío
Más que una ficha técnica.
La promesa de LĒVO es técnica: control preciso de tiempo y temperatura en lugar de un proceso engorroso en la cocina. Una promesa así es fácil de presentar como una lista de características, y más difícil de volver atractiva.
El catálogo suma una segunda capa: tres infusores, un mezclador de gomitas, ingredientes, accesorios y packs. Los compradores necesitan ayuda para elegir tanto como necesitan que los convenzan.
Partí con una evaluación UX/UI de las plantillas clave de la tienda. Señaló oportunidades concretas (pasos que debían leerse como una secuencia, acciones de compra donde se exploran los productos, una alineación consistente en las colecciones) y una más amplia: mostrar lo que las máquinas hacen posible.
02 · La idea creativa
Mostrar las posibilidades, no solo el electrodoméstico.
Nadie compra un infusor por la máquina. Lo compra por la miel, las gomitas, la mantequilla y los aceites que quiere preparar.
Por eso la dirección conecta cada máquina con lo que entra en ella y lo que sale de ella: ingredientes, preparaciones y la cocina donde todo ocurre. El producto se mantiene nítido y reconocible; el contexto que lo rodea cambia lo que significa.
03 · Dirección de arte
Cálida, en capas, con el producto primero.
La identidad venía dada: Lust Didone para titulares, EB Garamond para etiquetas editoriales, Avenir para la interfaz y una paleta de Forest, Leaf, Parchment y Amber. Mis decisiones fueron de proporción y composición.
- Parchment como fondo. Una base cálida, en lugar de blanco o verde profundo, acerca la tienda a una cocina más que a un catálogo. Forest y un salvia suave marcan el ritmo de las secciones; Amber se reserva para una palabra por titular, los íconos y las acciones secundarias.
- La máquina en el centro de lo que transforma. En “Why Choose LĒVO”, el producto aparece rodeado de lo que produce, con dos beneficios a cada lado: la imagen plantea el argumento y el texto lo confirma.
- Imágenes expresivas, información estructurada. Las escenas de estilo de vida llevan el ánimo; beneficios, pasos y especificaciones viven en tarjetas tranquilas y consistentes, con un solo estilo de íconos.
- La IA como herramienta de producción. Generé las escenas de cocina alrededor de las máquinas a partir de un brief definido, y luego las seleccioné, edité e integré para que convivan naturalmente con la fotografía de producto de la marca.
Del producto a la posibilidad.
-
La imagen de producto de la marca, tal como fue entregada. -
La composición final. La máquina, recortada y reubicada con sombras, rodeada de lo que transforma (gomitas, berries, hierbas, cítricos y un chorro de aceite), armada en Photoshop con elementos de stock.
La paleta de la marca, en nuevas proporciones.
Base de la marca
Entregada por LĒVO. Parchment como fondo, Forest para la estructura, Leaf para las acciones principales y Amber como único acento.
-
Parchment
#F5F0E8 -
Forest
#004035 -
Leaf
#007D66 -
Amber
#C48824
Fondos de sección
Usados en la propuesta, fuera de la paleta base, para dar ritmo a la página: salvia para productos y posibilidades, arena para el proceso.
-
Salvia
#C4D9CE -
Arena
#EBDBC1
Valores hexadecimales del archivo de Figma.
04 · Diseñar para decidir con confianza
De la curiosidad a la máquina indicada.
Una vez que la tienda invita a entrar, tiene que ayudar a decidir. Organicé el home en torno a las preguntas que probablemente se hace un comprador (qué es, por qué esta, cómo funciona, qué puedo preparar, cuál máquina) y le di a cada respuesta su propio módulo.
El catálogo de un vistazo.
-
Las máquinas reciben la tarjeta más grande; mezcladores, hierbas, aceites, accesorios y mezclas para gomitas se agrupan a su alrededor.
Un proceso, en orden.
-
Cuatro pasos numerados, para que el proceso se lea como una secuencia y no como una galería.
Elegir una máquina.
-
Los tres infusores lado a lado, cada uno con una frase de posicionamiento y las mismas dos especificaciones (capacidad y controles), que llevan a la página de comparación que ya tenía la marca.
Página de colección
Cada tarjeta en el mismo orden.
Imagen, nombre, valoración, precio, colores, Add to Cart. Las etiquetas de ahorro y de agotado van como cintas sobre la imagen, así nunca desplazan el precio, y un producto no disponible conserva su lugar en la grilla, con su acción desactivada en vez de eliminada.
La navegación, en el mismo sistema.
-
El menú Shop: uno de los seis estados de menú diseñados para el header. La estructura del menú es la de la tienda; la propuesta la lleva al nuevo sistema visual.
05 · Entre pantallas
Recompuesta, no reducida.
Cada sección se repensó para una pantalla angosta en lugar de escalarse hacia abajo. Tres vistas equivalentes muestran cómo se sostiene la jerarquía.
Primera pantalla: la promesa, luego el producto.
-
Escritorio: titular y acciones junto a la máquina y sus destacados. -
Móvil: primero el titular y ambas acciones; luego la máquina, con sus destacados apilados al lado.
Colección: un producto por fila.
-
Escritorio: cuatro tarjetas por fila bajo la franja de confianza. -
Móvil: una tarjeta por fila mantiene los colores y Add to Cart fáciles de tocar; la franja de confianza se desplaza y la mención de prensa tiene su propia tarjeta.
Why Choose LĒVO: la composición se mantiene completa.
-
Escritorio: la composición al centro, los beneficios a ambos lados. -
Móvil: la composición va primero y los cuatro beneficios se apilan debajo como tarjetas a todo el ancho.
06 · Del concepto al prototipo
El home, construido.
El home pasó de Figma a un prototipo funcional en Shopify, operando con los productos y la navegación de la tienda. La etapa de prototipo lo afinó: “How it works” ahora va antes de “Why Choose LĒVO”, los destacados del hero se convirtieron en una lista de lo que la máquina prepara y las tarjetas de “What can you make” sumaron descripciones breves y enlaces a la tienda. La página de colección y los demás diseños quedaron en etapa de concepto.
Prototipo en Shopify.
-
Captura del prototipo en Shopify (julio de 2026): el home funcionando como tema. No es un diseño de Figma.
07 · Conclusión
Primero la posibilidad, luego la claridad.
La marca ya tenía una identidad sólida y un producto capaz. Mi aporte fue una dirección para cómo se encuentran con el comprador: partir por lo que la gente puede preparar y luego simplificar la elección. La dirección de arte crea la invitación, el pensamiento UX facilita la decisión, y saber cómo se construye una tienda Shopify mantiene ambas cosas ancladas en lo que una tienda real puede sostener.