Fragancia eCommerce Para Shopify

Director Creativo (Arte + Dise√Īo) y Desarrollador de Shopify, 2018

ūüóí Visi√≥n General

El Fragrances Group es un distribuidor estadounidense de líneas de fragancias europeas con socios minoristas como Bloomingdale's, Bergdorf Goodman y Barneys. También sirve como distribuidor exclusivo de las fragancias Christian Siriano, Thalia Sodi y Banana Republic.

ūüĖľ Panel De Tendencias: Etapas Profundas De Relajaci√≥n

car in the desert
silk sheets
top hiking view
clouds
plants
woman traveling
the ocean

ūüöÄ Antecedentes

Me un√≠ al proyecto para redise√Īar su p√°gina web de comercio electr√≥nico que fue creado por su equipo de mercadeo. Present√© primero su Customer Journey pero debido al corto tiempo para el lanzamiento oficial, tuve que eliminar en el proceso de wireframe, desarroll√© toda la interfaz de usuario (UI) para todas las p√°ginas porque necesitaba asegurarme de que obtuviera lo que quer√≠an del proyecto.

‚úć Roboto / Roboto Condensed By Christian Robertson

ūüć¨ Paleta

ūüć≠ Degradado/a

ūüóļ Customer journey

ūüõ† Desarrollo

Dio la casualidad de que también modifiqué todo el sistema de comercio electrónico después de que su desarrollador web interno abandonara la empresa, solo 2 semanas después del proyecto.

  • El front-end se desarroll√≥ localmente utilizando el kit de herramientas de Shopify slate (en desuso en enero de 2020), escrito en un script de syntax l√≠quida.
  • Capacidad de respuesta entre dispositivos.
  • El administrador de etiquetas de Google se utiliz√≥ para apuntar a enlaces muertos y medir el tr√°fico.
  • Hotjar se utiliz√≥ para analizar los mapas de encabezado del sitio web y su comportamiento, junto con Google Analytics para comparar los datos que se recopilan para los resultados de las pruebas de A/B.

ūüŹ† P√°gina De Aterrizaje

La p√°gina de detalles del producto (PDP) fue la primera p√°gina que dise√Īe para establecer el estilo de dise√Īo de la marca con un enfoque en llevar a los usuarios a la p√°gina de pago m√°s r√°pido.

Mockup Landing Page H1

UI Design version H01

Mockup Landing Page H2

UI Design version H02

ūüĎĀ P√°ginas De Listado De Productos (PLPs)

La interfaz de usuario más la animación para la sección de buscador de fragancia era una de mis partes favoritas del proyecto. Colabore con la fotógrafa interna Beheshteh Zebhi en la creación de las colección de imágenes que evocan el sentido del olfato como guía para que los compradores puedan encontrar su aroma característico.

Para el resto de la otra colecci√≥n, Fragancias para el hogar, cuidado de la piel, ba√Īo y cuerpo y cuidado del cabello, he mantenido la misma consistencia de dise√Īo para que se vean y funcionen igual, independientemente de la colecci√≥n o el g√©nero al que pertenezcan.

Mockup Fragrance Finder A3
Mockup A03: Fragrance Finder final design
Mockup Fragrance Finder A1
Wireframe A01: Fragrance Finder
Home Fragrance mockup
Mockup A01: Home Fragrance

ūüĎĀ P√°gina De Detalles Del Producto (PDP)

Un enfoque mínimo de cada componente, enfocado a que los usuarios se concentren en cada sección, lo que les permite leer y explorar el producto de una manera tranquila y contemplativa.

Mockup PDP B1
Default look
Mockup PDP first review
Review form
Mockup PDP B1 with post review
Multiple review

ūüĎĀ P√°gina De Prensa y P√°gina De Contacto

La p√°gina contactos fue en realidad la primera versi√≥n de la p√°gina que regresa a los usuarios para futuras mejoras en caso de que haya alg√ļn abuso por parte de un usuario inteligente.

La p√°gina del comunicado de prensa se dise√Ī√≥ teniendo en cuenta un archivo. Componentes simples de un rect√°ngulo horizontal con una altura m√≠nima de 50px, que contiene el nombre de la publicaci√≥n con cualquier informaci√≥n adicional en forma de un icono de enlace para facilitar la navegaci√≥n si hay varios.

Mockup Contact Empty
Contact: Empty or Fill form
Mockup Press A2
Mockup: Press A02

ūüéĮ Resultados

Su plataforma de comercio electrónico finalmente se integró en su sitio B2C, dándoles una segunda capa de capital que atraería a su nuevo consumidor digital.