Go Back

Snapfish Digital Printing

Summary

We helped Snapfish revamp their customer experience for digital printing, from marketing through to product creation

Snapfish Digital Printing

What We Did

User Experience (UX) | Visual Design | Prototyping | Front-end Development | Back-end Integration

The Challenge

In 2014 Snapfish was still using a flash-based user interface (UI) for creation of photo products. We were challenged to re-design and develop a modern UI for photo product creation, including photo books, calendars and cards.

The Experience

0:00

Framework

Working in collaboration with the Snapfish team, we unified all Snapfish properties under the same framework to define a simplified taxonomy which would improve the shopping experience.

Particular attention was given to scalability and localization requirements, so we created a responsive framework which can adapt elegantly as the site grows or your viewport shrinks.

The result was a clean, well organized navigation system, which also helped enhance Snapfish’s new brand identity.

Snapfish Framework

Homepage

The homepage is most often the origin of a customer's journey, so we devoted particular attention to organize content in a clear and interesting way, allowing users to explore all the different entry points of the new Snapfish.com.

We used a modular system to help maintain a distinct hierarchy between the numerous content pieces that had to coexist on the page but, most importantly, we customized the experience to different user types. New users could learn about the benefits of the Snapfish products, while registered users could continue working on an existing project right from the homepage.

Browsing and Uploading Photos

Personal photos are at the core of each Snapfish product and can conceivably grow to thousands over a Snapfish customer’s lifetime. For this reason, we focused on designing an intuitive and functional layout when we tackled the Photo Library, which made browsing and uploading photos a breeze.

Selecting the right photo was a critical step for Snapfish customers. We designed a photo preview which allowed users to view and browse their albums without any clutter.

Snapfish Photo Preview
Snapfish Photo Browser

By 2014, most photos were shot with a camera phone. With this in mind, we crafted a mobile Photo Library which retained the functionality of the desktop version, so users could upload their favorite photos to Snapfish even on the go.

Creating Something Unique

Product creation is where the new Snapfish came to life. We designed a responsive and scalable framework, which adapted to multiple device resolutions and a variety of product builders to support creation on the go.

A touch-based interaction model based on progressive disclosure and contextual relevance allowed for a high number of editing tools to be surfaced by the users only when necessary and made creation a highly intuitive and addictive process.

Supporting a complete customer journey on mobile was not an easy task—we had to be clever in leveraging the touch based interface to hide and reveal functionality on smaller viewports.

We also had to lose some non-essential information, so we defined simple metaphors for our icons to be interpreted instantly by our users.

Snapfish on Devices
Snapfish on Mobile

The Styleguide

Interactive Styleguide

When building products like Snapfish.com and Product Builders, we make sure to create extensive documentation so extensions to the product can remain consistent to the original designs. We compiled an interactive styleguide which includes a variety of stylistic elements, for easy reference by the Snapfish team.

Iconography

We also designed a uniform set of icons as part of our stylistic exercise, which complemented Snapfish’s new brand identity. Each icon had to be carefully considered to clearly communicate its action, whether or not accompanied by a label.

Snapfish Styleguide
Snapfish Iconography

Client

Hewlett Packard