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

BrainstormingI created numerous sketches to explore the page’s adaptive architecture.

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