This was a redesign of the Patagonia homepage as a personal project. I created a redesign for both desktop and mobile versions. The end result is a presentation of my UX process and an interactive prototype (mobile).
Process Overview
Conducting Research
As an initial part of the design process, I began with conducting some research online on Patagonia’s mission and business core values.
Their core values include:
1. Providing products that are long lasting, repairable, user friendly, and have limited ecological impact.
2. Acknowledging that even their own business practices can leave negative environmental footprints and by continuously learning and sharing their experiences, they are determined to be more actionable in doing more good.
3. Utilizing their business not just for selling great products but also as a means to address societal and environmental issues globally.
4. Always being open to change and developing innovation.
Based on looking at their core values and the content of their homepage, I recognized that Patagonia brands themselves as not only a storefront for outdoor enthusiasts, but also as an organization that deeply cares about advocating for social and environmental awareness. It evidently shows throughout their homepage and the entirety of their website.
User Testing
From here, I took the next step in conducting two user studies to better understand the users point of view in navigating the homepage. I surveyed each of their performances in completing 5 different tasks and then asking evaluative questions to understand their opinions on usability, visual language, and content organization.
Here are the main pain points based on their feedback:
1. Useful Information Is Hidden
Although the minimalistic style is visually appealing, it is overdone on the page and hides a lot of useful information.
In this example, one of the users stated that these row of tiles indicate a list of different sports categories but there's no further explanation of what to expect if they click the 'Explore' button. 'Explore' sounds vague and without a title header for this section, it can be easily confusing.
2. Content Layout Is Arbitrary and Confusing
It seems that Patagonia is trying to fit all of their core values in equal weight on the homepage but the way it is executed makes navigating through the page and understanding who this content is specifically for is confusing.
The users felt that the sequence of the content looks visually disorganized in which the list of products are arbitrarily sandwiched between a video reel and other stories. There was also confusion towards the bottom Sports category tiles being placed next to the footer section of the page.They felt that a typical e-commerce page usually has products and new arrivals directly displayed at the top of the homepage but Patagonia's homepage isn't set up that way.
3. Top navigation links are worded vaguely
The main navigation menu links sound vague and are not categorized in a way that is immediately understandable. This makes it difficult to intuitively find what you are looking for.
Users stated that they did not know what to expect when clicking on 'Activism', 'Sports', or 'Stories'. Their initial thought was that 'Sports' solely included sports products and they did not know what 'Stories' or 'Activism' referred to or why these categories were here.
After further investigation of the content behind these pages, they felt that 'Shop' and 'Sports' should be consolidated into one link because they both share similar content. This goes the same for 'Activism' and 'Stories'.
4. Interactive effects and bi-directional scrolling is overwhelming
The microinteractions, different scrolling directions, and text and hover effects can be overwhelming, both visually and functionally.
As one of the users scrolled through the page, she commented that the constant switch between vertical and horizontal scrolling directions felt jarring and the need to hover over a tile under 'Latest Stories' to view the description or a tile under shopping for products to view the 'Shop' button felt like an unnecessary extra step.
After reviewing this user feedback and their pain points, I started to ideate on redesign directions and sketched out some ideas. The next two pages show the resulting wireframes I created and how they solved each pain point.
Wireframing
Desktop Version
Mobile Version
Final Mockups
Desktop version (left) and Mobile version (right)
Final Interactive Prototype
The interactive elements in the prototype below include:
1. The main navigation menu (hamburger menu icon)
2. Under 'Our Community', you can tap through the category tiles. This should simulate a horizontal scroll.
3. The footer can expand and compress when you click the down and up arrow next to 'Customer Support'