Patagonia

Una experiencia de ecommerce con el storytelling en el centro de todo

Patagonia es una tienda family-owned de ropa y artículos deportivos para actividades al aire libre que tiene como centro de la marca la sustentabilidad. Como líder en modelos comerciales ecológicos, ha allanado el camino para que otras marcas reinventen sus prácticas teniendo en cuenta la sostenibilidad.

Para la experiencia emblemática de Patagonia, se nos encomendó la creación de una solución de diseño que diera vida a su enorme cantidad de productos y contenidos de una manera simple pero perspicaz. Para una marca que realmente vive sus valores, era vital que el UX reflejara eso, lo que significa que nuestro desafío era crear una experiencia de compra digital que contara una historia de marca en cada punto de contacto.

Patagonia siempre tuvo una voz y un tono fuertes. Nuestro enfoque fue elevar esta voz y darle vida en una ejecución clara y simple que busca que lxs consumidorxs consideren el impacto de sus elecciones en el ambiente.

La plataforma de ecommerce reinventada sirve como centro para la marca tanto para su activismo como para su contenido y sus productos.

La experiencia invoca la emoción y la comprensión racional y está completamente impulsada por la misión de la marca.

Un proceso colaborativo

Este proyecto requería un proceso profundamente colaborativo, que exigía una asociación única entre la agencia y el cliente. Rápidamente nos integramos al equipo de diseño de Patagonia en nuestra sede de San Diego y trabajamos en conjunto desde el concepto hasta la finalización. Esto sentó las bases para una relación duradera y exitosa que se extiende más allá de los límites tradicionales de servicio entre agencias y clientes.

Nuestro equipo encabezó la experiencia de usuario más amplia mientras consultaba de cerca con el equipo interno de Patagonia sobre dirección de arte, sistemas de diseño, pruebas de usuario y secuencias de comandos. A medida que avanzaba el proyecto, se nos dio una oportunidad adicional de ser dueños del rediseño visual y estratégico de la iniciativa de marca de Patagonia, The Footprint Chronicles. Al hacerlo, logramos un sistema de diseño simple y cohesivo que complementaba el sitio más grande.

Navegación y arquitectura de la información

Un nuevo sistema de navegación considera el alcance completo del viaje del consumidor, desde la interacción inicial hasta encontrar exactamente lo que está buscando. Transformamos la experiencia organizando el contenido de forma clara y lógica e integrando historias relevantes cuando correspondía. Esto le da a los productos más contexto mientras inyecta sin problemas la voz de la marca a lo largo de todo el viaje.

La nueva navegación prioriza el objetivo más amplio del diseño general para la narración de productos y propósitos a través de una estrategia de curación simple. Una extensa biblioteca de iniciativas culturales como Patagonia Action Works, The Footprint Chronicles y más se exhiben adecuadamente para un fácil descubrimiento.

Filtros

Para mantener la simplicidad de nuestro diseño, necesitábamos una poderosa herramienta de filtración que pudiera optimizar un catálogo de productos complejo. El resultado final fue un botón de acción contextual flotante que se convierte en el indicador más destacado de cualquier página. Este patrón de UX receptivo está diseñado para la accesibilidad y la progresión y ayuda con éxito a los usuarios a navegar.

Educación

Era fundamental que esta experiencia fuera personalizada y siempre relevante para el consumidor. Nuestro objetivo era, en última instancia, guiar a los usuarios hacia el mejor producto para sus necesidades en un flujo simple. Al implementar una superposición de comparación de productos y preguntas y respuestas en línea, pudimos ayudar a los clientes a decidir qué producto es el adecuado para ellos, ahorrándoles la molestia de alternar entre las páginas de detalles del producto. Como resultado, los usuarios se enrutan directamente a través del embudo de ventas en un flujo de UX sin problemas.

Estrategia de contenidos

The delicate balance between purpose and product truly came to life throughout our overall content strategy for this redesign. We set out to create a central system that could not only serve as a shopping platform but a brand initiative as well. In doing so, we were able to weave Patagonia’s passion and purpose right into each product story and keep consumers engaged in the brand, even if they were just looking to shop.

Desde el lanzamiento, las ganancias derivadas de mobile crecieron más de un 25%.

El sistema de diseño

El delicado equilibrio entre el producto y el propósito fue la fuerza impulsora detrás de todo nuestro sistema de diseño. El enfoque, la claridad y la simplicidad se convirtieron en nuestros principios rectores de UX, lo que nos permitió ayudar a Patagonia a contar historias convincentes, manteniendo tanto el sentimiento emocional como la comprensión racional. Nos propusimos eliminar cualquier exceso que no respaldara nuestro objetivo más amplio de una experiencia digital centralizada.

La colaboración constante entre el equipo de Patagonia y el nuestro, tanto diseñadores como desarrolladores, dio como resultado una guía de estilo digital refinada, con una solución técnica para respaldarla. Cada elemento del sistema rediseñado, desde la página de inicio hasta la navegación y nuestro nuevo sistema de filtrado de productos, se incorporó a la guía de estilo con la máxima fidelidad. A medida que avanzaba el proyecto, nuestro equipo de desarrollo se incorporó al equipo de tecnología de Patagonia para ofrecer un soporte continuo en la construcción de The Footprint Chronicles y Patagonia.com. A partir de esto, construimos un modelo de contenido intuitivo dentro de Salesforce Commerce Cloud, mientras que nuestros esfuerzos de frontend produjeron un sitio altamente interactivo con un movimiento renderizado meticulosamente para contar la historia de The Footprint Chronicle.

Consideraciones del proyecto

Diseño a escala

Patagonia needed a design library that was useful to more than just the design team.

We built a dynamic, atomic-based design system that acted as a centralized library for the Patagonia design and marketing teams to reference. It contained rules for various elements of a comprehensive design structure, guidelines for photography and content usage, component use cases and functionality, as well as high-level guardrails for simple aspects like ADA compliance best practices.

Código responsive

In order to properly prototype, our code had to be built responsively and with purpose.

From the start, we knew this entire system had to be built with the intent of prototyping useful interactions, motion references, and experience references at a component, module, and page level. We were mindful of this every step of the build and even worked with actual brand content when creating user flows, in an effort to help stimulate realistic key journeys throughout the experience. Each element was built responsively and with purpose so that the Patagonia teams could preview various pages and moments exactly as they would appear for a consumer.

Documentación

Our system needed to perform beyond internal documentation.

The final product of our efforts aimed to create useful front-end prototypes that Patagonia could use with customers in a testing process that ran concurrently with our design and build. Our digital design library, filled with useful documentation and references, became a vital tool in creating better QA and testing processes, as our live builds of the platform moved forward.

The Footprint Chronicles: lo que comenzó como una asociación para reinventar una tienda digital pronto se convirtió en un compromiso de consultoría colaborativa.

Se le pidió a nuestro equipo que ayudara a revivir una de las iniciativas de marca impulsadas por la transparencia de Patagonia: The Footprint Chronicles. Esta historia de sustentabilidad necesitaba ser contada en más de un lugar, por lo que desarrollamos un sistema para mostrarla a lo largo de la experiencia de compra.

Dar pausas

En un esfuerzo por cambiar la mentalidad de los consumidores, utilizamos las páginas de detalles del producto como una oportunidad para invitar a un propósito de marca más grande. Al educar suavemente a los compradores sobre cómo se fabrican los productos y el impacto que tienen en el planeta, podemos darles un momento para hacer una pausa y considerar sus hábitos. Al hacerlo, podemos convertir a los buscadores de productos en compradores motivados por un propósito, mientras contamos historias de productos significativas.

Una historia inmersiva

Nuestro objetivo con The Footprint Chronicles era primero generar empatía con los clientes y luego impulsar la acción. Nuestra estrategia de contenido y el diseño de componentes nos permitieron contar historias ricas y dinámicas a través de contenido interactivo que permite a los usuarios explorar y aprender. La flexibilidad de este diseño nos permite no solo educar a los consumidores sobre la misión de la marca, sino que también genera un cambio real en la mentalidad cultural.

Un call to action

Nuestra estrategia y objetivo general para The Footprint Chronicles culmina en una estructura narrativa simple. Comenzamos con por qué cada aspecto de nuestra misión es importante: por qué es necesario señalar estos puntos y contar historias. Luego, los consumidores reciben una explicación honesta de dónde nos encontramos en este viaje para hacer y ver el cambio. Por último, el compromiso de la marca con lo que viene. ¿Hacia dónde progresa Patagonia desde aquí y qué pueden hacer los consumidores y cada marca para desempeñar un papel en este cambio?