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
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.
"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."
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.
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.
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.
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.
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.
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.
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!