optimized image quality
User Story
As a shopper, I want my pages to load quickly and the product images to be detailed and crisp.
As the brand, we want to decrease our yearly bandwidth costs.
image quality & purchase intent
goal
To understand how consumers perceive image quality with the intentions of delivering higher quality images (better color representation, less pixilation) while maintaining a cost sensitive image file size.
Hypothesis
Increasing an image by 1.5x times its in-browser requirement and decreasing its JPG quality to 40% will render an image that is of indistinguishable quality when compared to a 1x, 100% JPG quality image.
Team Structure
| My Roles | Supporting Roles |
|---|---|
| Lead UX Designer | e-Commerce Director: Corinne Suchy |
| Researcher | Executive Creative Director: Joanna Ewing |
| Analyst | Lead Photographer: Devyn Galindo |
| Strategist | Lead Engineer: Tom Knabe |
study requirements
Brand & Studio Approved Images
These images were chosen specifically for their range of content and color density and contextual variances.
Image Presets
| Base | 1.5x | 2x | |
|---|---|---|---|
| Image size | 2x3 ratio | 1.5x base | 2x base |
| JPG Quality | 87% | 40% | 25% |
Test Participants
Invitations were sent out at Urban Outfitters headquarters to cull image experts and laypeople alike.
Category Page & Image Zoom Views
We put together sumulated views of a category page and image zoom for participants to select which image they felt was the best quality.
The views included pagination between selections as well as a "Thank you for completion" screen which displayed live results of the study.
results
Feel free to download the analysis of our collected data if you're interested in the details. Study Results PDF.
In short > the results came out inconclusive. Participants could not discern a visual disparity between the 3 image presets. We concluded this as a success. After a close inspection of the images and the results, we were able to move forward with delivering a 1.5x, 40% JPG quality image preset.
Delivery Strategy
As a customer progresses deeper into their journey, provide larger and higher quality images. Higher quality images at appropriate touchpoints empower shoppers during the carting and purchasing decision making process.