PROJECT
Diapers.com Product Detail Page - Web
SUMMARY
Redesign the UX and UI for the Product Detail Page (PDP) - The most important page on Quidsi's e-commerce website.
ISSUE
Quidsi’s PDP for Desktop Web has been around for a while. The PDP was designed as multiple template pages addressing various category use cases. Such as: Single Items, Double Attribute Items, Cosmetics, Grouped Items, etc.
There were individually coded pages for EACH of Quidsi’s original 10 website properties. Meaning upwards of over 60 individually built pages to manage. Not to mention, each template was manually selected. Some products displayed different on one site vs. another depending on who set it up.
The PDP has gone through minimal changes since it’s birth. Aside from repositioning of content and some style updates, the page has remained as is. Thus, the look fell behind contemporary website design and was not maximizing space to the best of its ability.
SOLUTION
I assumed UX design lead duties following the departure of UX teammate. His design proposals did not get approved for dev, but his concepts & research were a solid foundation for me to pick up the baton and push forward.
I worked closely with Quidsi Tech & Retail team leads to list priorities and goals. We aligned on several key fronts to include:
• Create a single template page with conditions for display
• Modernize the page for fluid content
• Optimize the attribute election process by category
• Encourage page scrolling for secondary content
• Work with Tech and Catalog teams for data integrity
PLATFORMS
Desktop Web
ROLES
Research & Analysis
UX & UI Design
Prototyping
Spec & Documentation
TOOLS
Wipeboard
Fireworks
Sketch
InVision
Click images to enlarge
DESKTOP MOCK-UP
Test PDP mock-up added to new Diapers.com header and site nav bar.
WORKING GROUP
The PDP Working Group alignment on category use cases and content priorities
PDP Working Group alignment on category use cases and prioritization for redesign
Outlining the existing PDP content and wireframing primary areas to consider for redesign
Reviewing competitor websites within related markets to benchmark & consider in design
WIREFRAMES
Laying out the content boxes for Responsive page breaks at 990, 1280 and 1500 px.
DISPLAY EXPLORATIONS
Exploring helps you find things. This exploration was all about helping our Retail teams discover the best way to merchandise their product categories.
DESIGN COMPS
Before & After design comps for the 5 use cases I focused on: Diapers, Clothing, Shoes, Food & Gear.
CONCLUSION
The redesigned iOS PDP was well received within the working group and in multiple presentations to Leadership.
However, due to resource constraints and prioritization of Amazon Stack development in late 2014, the PDP project was put on "pause" slated for a revisit at a future time. The integration onto the Amazon Stack would not free up until Q3 of 2016. The project was resumed, but now focused on iOS app UI improvements.
Please see the Detail Page - iOS project for more information.
