Responsive Quickview
User interface and responsive design update to the Abercrombie & Fitch and Hollister quickview modals
Quickview Modal
Users have expressed a desire to see larger images before committing to leave the product category page to go to the full product page. The quickview modal allows users to shop a product without going to the full product page.
Stacy’s Role
Lead UX and UI Designer
Collaborated with development to create the experience
Process
Unfortunately, I am unable to share the wireframes, design iterations, testing methodologies, user and AB testing details that accompanied this project because of Non-Discloser Agreements.
Please reach out to me at scarsondesign@gmail.com; I would love to chat about my process, testing experience, and more about this project in detail.
Responsive Design
A high-level view of how the quickview design adapts to different breakpoints
Design Solution
The design solution must accommodate all types of products, from jeans with up to 30 different sizes, to accessories with only one size available. By adding a scrollable right rail, products with many sizes no longer extend the modal far past the product image.
Above, an example of a product with minimal content.
Above, an example of a product with lots of content and sizes. The design stays clean and unbroken, letting the user scroll the right column for more product information.
Abercrombie & Fitch and Hollister Co:
Old v. Update
Left: old quickview modal
Right: updated quickview modal
