SNAPFISH RETAIL APP

Checkout Enhancements

BACKGROUND

The Demand.

The growing customers and orders in the retail app created a need for enhancements in the current checkout usability. The single-item model can no longer accomodate the growth in demand, resulting to poor usability and performance issues in the app.

PLATFORM

Native Mobile App (iOS and Android)

MY ROLE

Lead Designer.

Responsible for research, strategy, and design.

Worked alongside Product Managers, Engineers, Marketing, and Content.

THE DISCOVERY

Picking Up the Pieces.

I did an analysis of the current checkout journey in every step along the way. By doing so, it should help me highlight key areas in the checkout process.

Checkout Screens

My initial insights of every screen throughout the process of placing a 4x6 Prints order.

Cart

I landed on this screen after finalizing my 4x6 Prints. It seems to be a one way road with a single CTA, "Continue to Shipping."

Shipping Address

Continuing to shipping address. The CTA is disabled until an address is provided, required for the next screen.

Delivery Options

I have three delivery price options with estimated delivery dates. A selection automatically adds to the order subtotal.

Pulldown Navigation

Two ways to navigate in the buy flow, through the back link of each screen or a pulldown nav allowing you to jump screens.

Payment

Credit card info required as a payment method in the Payment screen.

Checkout

Checkout screen provides breakdown cost of my order. A "Place Order" CTA finalizes my 4x6 Prints transaction.

Experience Map

I put together an Experience Map from my 4x6 Prints shopping experience-- from shopping moment and throughout the buying process.

Scenario: I’m looking to purchase three items. I have limited time to shop and purchase three items using the single-item checkout system.

Expectations: Simple, fast, and easy.

INSPIRATION

Sizing the Competition.

Part of my research was to also investigate other apps in the market. Dissecting their approach and uncover the logic behind it, in hopes to later apply some of the same methodology in my approach.

Shutterfly App

Cart Access Points

As part of the global nav, the customer is able to navigate in and out of their cart as they continue to shop.

Cart

Customer is able to review, edit, and continue to checkout when ready to purchase.

Checkout

Order details preview and compartments of shipping address, delivery, payments and gift card promos.

Shipping Address

Each checkout component is separated by each dedicated screen like Shipping Address.

Amazon App

Cart Access Points

Part of the global nav for an easy access throughout the journey.

Cart

Details all items in the cart to review, edit and proceed to checkout.

Checkout

High level details and all checkout requirements done on the same screen.

Delivery Options

Checkout requirements are fulfilled on the same screen. Delivery options are selected at the checkout screen.

DESIGN CHALLENGES

Key Features.

My extensive research led me to discover some hurdles we'll across along the way. But, there's good news! The current framework already has some of the functionalities we can repurpose.

Key findings I've highlighted that we'll focus on.

  • Checkout userflow and structure to handle various types of entry points and destinations
  • Necessary cart access in areas of the shopping experience for a multi-item checkout system
  • The app would require to support a more robust e-commerce system than the previous model
  • Identify special cases in the experience that requires some level of notifcation

I put together design goals to help focus my efforts in addressing these concerns.

Design Goals.

  1. User awareness and expectations
  2. Consistent experience all across
  3. Straightforward paths in the experience
  4. Clear messaging along the journeyt
THE APPROACH

Features and Framework.

Here's a simple frame structure that provides high level preview of main features in usability.

IDEATION

Exploring the Idea.

After many design iterations later… I’ve narrowed it down to two solid concept. Each with their own advantages and drawbacks.

Concept 1: Userflow

Similar to Shutterfly's drawer type of navigation, checkout components are divided into their respective space.

Wireframes

Cart Access Points

Users have access to cart in certain areas like home screen, while shopping or browsing through photos.

Empty Cart Modal

An empty cart notification appears on an empty cart or when users aren't logged in to their account.

Checkout Hub

Providing an overview summary of the users checkout status. Each component is accessed through the drawer going into detailed view.

Checkout Drawer

In detailed view drawer-- users can review and edit, like their shopping cart for example. A back carut saves all edits and return back to checkout hub

Concept 1

Pros and Cons

+

  • Users are able to add multiple items to their checkout order.
  • Checkout hub gives users a quick summary of their order.
  • Detailed view in drawers keeps the user focused on the task.
  • Checkout hub and Detailed view provides a way for users to add more to their cart.

–

  • Not sure taking the users to their cart every item added is the ideal route.
  • Doesn't allow full view of each line item when reviewing the entire details of the order.

Concept 2: Userflow

Adopting the drop-down usability approach to preview order details, and make edits, while remaining on the same screen.

Wireframes

Cart Access Points

Amongst the most accessed sections of the app. Access to cart is within the global nav along with access to Shop and Photos.

Empty Cart Modal

When an empty cart is accessed, a modal appears prompting users to either shop or close the window.

Single Page Checkout

An expanded cart with multiple items at checkout.

Single Page Checkout

An expanded shipping Address shown with address options.

Concept 2

Pros and Cons

+

  • Great for referencing other pages
  • Able to navigate around the pages without having to go to preview
  • Overlay preview easily accessed and doesn't interfere with designing
  • Model allows for future expansion

–

  • Screen layout may feel cramped
  • Model doesn't follow existing app structure
VALIDATION

Comparative Testing.

We conducted User Testing to 10 participants.

Here's what they had to say...

Concept 1

Prototype

Some interesting comments from our testing.

"My order details are so much easier to understand"
★★★★☆

Sandra of Maryland

"Being able to return to my cart and add items is a huge upgrade"
★★★★★

Grandma from the Midwest
Concept 2

Prototype

Comments taken from this group of testers.

"I love seeing the details of my order all in one page"
★★★★☆

Mom of 5

"It has made my shopping easier"
★★★☆☆

Stay at home Mom
THE ROLLOUT

Slow Introduction.

At the end our research proved a single-page checkout is the ideal direction best suited for our customers needs moving forward.

Our strategy was to slowly roll it out and keeping a close eye on the impact at checkout.

THE OUTCOME

Rapid Growth.

After a slow rollout, drumroll please...

Increased items at checkout by 65%

Increased engagement throughout the app by 15%

Increased time spent on app by 20%

A few positive reviews from our customers after release.

---
"Great update! You have fixed my one gripe about the app.Now I can add multiple prints to my cart."
---
"So many great Prints to buy. Now I just have to get all my photos loaded up!"
---
"That is fantastic!!!!!! Prints means more right now! I will recommend Snapfish to my friends!"
---
"This is totally awesome! Thanks so much for adding this to the app!"
Previous Project Next Project