Patagonia

Overview

Patagonia is an outdoor clothing and gear company known for its commitment to environmental sustainability and activism. Founded by Yvon Chouinard in 1973, the company emphasizes ethical manufacturing practices and environmental conservation. Patagonia's products cater to outdoor enthusiasts and are designed with durability and environmental responsibility in mind.

My Role

UI Designer,
Design System

Team

Stephanie Roberti

Duration

8 weeks

Tools

Figma

Problem

The current website lacks effective portrayal of the brand's creative identity and fails to represent its unique character. Its disorganized main navigation compromises user experience and accessibility. Furthermore, the chosen color scheme may evoke negative emotions, potentially undermining user engagement and brand perception.

Solution

Developing an engaging and functional design system is crucial to reflect the brand's archetype effectively. By prioritizing user needs and establishing a clear system hierarchy, the design ensures optimal usability. Consistency in design throughout the user experience is key to effectively showcasing the brand's core values.

01. Research

Brand Mission

We’re in business to save our home planet

Brand Archetype

The Explorer:
Freedom, independence, authenticity, individualism

Competetor Analysis

We’re in business to save our home planet

Target Audience

Male and Female, at any age who are outdoor lovers. Environmentally conscious, upscale consumers

Feature 01
Homepage

The new website enhances user access to products through multiple pathways and prominently showcases popular collections. It incorporates numerous calls to action while ensuring the visibility of Patagonia's broader offerings, including stories, activism, and provisions.

Feature 02
Search + Filter

The updated navigation and filter selection present a more distinct hierarchy, improving user understanding and navigation efficiency.

Feature 03
Product Display

The redesigned product page incorporates expandable specification sections for enhanced detail accessibility, with products organized neatly within their own card system for improved presentation and user experience.

04. Design System

Color Palette

Typography Desktop + Mobile

Type scale Desktop

Type scale Mobile

Icons + Buttons

05. Key Takaways

Patagonia's brand identity came to life with the new design system, resulting in a clearer hierarchy across the site. This enhancement has led to a more harmonious flow for users navigating the platform, with products now prominently highlighted to further engage the audience.

PatagoniaResponsive Design

Patagonia
Responsive Design