A UX case study. How do you take a mature product page, make it adaptable to users, and adjustable by business unit? Modularity.

1. +
Personal Product Page
How do you take a mature product page, make it adaptable to users, and
adjustable by business unit? Modularity.
Tom Elliott UX
+

2. The Task
Sears needed to redesign it’s product page to better serve the diverse needs of its 30 plus
business units.

3. Problem 1 - Traffic Jam Content
Page content competed to live ‘above the fold,’ creating an inconsistent mess.
page fold page fold

4. Problem 2 - Jigsaw Architecture
Page components all unique in size, shape & position - collectively resisting alteration.
components >
?missing condition

5. Is there more going on?
Past redesigns took forever to change little. Many blamed politics, but I saw an architecture
cause. Enterprise sites are complex machines, they must be built from standardized parts.
Think Legos
All Legos obey common rules.Legos are standard parts

6. Option 1, Optimization
Create a Product Page design for each business unit - serving the unique needs of their
different products.
the catch
Prohibitively expensive and
confusing to customers.

7. Option 2, Compromise
Go with the traditional approach - negotiate with business units to create a generally
acceptable product page.
the catch
Very time consuming and lowest
common denominator design.

8. Option 3, the winner
Create a modular product page that can adapt to different search contexts, product types,
and devices.
The challenge
Sears UX had little experience with
modular or responsive design.

9. Brainstorming
I created numerous sketches to explore the page’s adaptive architecture.

10. Early Prototype
I created several concepts, but the team settled on this one, its architecture based on the
new Sears bundles page.
View the prototype

11. User Testing
The team created a high-fidelity proof of concept. User testing measured 20 metrics with
200 test subjects. The page performed very well.

12. Components
Further work targeted key page components.
View the prototype View the prototype
Image Viewer
A component for showing multiple
product images and videos.
Function Rail
A sticky component containing
key functionality and content.

13. Final Design
View the page

14. Conclusion
Limited 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.

15. Don’t build cathedrals,
build skyscrapers.
Cathedrals were medieval skyscrapers,
but each stone was a unique element.
They took generations to complete.
Modern skyscrapers are mass-produced
from standard parts.
Lesson Learned
Notre Dame de Paris
build time: 100 years
Empire State Building
build time: 1.5 years