Photography Viewing Experience - The Design Portfolio of Danny Zevallos — Product, Branding, Marketing - The Design Portfolio of Danny Zevallos

Photographers wish to showcase their photos as big and beautiful as possible. They want their photos to take center-stage with no clutter or distraction. They also want to give their visitors the ability to interact by leaving comments, downloading photos, buying prints and digital downloads, and enabling to share the photos through social media and other outlets. The SmugMug lightbox experience needed a complete redesign to meet these needs in an elegant way. The design had to be simple and versatile enough to accommodate any visual customization and provide flexibility to support numerous interaction configuration As an example, one photographer may want to allow visitors to buy photos but not allow downloads .

To better utilize the common widescreen 16:9 ratio in phones, monitors and laptops, the UI actions where placed to the left and right of the photo rather than overlaying the UI on the photo. Most photos are set at the photography standard 3:4 and 2:3, so this method allowed us to get the UI out of the way of the photo. At the same time, the visibility of the UI greatly increased from the previous overlay UI. Minimal and focused solution. The Buy Photo action is the only option that’s been given emphasis since most photographers want their customers to be aware when a photograph is available for purchase. Customers are given the option to customize the look and feel of the lightbox with color themes and type treatments.

To validate our choices based on existing feedback, data and metrics, and overall company goals, we ran several design iterations through in-person user testing sessions. After receiving user feedback, we were able to launch the new lightbox experience which generated increases in viewing engagement, more actions taken by the viewers, and greater print sales.

Fullscreen viewing experience displaying a standard 3:2 landscape photograph. Actions are places outside the photo to avoid clutter and distraction from the photography.

Standard 2:3 portrait photograph with desktop hover over icon and overflow action menu on mobile revealed. Most screens are 16:9 aspect ration and the new lightbox viewing experience takes advantage of the extra negative space to the left and right of the photo.

Upon interacting with the photo actions, a panel appears, displaying the photo's information. Greater attention to typography, balance, and the most important camera meta info, was taken into consideration.

The visual direction is simple with minimalist aesthetics, the focus remains on the photography.

We looked at the sharing data and put the most common sharing methods up front, while more complex sharing methods such as embedding options for blog posting, were put behind a "more" action.

An overview of the mobile lightbox experience.

Homepage template design where the background photo changes based on the primary navigation sections. For this example, the background photo cycles through fine art, fashion and portrait photos.

Photo gallery design showcasing the gallery cover photo, an optional description of the gallery, gallery actions and the gallery photos. Photographers usually share their photos with a direct gallery link rather than their homepage link. With that in mind, the design of the gallery needs to be able to stand on its own with the support of a homepage.