UX to a Brand, Face to a Man

Katheryn Yu Duan
Marketing in the Age of Digital
5 min readJul 30, 2023

UX design of a brand’s official website must integrate aesthetics with usefulness to convey brand essence, promote products and boost online sales, with a core principle of user-centricity.

Patagonia Provisions, as a leader brand in canned fish industry, has a outstanding UX design of its official website. Let’s dive in.

User-centricity

User-centricity, one of UX design principle, has been well implemented over Patagonia website. Input https://www.patagoniaprovisions.com/ and click enter, photo dumps reel on the entire webpage showing how people enjoy canned seafood from Patagonia Provisions. In this way, the brand attempts to convey how they care its customers, and how customers enjoy its products and share with families and friends in different occasions.

Recorded screen, Patagonia Provision official website

Information Architecture (IA)

IA is another principle of UX design, which refers to making sense of every screen and every piece of information by organizing everything neatly for users with an informational hierarchy. IA helps people understand what they’re looking at and help them find what they are looking for. Product descriptions and brand stories are 2 major information categories. From the top down, product types, ingredients and their sourcing, and cooking recipes are subsidiaries under product descriptions; brand missions, contributions, and stories about sustainability, nature, and fishing are under brand stories.

The drop-off menu bar freeze on top of the website is a direct way to assess the design of information architecture. However, in my opinion, the menu could be simplified to “Shop”, “Recipes” and “Learn” because it is repetitive to have “shop”, “seafood”, “subscriptions”, and “bestsellers” all navigate people to the shopping page with all product categories available. Learning from the menu design from Patagonia Worn Wear website, only two tabs are shown, “Shop” and “Trade In”. Moreover, seafood types, subscriptions, and bestsellers could be listed in secondary menu of “Shop”.

Menu Bar, Patagonia Provisions Website
Menu Bar, Patagonia Worn Wear Website

Aesthetics

Aesthetics provides a straight-forward visual impression to the users through coloring, quality of images and videos, fonts, layouts, and so on.

Screenshots of Patagonia Provisions Website, Mobile Device

Comparing all landing pages of its 6 tabs, I notice first 4 pages are formatted by the same layout, a image with subjects in the center, and filter & sort are followed by product descriptions. However, the layout of “Recipes” tab is similar but not identical, the image is bigger and the subject is positioned in the bottom of the image and added black outline. Recipes are sorted by ingredients, diets, occasions, etc., when you scroll up the page and finish viewing those suggested summer favorite recipes.

Personally, I prefer to align the format of image and title with others to have a better consistency. Additionally, it’s better to replace the recipe picture to the one with more summer vibe.

Moreover, I think, it’s better to shrink the content for suggested recipes and summer editorials, and add an “Explore” button to the Summer Favorite Series so users who like to view seasonal recipes can navigate to a separate page for further details. The main page of “Recipes” should be more comprehensive. Users can quickly pass through suggested and seasonal recipes, and go to explore all recipes with sorting.

Screenshot of Patagonia Provisions Recipes

Finally, it is very smart to add extra kitchen gear products displayed at the bottom of the “Recipes” page because users are more likely to have stronger impulsions to shop for kitchen and dining wares.

Kitchen gear line of Patagonia Provisions

Simplicity

Ease to use is another important factors of UX design. A smooth and straightforward payment experience can contribute to boost sales and reduce cart abandonment, thereby e-commerce increasing conversions.

Patagonia Provisions’ online shopping collaborates with Shop Pay so registered user will have payment and shipping information pop up automatically when you hit check out. Online orders could be made by one click in seconds. Guest check out is an alternative. Express checkout with PayPal or Google Pay, and traditional credit card payment could be chosen. When shopping with mobile devices, Apple Pay is an additional payment option compared to laptop.

UX to a Brand, Face to a Man

To sum up, website UX design to a brand is like the face to a man. How does it look as a whole and by features? Most importantly, the face covers up the brain, what the brain tells will be conveyed by the face. A captivating face attracts people, and a deliberately face keeps people. How the face looks changes overtime by makeup, by healthy, and by age. Likewise, UX design changes as well, by touchup images and lettering, by new technology, and by new market trends.

--

--