Quick Summary
My Role: Research & UX/UI Designer
The Problem: The original product page made it difficult for customers to find information easily.
The Solution: Conduct a study using VAS by 3M to identify issues with the design and apply the findings to the new design.
The Result: The product page now generates 20% attention on the Purchase Button, a 44% increase on the attention to the product imagery and a significant reduction on cognitive load by removing the shifting assets from the main body of the page.
%
More Focus on Buy Button
%
Increase in Product Imagery Focus
Initial Assessment
Product pages for Hydrojug were structured in a way that somewhat violated Jakob’s Law (the tendency for users to develop an expectation of design conventions based on their cumulative experience from other websites.) Simply stated they didn’t look like the rest of the internets product pages. Elements on the page didn’t adhere to laws of visual hierarchy and the moving images distracted the eyes, increasing mental load and creating an overall frustrating experience for some users. Analysis using 3Ms VAS showed that the users gaze was constantly driven down to the social proof section, a rotating bar filled with user uploads of the product. More of the gaze was directed to that section than anything else. Additionally the product imagery and call to action had low likely hood of being seen on first glance.
Competitive Anaylsis
Before designing anything I typically begin with competitive analysis, many well established companies pour billions into research, money that I don’t have but I am glad that they have spent. Using 3M VAS software I scanned the product pages of Amazon, Walmart, Target, REI, HydroFlask, Yeti, Nalgene and RTIC. These product pages all had similar attributes but the Amazon page showed an intriguing pattern. Starting with the main product image the eye moves to secondary imagery followed by the product description and finally ending on the Call to Action. By reducing wear on the eyes and brain Amazon has optimized product pages for information absorbtion and reducing friction in the user journey.
Prototype
Since I had brand assets readily available I skipped the low-fideltiy phase and went straight to designing high-fidelity wireframes. I liked a few different iterations but ultimately I settled on a design that mimicked the pattern of Amazon. It’s hard to disagree with the amount of data that they have behind everything they build and my redesigned page took on the golden ratio-esque Amazon pattern.
1. Product Imagery→ 2.Secondary Imagery→3.Product Description→ 4.Call To Action/Purchase
With every iteration I ran it through the 3M VAS and finally got a pattern that matched the competive analysis.
Testing
After I finished the design I ran it through the 3M VAS software and I got the results shown below. 3M VAS Software shows what are known as “Hot Spots” these spots show “the content that is most likely to be seen within the 3-5 second first glance time period that is critical to bringing attention to your content.”
Points of Improvement:
44% more attention held on product imagery
20% more attention held on the call to action
85% hold on the new secondary product imagery
70% hold on product description, pricing and reviews.
The new design drew attention to the product description, the product imagery and the call to action. Perhaps most importantly the eye was no longer drawn to the user generated content that was constantly shifting and drawing attention away from everything else.
More Featured Projects
Benefit Tiles
Help me find “it”
Health Topics
Increased engagement and clarity