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."
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.
Native Mobile App (iOS and Android)
Responsible for research, strategy, and design.
Worked alongside Product Managers, Engineers, Marketing, and Content.
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.
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."
Continuing to shipping address. The CTA is disabled until an address is provided, required for the next screen.
I have three delivery price options with estimated delivery dates. A selection automatically adds to the order subtotal.
Two ways to navigate in the buy flow, through the back link of each screen or a pulldown nav allowing you to jump screens.
Credit card info required as a payment method in the Payment screen.
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.
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
As part of the global nav, the customer is able to navigate in and out of their cart as they continue to shop.
Customer is able to review, edit, and continue to checkout when ready to purchase.
Order details preview and compartments of shipping address, delivery, payments and gift card promos.
Each checkout component is separated by each dedicated screen like Shipping Address.
Amazon App
Part of the global nav for an easy access throughout the journey.
Details all items in the cart to review, edit and proceed to checkout.
High level details and all checkout requirements done on the same screen.
Checkout requirements are fulfilled on the same screen. Delivery options are selected at the checkout screen.
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.
I put together design goals to help focus my efforts in addressing these concerns.
Here's a simple frame structure that provides high level preview of main features in usability.
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
Users have access to cart in certain areas like home screen, while shopping or browsing through photos.
An empty cart notification appears on an empty cart or when users aren't logged in to their account.
Providing an overview summary of the users checkout status. Each component is accessed through the drawer going into detailed view.
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
Pros and Cons
Concept 2: Userflow
Adopting the drop-down usability approach to preview order details, and make edits, while remaining on the same screen.
Wireframes
Amongst the most accessed sections of the app. Access to cart is within the global nav along with access to Shop and Photos.
When an empty cart is accessed, a modal appears prompting users to either shop or close the window.
An expanded cart with multiple items at checkout.
An expanded shipping Address shown with address options.
Pros and Cons
We conducted User Testing to 10 participants.
Here's what they had to say...
Prototype
Some interesting comments from our testing.
Prototype
Comments taken from this group of testers.
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.
After a slow rollout, drumroll please...
A few positive reviews from our customers after release.