Improvements based on user testing and functionality results


User Testing

1. The layer of different section will be changed. For example, the caption goes above the overlay section, making people feel confused about the relationship between the caption and the overlay content.

overlay1
Food Collection under "Every Picture" section.
overlay2
Header for "Game of Pig" project.

The caption goes above the header also seems a little weird.

header1
Header and caption before.
header2
Header and caption after.


2. User testing result shows that the overlay content is stretched on smaller screen.

stretched
Stretched photo inside overlay.


3. The header can be more consistent to the other projects. The font weight is a little thick to identify.

foodie1
Food Collection under "Every Picture" section.
game of pig
Header for "Game of Pig" project.

Functionality

4. By clicking any images, user should be able to go out by not only clicking the close button, but also any shadow area.

close button
Overlay close button.


5. OPTIONAL CHANGES:
1. When users scroll down the page, the first text scrolls out of the screen, and the second one doesn't follow, making people feel confused about the captions. The caption should provide an overall introduction to the zoomed photos.
2. Add smooth animation while clicking the images.
3. Making better layout for long description text inside overlay.