User Interface & User Experience Designer
QV Icon.png

Quickview


 

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

 
 
Responsive Diagram
 
 
 

 
 
 

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.

 
Quickview Minimal Content

Above, an example of a product with minimal content. 

Quickview ANF Jeans

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

 
 
Old ANF
NEW ANF
HCO old
HCO new