Narrative

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.

Strategy and kickoff

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.

Benchmarking

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.

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.

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.

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

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.

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)

Deliverables

A selection of screens that were shipped. Enjoy!