About this project

SmugMug is subscription based service where photographers upload, organize, and show off their photos. In 2013, we worked on a complete overhaul of SmugMug’s flagship product, internally called “SmugMug Next,” and added new tools for photographers to make their photo galleries look great, including a full portfolio site builder and full site design templates. These products are still in use today and set the foundation for SmugMug’s growth, eventually allowing them to acquire Flickr in 2018.

My role

I was responsible for the visual design of many of SmugMug’s site design templates still in use today. While this was primarily a visual design exercise on my part, it required careful consideration of SmugMug’s content ecosystem.

Choosing a SmugMug site design

Before getting into the designs I created, I’d like to give a little background on how site designs work. SmugMug site designs are how customers show off their photos. A customer starts their SmugMug experience by choosing their site design template, but can always choose a new one later:

What’s included?

Out of the box, a SmugMug site design template will come with:

1. Homepage - shows either photos, galleries, folders, or a combination of each depending on the particular design a customer chooses

2. Browse Page - because not all homepage designs fully reflect a customer’s content tree, this page was added as an easy way to see all of a customers galleries and folders in one place

3. Gallery Pages - galleries only ever contain photos and adjacent actions (buy photos, view slideshow)

4. Folder Pages - folders only ever contain galleries or other folders

Here’s an example of what a customer’s content tree might look like, showing both folders and galleries, and how that might translate into a SmugMug site design:

SmugMug’s versatile photo tile display

The new SmugMug site design templates had to be fully aware of all the different ways customers can display photo tiles on their sites. I’ve listed some of the options and put together an animation to illustrate some of these variations that needed to be considered for each site design template:

Visual design examples

Now that I’ve illustrated some of the requirements I was working with, I’ll share a few examples of my designs. Some of the base templates shown below are still available in the product today and used by many customers. A couple examples toward the end are more forward thinking design explorations that I created to cater toward SmugMug’s professional photographer community, but that weren’t implemented before I left the company.