personal product page
TRANSCRIPT
Personal Product PageHow do you take a mature product page, make it adaptable to users, and
adjustable by business unit? Modularity.
TomElliottdesign
+
The TaskSears needed to redesign it’s PDP (product detail page) to better serve the diverse needs of its 30 plus business units.
The ProblemTraffic Jam Content - Page content competed to live ‘above the fold,’ creating an inconsistent mess.
page fold page fold
The ProblemJigsaw Architecture - Page’s components all unique in size, shape & position - resisting alteration.
?
components >
missing condition
Is there more going on?Past product page redesigns had taken forever and changed little. While politics were blamed, I saw an architecture cause. Enterprise sites are like complex machines, they must be built from standardized parts.
Legos are standard parts. All Legos obey common rules.
Think Legos
Option 1, OptimizationWe could create numerous Product Page designs, one for each business unit, to serve the unique needs of their different products.
Prohibitively expensive and confusing to customers.
The catch
Option 2, CompromiseWe could go with the traditional approach - negotiate with business units to create a generally acceptable product page.
Very time consuming and lowest common denominator design.
The catch
Option 3, the winnerCreate a modular product page that can adapt to different search contexts, product types, and devices.
Sears UX had little experience with modular or responsive design.
The challenge
Early PrototypeI created several concepts, but the team ultimately settled on this one, its architecture based on the new Sears bundles page.
View the prototype
User TestingThe team created a high-fidelity proof of concept. User testing measured 20 metrics with 200 test subjects. The page performed very well.
ComponentsFurther work targeted key page components.
Image ViewerA component for showing multiple product images and videos.
Function RailA sticky component containing
key functionality and content.
View the prototype View the prototype
Final Design
View the page
ConclusionLimited rollout to the site was underway when I left, but initial performance showed the new page significantly improved user engagement.
22%reduced
Product Page Bounce rate
Moreover, the ground-up redesign took no longer than past incremental improvements.
Lesson Learned
Don’t build cathedrals, build skyscrapers.Cathedrals were the skyscrapers of the middle ages, but each stone was a unique element. They took generations to complete. Skyscrapers are modular, mass-produced from standard parts.
Notre Dame de Paris build time: 100 years
Empire State Building build time: 1.5 years