Montage-FullScreen-CoverMontage-FullScreen-Cover

Effortless photo books, made with love.

I joined Mixbook in 2013 to work on, and ultimately lead, design for Montage, their newest product. My involvement ranged from defining brand direction, animation principles and visual design to directing photography and streamlining the implementation processes.

overview2overview2

The Mission

Montage allows customers to create a substantial book in a single session of 15-30 minutes. To achieve this, we looked at how customers were using our other products.

Mixbook customers on average spend 5 hours and multiple sessions editing a book before purchase. Offering a large number of editing options, Mixbook instills in its customers a huge sense of ownership over the final product.

Conversely, Mosaic focuses on single-session purchases and offers a simple experience, affording the minimum amount of editing required to feel involved.

Montage sits between Mixbook and Mosaic, offering the fewest editing options possible while still creating a sense of ownership.

Creating a captivating landing page.

Our pre-launch landing page was lacking some essential information, leaving visitors with questions and uncertainty around the product. What started as a small SEM landing page turned into a full re-vamp after a weekend sprint and presentation to the team.

The App

A small peek into some of the many screens that make up the Montage app. For a proper look, visit: www.montagebook.com

EditorEditor

Problems & Solutions

Below are a few examples of some of the more challenging, fun and interesting problems solved while creating Montage.

Communicating when photo has been scaled beyond its maximum size.

Montage allows users to tweak and edit their books once the magical auto-layout has done its work. One part of this is panning and zooming individual images. We needed a way to communicate to users when they've scaled up an image too much.

The decision was made early on to prevent users from scaling an image to the point it would no longer print well. We also had to consider that an image might be able to scale 4x in a small photo slot but only 1.3x when covering a whole page.

The final solution was to allow the user to scale beyond the limit dictated by the image resolution, but to exaggerate the pixelation once this threshold is passed, emphasizing the error and ensuring the user understands why the image can't be scaled further.

To avoid having to show a negative error message we added a nice little rebound back to the photo's maximum size.

Catering for a broad range of technical knowledge.

Through live chat, customer feedback, and mouse-tracking we found that our audience was split — the majority was flying through the creation process, discovering each feature as we had intended while others were frozen, hesitant to explore at all, some even asking for guided steps or going straight to our live chat.

Although live chat was often able to resolve issues for customers, it was a stressful solution for them and a resource-intensive one for the company. Instead, we wanted to turn any user into an expert in minutes.

The solution was to create stepped escalation, introducing  a tutorial screen with short videos showing how to do important or commonly missed actions.

Allowing the escalation to live chat only from this screen had two major benefits: first, most customers felt positive that they could solve their issues without outside input, that they were learning, and second, we significantly reduced the workload of our support staff.

Improving checkout conversions.

A few weeks after launch, I went back through the app and looked for areas where we could significantly bump up conversions. Our checkout process offered a few opportunities.

Product Photography We started with a flat view of the users cover pulled directly from the editor. While it offered a last view of the product before purchase, it was somewhat lacking. I took a few of the studio shots of the book, masked out the cover strip, added the lighting back in, and whipped up a quick CSS transform… voila! We now had "renders" of the customer's book from multiple angles.

Address Input The initial version had three fields: Name, Address, and ZIP. It was theoretically great to need so little information, but many users were left confused and less than confident in Montage.

The final solution was to ask only for Name and ZIP. With this, we could expand and auto-fill the City and State fields, leaving just the first line of the customer's address left to be entered.

Press Quotes

press-quotes2press-quotes2