project hero image

Smugmug Cart and Checkout Redesign

Smugmug 2017

Smugmug is a photo sharing and hosting platform that allows users to upload and then sell their images online in the form of physical prints, gifts and also digital downloads. We needed to redesign the Checkout process to allow for mobile visitors and our recent rebrand. Also to bring a better UX and IA to the entire flow.


Lead Product Designer


Product Design
Product Strategy
User Research
Design QA


Mark MacAskill, Product Manager
Chris O'Boyle, Designer
Andres Torres, Engineer
Iria Tam, Engineer
Chris O'Boyle, Research


Smugmug has been an industry leader in the photography space for over two decades. Their gallery and portfolio builder is used by millions of photographers. These photographers sell their photos on the Smugmug platform which has made them hundreds of millions of dollars. This market has caught the attention of competitors looking to cash in and innovate faster and at a larger scale, i.e. Flickr, 500px, Zenfolio, Squarespace,and more. Smugmug needed to revamp an aging checkout architecture both in the frontend and backend to keep their customers happy and their large market share.

Problems and goals

Problems we were trying to solve

  • Smugmug's eCommerce architecture was aging
  • Print sales revenue was declining YoY
  • Competitors had a more modern feature set
  • There was no mobile optimization and no app
  • The flow and form fields were cumbersome and caused some cart abandonment
  • User errors were due to an unclear cropping mechanism and costing us money fixing these errors.
"I can view the photos I had paid my photographer for, but it is such a pain to buy them on my phone. I want to be able to share them with family."
"I received my photo, but my daughters face got slightly cut off on the left when you printed it."

Project goals

  • Reverse the trend of declining print and gift sales.
  • Create a new responsive / mobile friendly UX + UI to increase checkout rates.
  • Update the UI to match the updated brand style

Strategy and kickoff

Design sprint whiteboard session

I worked with Mark MacAskill who is the Principle Product Manager for all things on the business side of Smugmug. We decided to focus on our desktop offering and mobile web responsive rather than creating a mobile app for this purpose. Our users are primarily on desktop, because who doesn't love to see their beautiful photos in the huge full resolution glory! We then did a presentation to the larger team to show our vision and where we would be tackling new UX, where there could be new UI, etc.



At this time, Smugmug did not have any user researchers or a lab or anything that would help with research. So rather than collaborating with one, I kicked off research myself. First I did a deep dive into our current eCommerce architecture and see where I could optimize things. Some sources that I looked at are; our D-Grin support forums, and spoke with our customer service support heroes about some of the common questions and support requests surrounding the cart and checkout experience.  It was clear that the styling was based off of the previous company branding and style guide. I would be updating the styling to the new brand style guide that I helped define and create just a couple months prior. Project coming here soon. Additionally, looking at the old designs, I could see some places I could optimize including different features, button sets, and text sizes. The old design was apparently done by a family friend who was a developer and unfortunately didn't take into consideration some fundamental user experience rules and patterns. Some features were either hard to find, or took you out of the checkout flow completely. Last but not least, this wasn't mobile friendly at all. Time to come into the age of the smart phone.

Original smugmug screens


I took a look around the web at some of the most successful companies and their cart + checkout flows. This included some heavy hitters such as Apple, Amazon, Zappos, and some eCommerce sites built with Shopify. This allowed me to gain some insight on current patterns, and see how each one approached the user experience differently, taking into consideration their demographic and user needs.

Benchmarking screenshots

Workshop / Training

To gain further knowledge, I  attended a two day conference and intensive workshop on how to optimize a checkout flow put on by the Baymard Institude/Smashing Magazine. This was incredibly valuable for me to understand the latest research and some of the pitfalls even large multi billion dollar companies fall victim to and how to avoid those mistakes to increase conversions.

workshop photo

Some key insights applicable to our situation

  • There are multiple types of checkout screens. One step, Multi step and Accordion.
  • Each one has it's own pro's and cons.
  • The number of fields can be reduced to as little as 7. This speeds up the process and causes less friction
  • Multi step is most common , and converts the best. Four Smugmug, this was probably the best option because we had several things that could not be completed until a previous action was completed.

Wireframing and concepts

Since we already had a desktop offering, I wanted to start with Mobile so we could at least start accommodating some of our mobile-only users. I stripped everything out and started fresh. With the bare essentials taken care of, I could then add in additional features as needed. The goal was to keep this clean and simple on a mobile device.

Initial concepts

Mobile conceptsCart review screen

Testing / Feedback gathering

After showing these screens to stake holders, I learned a something extremely valuable and that had to do with our cropping function. We were getting lots of customer support tickets with unhappy customers stating the print they received didn't match what they saw online in terms of the composition. This was due to a cropping error, unfortunately done by the customer during the checkout process. To reduce these errors, I created a much more robust cropping tool, and although it created an extra step for the user, it was deliberate because I wanted to slow the users down and reduce errors. (We would always reprint these for customers for free, which was costing us money.) After a user cropped their image to their intended composition, I showed ONLY the cropped version in the cart, which made it more clear what would be printed. Users stated that if they could see the "cropped" parts, even greyed out, they assumed they would be printed. Great insight.

crop feature screenshotCropped feature update


Over the next several weeks, I made many revisions with feedback from stakeholders, more user testing and development restrictions. Some of the changes I've outlined below, but you can see the drastic differences in the final screens below. I've also included some of the edge cases and details such as how adding a coupon works.

  • Add dedicated “remove” button on mobile. (Replacing the trash icon on a 0 quantity)
  • Make button text dynamic based on actions available.
  • Add sticky elements such as the next step so a user can quickly find it without scrolling around.
  • Simplify the running total area.
  • Reduction of image size preview on mobile for large carts. (Tapping would open lightbox)

Learnings and results

About 6 months after the project began, we shipped it live, and what a difference it’s made. In 6 short months after shipping, we went from a declining physical prints business, to a positive growth! Measurable Success!

Icon explorations

What did we learn?

  • There were many edge cases that needed to be accounted for, especially regarding international customers.
  • Users wanted the entire experience to be customizable similar to their site design.
  • Some users has security concerns with a Smugmug branded checkout experience.
  • Other users had security concerns with a NON Smugmug branded checkout experience (white labeled checkout)

Changes we made

  • We added an algorithm that helped style the checkout experience more closely to the professional photographers website style, but still presenting the Smugmug brand. This allowed customers to know our security was behind the cart and checkout and not just the photographer.
  • This helped build trust and increased conversion rates.

Results and metrics

  • Went from a declining print business to a positive 7% growth YoY.
  • Fully responsive mobile and tablet experience
  • Conversion rates increased 8%
  • 7% decrease of abandoned carts.
  • Average order size increased from 1.6 itemsto 2.4 items


A selection of screens that were shipped. Enjoy!

Mobile screensShopping cart screenShipping pageError messagesReview screenThank you pageCoupon statesSignposts style guide

Previous Project

Next Project

Yahoo: Follow an Entity Project

View case study
Yahoo follow project thumb

Freshfeed Mobile App

View case study
Freshfeed image

Next Project

Yahoo Follow

View case study
Yahoo follow project thumb

Previous Project

Freshfeed Mobile App

View case study
Freshfeed project thumbnail
Contact me avatar
Want to work together?

Let’s get in touch!