Patagonia

Een branded commerce ervaring

Patagonia is een familiebedrijf gespecialiseerd in kleding en buitensportartikelen, verankerd in duurzaamheid. Als één van de meest vooraanstaande milieuvriendelijke businessmodellen hebben ze de weg vrijgemaakt voor anderen om hun werkwijze opnieuw te bekijken met duurzaamheid in het achterhoofd. Voor de Patagonia-vlaggenschip-ervaring kregen wij de opdracht om een design-oplossing te verwezenlijken die de enorme collectie aan producten en content eenvoudig en verhelderend tot leven zou brengen. Als een merk dat echt leeft volgens zijn waarden, was het essentieel dat de gebruikerservaring dat weerspiegelde; onze uitdaging was om een digitale shop-ervaring te creëren die het merkverhaal bij elk touchpoint vertelt.

Patagonia is welbekend met storytelling en heeft altijd een krachtige stem gehad. Onze aanpak was om deze stem naar een hoger plan te tillen en tot leven te brengen op een heldere, eenvoudige manier, terwijl we de balans raakten tussen cultuur, business, en het milieu. Een stem die consumenten vraagt om de impact van hun keuzes te overwegen, tot en met de kleding die ze dragen. Het vernieuwde e-commerce-platform fungeert als brand hub voor zowel activisme als content, dankzij een samenhangende digitale stijlgids, UX-principes, en een consistent verhaal. Het heeft nut én vertelt een verhaal, niet alleen door kleren te verkopen, maar door waarden te veranderen.

Samenwerking

Dit project vroeg om een sterk collaboratief proces. Een proces dat een unieke agency/klant-partnerschap vereiste. We voegden snel het design-team van Patagonia samen met ons team in San Diego, en werkten nauw samen vanaf het concept tot de eindstreep.

Ons team leidde de bredere gebruikerservaring terwijl we nauw overlegden met het in-house team bij Patagonia wanneer het ging om art direction, design-systemen, user-testing en scripting. Terwijl het project vorderde, kregen we ook de gelegenheid om het visuele en strategische redesign van Patagonia’s merk-initiatief The Footprint Chronicles eigen te maken.

Navigatie en informatie architectuur

Een nieuw navigatiesysteem houdt rekening met de gehele klantreis – van eerste interactie tot precies vinden waar je naar zocht. We transformeerden de navigatie-ervaring door content te organiseren op een heldere, logische manier, en door relevante verhalen te integreren wanneer dat kon. Dit geeft producten meer context én verwerkt de stem van het merk naadloos in de volledige klantreis.

De nieuwe navigatie heeft als prioriteit het grotere doel van het algemene design: product- en doelgerichte storytelling door een eenvoudige curation-strategie. Een omvangrijke collectie van culturele initiatieven zoals Patagonia Action Works en The Footprint Chronicles worden perfect tentoongesteld om ze makkelijk te kunnen ontdekken.

Productfilter

Om de eenvoud van ons ontwerp te bewaken, hadden we een krachtige filter nodig om een complexe productcatalogus te optimaliseren. Het eindresultaat was een floating, contextuele actie-knop die op iedere pagina het prominentst aanwezig is. Dit responsieve UX-patroon is ontworpen om toegankelijkheid en voortgang te bevorderen, en helpt gebruikers bij het browsen.

Productinformatie

Het was essentieel dat deze ervaring werd gepersonaliseerd en altijd relevant zou zijn voor de consument. Ons doel was om gebruikers uiteindelijk naar het beste product voor hun behoeften te leiden in één eenvoudige flow. Door in-line vragen-en-antwoorden en een productvergelijkingsoverlay konden we klanten helpen om het perfecte product te kiezen, zonder dat ze tussen productdetailpagina’s heen en weer hoefden te schakelen. Zo worden gebruikers direct door de sales-funnel geleid in een naadloze UX-flow.

Contentstrategie

De balans tussen zingeving en product kwam tot leven door de algemene contentstrategie van dit redesign. We begonnen met het maken van een centraal systeem dat niet alleen als shop-platform kon fungeren, maar ook als een merk-initiatief. Op die manier konden we de passie en het doel van Patagonia verweven in elk product-verhaal en consumenten betrekken bij het merk, ook als ze alleen maar wilden winkelen.

Mobile revenue is met meer dan 25% gestegen sinds de lancering van Patagonia

Designsysteem

De balans tussen zingeving en product was de drijfveer achter het gehele designsysteem. Focus en eenvoud waren de UX richtlijnen die ons in staat stelden om Patagonia te helpen met het vertellen van meeslepende verhalen. Emotioneel gevoel en rationeel begrip worden hierbij behouden. We wilden elk overschot wegnemen dat ons grotere doel van één, gecentraliseerde digitale ervaring niet ondersteunde.

Constante samenwerking tussen ons team en dat van Patagonia (zowel designers als developers) leidde tot een verfijnde digitale stijlgids, met een technische oplossing om hem te ondersteunen. Ieder element van het herontworpen systeem, van de homepage tot de navigatie, tot ons nieuwe product-filter-systeem, zat ingebakken in de stijlgids. Terwijl het project vorderde werd ons development-team opgenomen in het tech-team van Patagonia voor een naadloze ondersteuning bij het bouwen van The Footprint Chronicles en Patagonia.com. Van daaruit bouwden we een intuitief content-model binnen Salesforce Commerce Cloud, terwijl onze frontend-inspanningen een zeer interactieve site opleverden met perfect gerenderde motion om het verhaal van The Footprint Chronicle te vertellen.

Project overwegingen

Design op schaal

Patagonia had een design-library nodig die nuttig was voor meer dan alleen het designteam.

We bouwden een dynamisch, atomic-based designsysteem dat fungeerde als centraal naslagwerk voor de design- en marketingteams van Patagonia. Het bevatte regels voor de verscheidene onderdelen van een uitgebreide designstructuur, richtlijnen voor fotografie en contentgebruik, gebruiksvoorbeelden en functionaliteit van componenten, en belangrijke handvatten voor simpele aspecten zoals ADA-conformiteit.

Responsieve code

Om een goed prototype te kunnen maken, moest onze code responsief en doelgericht worden gebouwd.

Vanaf het begin wisten we dat dit volledige systeem gebouwd moest worden met het doel om nuttige interacties, motion-references en experience-references te kunnen prototypen, op het niveau van componenten, modules, en pagina’s. Dit hielden we bij elke stap van het bouwproces in ons achterhoofd, en we werkten met echte merk-content bij het maken van de user-flows, om realistische journeys te stimuleren. Elk element werd responsief en doelgericht gebouwd zodat de Patagonia-teams vanaf het begin verschillende pagina’s en momenten konden bekijken, precies zoals de klant ze zou zien.

Documentatie

Ons systeem moest verder gaan dan interne documentatie

Het eindproduct had als doel om nuttige front-end prototypen te maken die Patagonia voor klanten kon gebruiken in een testproces dat zich tegelijkertijd met ons ontwerp- en bouwproces afspeelde. Onze digitale design-library zat vol met nuttige documentatie en referenties, en werd een essentieel stuk gereedschap om betere QA- en test-processen op te zetten, terwijl onze live builds van het platform steeds verder vorderden.

The Footprint Chronicles – Wat begon als een samenwerkingsverband om de digitale winkel opnieuw uit te vinden werd al gauw een collaboratieve consulting-connectie. Ons team werd gevraagd om één van Patagonia’s door openheid gedreven merk-initiatieven, The Footprint Chronicles, nieuwe adem in te blazen. Dit verhaal over duurzaamheid moest op meer dan één plek verteld worden, dus ontwierpen we een systeem dat het ook in de shop-ervaring naar voren zou laten komen. Een informatieve kaart-structuur belicht belangrijke details van de koolstofvoetafdruk van een product om de consument voor te lichten en het merkdoel, perspectief en conversie aan te drijven.

Geoptimaliseerd voor mobile

We richten ons er altijd op om een net zo meeslepende ervaring op te zetten voor álle beeldschermformaten, maar in onze samenwerking met Patagonia stelden we de prioriteit om ons design-systeem naadloos in te zetten op verschillende mobile devices. Hierdoor werd de ervaring bijzonder mobile-friendly, aangezien veel consumenten vanaf hun smartphone zouden shoppen en met de content om zouden gaan. Van elk Footprint Chronicle-verhaal tot elke productdetailpagina: het volledige systeem schakelt naadloos tussen mobile en desktop.

Een immersief verhaal

Ons doel met The Footprint Chronicles was om eerst empathie met klanten op te bouwen, en dan op actie aan te sturen. Onze contentstrategie en componenten-design stelden ons in staat om uitgebreide, dynamische verhalen te vertellen door middel van interactieve content die gebruikers helpt om te verkennen en te leren. De flexibiliteit van het ontwerp laat ons niet alleen consumenten voorlichten over de merkmissie, maar zorgt ook voor daadwerkelijke verandering.

Doelgerichte shoppers

Door op zachte wijze het winkelende publiek in te lichten over hoe producten gemaakt worden en wat voor impact dat heeft op de planeet, geven we ze de kans om even stil te staan bij hun gewoontes. Zo veranderen we productzoekers in doelgerichte shoppers, terwijl we betekenisvolle productverhalen vertellen.