PROJECT
Diapers.com Product Detail Page - iOS
SUMMARY
Redesign the UI for the Product Detail Page (PDP) - The most important page on Quidsi's e-commerce iOS app.
ISSUE
Quidi's PDP for iOS is a highly functional screen that sees a steady 15% conversion from its best customers. The problem with the PDP is an antiquated and "heavy" UI that presented a great opportunity for higher interactions and conversion.
The old PDP has a high cognitive load issue. Here are some issues I looked to address:
• Heavy banded graphics
• Monotone color scheme minus strong differentiation for calls to action
• Disconnected experience in styles and interaction
• Simply too much info for users to process.
The iOS screen worked, but I wanted to design it to work better while providing a contemporary look/feel and a relative feel to other parts of the native iOS app.
SOLUTION
The project would reach across key departments (Strategy, Buying, Tech, Product, UX) to form a working group and align redesign goals.
The result was to design a single PDP using conditional, modular content. I looked to update the following items:
• Modernize the UI & remove unnecessary graphic elements
• Establish a strong color style for specific actions (pricing, offers, itep options)
• Improve display with a solid digital font (San Francisco) and increase font sizes for key info
• Create a global hierarchy with Add to Cart becoming much more prominent and always visible
The goal was aimed at providing users a clean, intuitive screen to interact with and business teams with the best merchandising experience possible.
PLATFORMS
iOS Apps
ROLES
Research & Analysis
UX & UI Design
Prototyping
Spec & Documentation
TOOLS
Wipeboarding
Sketch
InVision
Flinto
Amazon Wiki
BEFORE & AFTER
WORKING GROUP SKETCHES
Before jumping into Sketch for digital UI, the PDP Working Group aligned on screen goals and content hierarchy.
PDP Working Group alignment on content hierarchy for screen display
Wipeboard concepting session comparing Mweb to App screen functionality
Hand sketched wireframe of PDP hierarchy
Click images to enlarge
DISPLAY USE CASES
FULL CONTENT SCREEN
EARLY STAGE PROTOTYPE
CONCLUSION
The redesigned iOS PDP was well received within the working group and was approved for prototyping.
Upon completion of prototyping, a Customer Experience Bar Raiser (CXBR), was scheduled with a panel of 4 cross-departmental Quidsians to review my work. The CXBR provides an unbiased review of the project and prototype by non-stakeholders. This review usually signals the final step before delivery of specs to the dev team.
Unfortunately, the day before the CXBR, Quidsi announced it would be closing its doors and all projects effectively over. It wasn't the news I or my team wanted to hear, but I know we approached this project with focus and passion. We were mere steps away from putting this on front of our biggest critics - Our customers!
Until next time PDP...
