8 Lessons From Patagonia’s Website

Key Takeaways

Website — Lightweight Primary Navigation: Patagonia is a well-established brand in the outdoor activewear space. The brand owns a large inventory of products that it sells via its own e-commerce website. Patagonia designed its digital store intending to make it feel lightweight and inviting. Although the brand has many products to showcase and stories to tell, Patagonia minimized its primary navigation to include only 4 links. 

Navigation — Curated User Journey: The brand also contextually grouped all of its content to curate users' explorations. While keeping its navigation light, Patagonia added a “Buy” CTA to the top nav bar on all of its product detail pages. Making the “Buy” button always visible ensures the visitors can easily add products to their carts. The brand leverages lots of large-size images and videos to demonstrate the product.

Content — Managed Users’ Expectations: Patagonia is not a brand that needs an introduction and the company leverages its position to lead with stories rather than products. The company shares an estimated time to read an article or watch a video with the users, managing their expectations and making it easier to engage with their stories.

UX Best Practices:

1. Simple Navigation

While Patagonia’s website has thousands of pages, the brand intentionally made its website feel very lightweight. The primary navigation features only four links, two (Shop, Sports) of which lead visitors to the product detail pages. The company hid the rest of the link in the hamburger menu in the top right corner and designed a spacious footer. Patagonia has a welcoming mobile navigation. The brand mimics the same sections as on desktop but provides next-level grouping to minimize the information overload of a single viewport.

Fact: 94% of consumers say your website must be easy to navigate, or they leave and never come back (source).

2. Color Coding

To drive visitors’ attention to product sale, Patagonia colors the links red. Given the brand’s large product directory this approach helps highlight needed sections.

3. Content Grouping

To further curate a user journey, Patagonia creates multiples pathways for users to explore its content. Patagonia grouped its content into contextual sections that are featured on the homepage. This grouping approach helps to keep the landing pages more lightweight and helps visitors navigate through the complex website. Patagonia doesn’t provide a way to return to the previous page relying on the browser’s “go back” control.

4. Priority CTAs

On the desktop version of the website, Patagonia locates a “Buy” CTA in the top right corner of the product detail page. The brand provides a lot of images and additional information about each SKU, and the top right corner CTA provides users with an easy way to purchase a product without having to scroll to the top of the page. On mobile, Patagonia created a floating filter CTA at the bottom of the product catalogue pages making it easier to find the right product.

‍5. Product Page Visuals

The brand doesn’t take shortcuts when it comes to showcasing its products. Patagonia provides ~6 full-size images + video(s) featuring a product from every angle.

6. User Expectations

Patagonia states the estimated time it takes to read an article as well as the duration of the video for each content piece in its Stories section. These tactics help to manage users’ expectations and foster engagement with the content.

7. Compelling Storytelling

Patagonia is not a brand that needs introduction, and it leverages its position to engage visitors with stories rather than selling products.

8. Multi-Point Funnel to the Impact Section

Patagonia is known for its mission-driven business practices. The brand includes an Impact section on every product detail page inviting customers to discover more about Patagonia’s sustainability agenda. This approach generates multiples entry points to the Impact section helping drive awareness of the company’s stance on the matter.