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.
With increasing mobile users, Snapfish retail is looking to expand their product line in the native app by introducing Photo Books.
Native Mobile App (iOS and Android)
Responsible for research, strategy, and design.
Worked closely with Stakeholder, Product Manager, Engineers, Researcher, and Content.
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.
Part of my early research is taking a closer look at the current desktop experience and identify key moments in the creation process.
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.
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.
As I've mentioned with design transition between pages, this allows the user to review their photo book in full view.
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.
In part of building my case was to explore the current market and learn from competitors their logic of approach.
Simple Prints App
Many of the apps in the same market follows the same flow of choosing your photos before diving into the project.
Uploaded photos are automatically placed by selection order. Adding more photos requires tapping into an empty page to prompt upload.
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.
Page background option comes in varieties of colors, patterns and themes
Shutterfly App
As I mentioned, most projects starts with the photo upload.
Spread view and photos are shown at default. As a guide, orange line above photos indicating that it exist on the current pages.
Full page view is another option when editting, and a great way to preview the project.
Tapping into an existing page prompts photo scale editting.
In part of building my case was to explore the current market and learn from competitors their logic of approach.
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.
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:
Wireframes
Customer shops for book style and size in the Photo Book category.
The customer selects 20 required photos to start their Photo Book project. CTA disabled unti fulfilled.
An overlay guiding users in screens and tools they'll come across in creating their book.
The 20 photos in the order they were selected are prepopulated on the pages of the book.
One of the 3 main (MVP) features on edit is Photos. Users can add to their selection, swap photos, or sort selection.
Another edit feature is Layout. Users have the ability to choose from a varierty of different layouts
The third feature is Colors. Users have the option to apply different types of color in the pages background.
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.
Concept 2: Alt Direction
Design Approach:
Wireframes
Customer shops for book style and size in the Photo Book category.
The customer selects 20 required photos to start their Photo Book project. CTA disabled unti fulfilled.
An overlay guiding users in screens and tools they'll come across in creating their book.
Edit focuses on the page while other pages dimmed in the back. Intent is to design in continuity.
Photo edit is accessed from the toolbar, appearing from the bottom of the screen, sliding up.
Layout options also part of the toolbar, sliding from the bottom of the screen.
Colors follows the same behavior like the other tools. Sorting allows users to sort by style, patterns, and solid.
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.
A few positive reviews from our customers.