SNAPFISH RETAIL APP

Photo Book Builder

BACKGROUND

The Purpose.

With increasing mobile users, Snapfish retail is looking to expand their product line in the native app by introducing Photo Books.

PLATFORM

Native Mobile App (iOS and Android)

MY ROLE

Lead Product Designer.

Responsible for research, strategy, and design.

Worked closely with Stakeholder, Product Manager, Engineers, Researcher, and Content.

THE FRAMEWORK

Fitting into the System.

I took a deeper dive into the app's current framework / structure; discovering all products follow the same "Builder" model and sequence of flow.

Here's a userflow structure of the existing model for all products in the app.

Existing Builder Sample

Here's a builder sample of an Arctic Fleece in the same framework model.

All products in the app follow this same builder model.

THE DISCOVERY

Following the Footsteps.

Part of my early research is taking a closer look at the current desktop experience and identify key moments in the creation process.

Single Page View

This view offers good use of screen real estate when editting the page. Single page view would translate well in the mobile viewport because of its limited space.

Spread View: Photos

The spread view works well with design continuity from page to page. This is something to think about as an essential part of the book creation experience.

Full View: Layout

As I've mentioned with design transition between pages, this allows the user to review their photo book in full view.

Book Preview Page

This page is meant for the user to preview their design in the same experience they would scan a real book turning it page by page. Here, a decision is made, whether to finalize or continue editing their work.

Key takeaways: Understanding the fundamental needs that goes into designing a photo book is crucial when I start consolidating the experience fitting for mobile.

INSPIRATION

Learning from Competition.

In part of building my case was to explore the current market and learn from competitors their logic of approach.

Simple Prints App

Upload Photos

Many of the apps in the same market follows the same flow of choosing your photos before diving into the project.

Book Preview

Uploaded photos are automatically placed by selection order. Adding more photos requires tapping into an empty page to prompt upload.

Page Edit

Pages with existing photos can be editted by tapping into them. Edit features like adjust, background, enlarge, caption, shapes, layout, and delete are all part of the customization.

Edit: Backgrounds

Page background option comes in varieties of colors, patterns and themes

Shutterfly App

Upload Photos

As I mentioned, most projects starts with the photo upload.

Edit: Photo Selection

Spread view and photos are shown at default. As a guide, orange line above photos indicating that it exist on the current pages.

Edit: Layouts

Full page view is another option when editting, and a great way to preview the project.

Photo Scale Editting

Tapping into an existing page prompts photo scale editting.

Findings

Research Results.

In part of building my case was to explore the current market and learn from competitors their logic of approach.

DESIGN CHALLENGES

Odd One Out.

The Photo Book creation process isn't as simple as other products in the Snapfish app. The process involves multiple pages and key steps that define the overall experience.

Design Goals.

  1. Seamless transition
  2. User awareness of different states
  3. Consistent experience all across
  4. Freedom to choose and navigate without overwhelming
IDEATION

Design Exploration.

I started with numerous ideas in mind, and eventually narrowing it down to two that aligns the most with my goals.

I'll show my two concepts, the shipped product and alternative concept.

Concept 1: Shipped Product*

Design Approach:

  • Slight change in sequence of flow (Capture Key Steps)
  • Follows existing usability across all products when possible (Seamless Integration)
  • Ability to reference pages in Preview when editing (Essential Usability)

Wireframes

[1] Shop: Photo Books

Customer shops for book style and size in the Photo Book category.

[2] Upload Photos

The customer selects 20 required photos to start their Photo Book project. CTA disabled unti fulfilled.

[3] Onboarding Stage

An overlay guiding users in screens and tools they'll come across in creating their book.

[4] Initial Preview Screen

The 20 photos in the order they were selected are prepopulated on the pages of the book.

[5] Edit: Photos

One of the 3 main (MVP) features on edit is Photos. Users can add to their selection, swap photos, or sort selection.

[6] Edit: Layout

Another edit feature is Layout. Users have the ability to choose from a varierty of different layouts

[7] Edit: Colors

The third feature is Colors. Users have the option to apply different types of color in the pages background.

[8] Final Preview Screen

Every page edit returns back to preview to see the design. Users can either save their project or add to their cart to finalize.

Prototype

I've conducted a moderated AB user-testing between Concept 1 and my other concept using these prototypes.

Highlight Reviews

Creating a book was no different than making a card. Simple and easy!"

Norma

"Onboarding was straight-forward with well guided steps. I was done before I knew it."

Linda Alemar

Concept 2: Alt Direction

Design Approach:

  • Follows existing order of flow like all products (Seamless Integration)
  • Captures key steps during Photo Book creation
  • Ability to reference pages on Edit Mode (Essential Usability)
  • Innovate and create a new experience (Growth)

Wireframes

[1] Shop: Photo Books

Customer shops for book style and size in the Photo Book category.

[2] Upload Photos

The customer selects 20 required photos to start their Photo Book project. CTA disabled unti fulfilled.

[3] Onboarding Screens

An overlay guiding users in screens and tools they'll come across in creating their book.

[4] Initial Edit Screen

Edit focuses on the page while other pages dimmed in the back. Intent is to design in continuity.

[5] Edit: Photos

Photo edit is accessed from the toolbar, appearing from the bottom of the screen, sliding up.

[6] Edit: Layout

Layout options also part of the toolbar, sliding from the bottom of the screen.

[7] Edit: Colors

Colors follows the same behavior like the other tools. Sorting allows users to sort by style, patterns, and solid.

[8] Preview Overlay

Overlay preview gives a full view of the design with two options-- Save Project and/or Add to Cart.

Prototype

I presented my ALT Concept prototype as part of our AB user-testing.

Highlight Reviews

Different experience from what I'm used to. Nonetheless, it did the job I expected."

Elaine Banner

The gestures navigating around the studio took some learning, but I picked it up and got it done."

Pamela
THE IMPACT

Favorable Start.

Overall increase in orders (6 months)

Photo Book outperformed other products in the app (6months)

A few positive reviews from our customers.

---
"Creating a Photo Book is easy. It has all the photos from your phone to upload and use. Works perfectly for me."
---
"Easy to use, good quality photographs. Photo books make great Christmas or Birthday presents too"
---
"First time making a Photo Book and it was a breeze. All credit to the onboarding tips"
---
"It was so simple, I designed my book in less than 20 minutes!"