Overview
Instagram checkout was first launched in March 2019 with just 26 brands making up the original beta test group.
And now, Instagram checkout is going mainstream. Users can tap to view a product from a shoppable post and then continue to the payment process all within Instagram. However, to complete a checkout process, one needs to overcome some hurdles and obstacles such as the checkout process involving redundant maneuver, shopping cart lacking item information, no express checkout, etc. There are some areas we can improve upon and create a better user experience within.
•••
Pain Points
1. Adding Items to Cart is Limited, No Express Checkout
Instagram contents act as stimuli in evoking positive emotions, which subsequently trigger purchases. When laying eyes on something, many users tend to make impulsive purchases of their fresh-found favorites. However, there is no simplified channel for users to buy just one or two items instantly. Currently, customers need to go through 6 steps to complete shopping.
Add Item to Cart → View Cart → Select Cart →
Proceed to Checkout → Select Address & Payment →
Place Order
This process is discouraging for shoppers who only need a single item or two. When the window of opportunity is gone, shoppers may not return to the checkout process at all. Ideally, once the shipping address and payment method info has been entered, the shopping experience should just be one-click for any item/order. This is where the improvements can come in.
2. Without a Unified Cart, Instagram is Forcing Separate Carts to Checkout for each brand/shop
After selecting many items you love, you go to the shopping cart. Surprisingly, inside the shopping cart, items from different brands are listed separately without the total cost shown. To continue checkout or edit items, users need to access each individual brand page to perform additional 4–5 steps. even if you’re shipping to the same address, using the same card for payment the same process is required for the rest of the brands.
People often change their minds about purchasing a product or accidentally add an item to the shopping cart twice. It’s a major frustration for the customer who cannot see the total cost summary or conveniently make changes to the order on the shopping cart page.
•••
Research
To further confirm our pain point analysis and validate our assumptions, we did our comparison research of checkout UX design from 5 major online retailers in the US: Amazon, eBay, Etsy, Best Buy, and Walmart, which add to more than half of the U.S online market.
Our research suggests a few ways that can help users quickly pick up this new shopping section and potentially reduce the dropout rate.
1.Provide users the data they need to make an informed purchasing decision by providing the total order cost before seeking payment information.
2.Avoid forcing users to retype duplicate information by asking for the same information only once during checkout and by reusing that information when necessary.
3. Allow users to checkout their whole cart at once to save time.
•••
Proposed UX
Workflow Chart
The main purpose of making this workflow chart is to have a clear mind of how currently Instagram works step by step and how our input can take a place.
From PDP, we have two ways of checkout: regular and express checkout. From there, we have a logic gate of whether you have information saved in Facebook Pay. If yes, users will be lead to the final step. If not, the address and payment info will be needed before the final step.
Workflow Chart
Hi-Fi Wireframe as a reference for the app developer
1. Provide a Buy Now Option
Adopt existing patterns from industrial standards and add a one-click-checkout for a much quicker shopping experience. This one-click checkout process helps users save a lot of time, which can possibly reduce the dropout rate and motivates users to sign up for Facebook Pay
For users who already have payment info on file, One-click of a button, the checkout process is done. You can always edit the order later if you find some info is incorrect.
2. Provide a Unified Cart
Add a unified cart with item management features to increase shopping experience. Items are organized by brands on a single scroll page, which allows review and edit. Before heading to checkout, users can choose which items to purchase and which to save for later, with the order total instantly updated. This allows a single checkout to be completed with items from multiple brands/shops.
List all items on a unified page, allow users to easily uncheck/check items in their shopping cart with feedback in the subtotal and grand total cost.
Conclusion
When it comes to improving an existing App, it’s easier said than actually tackle the problem. Many pain points are rooted in corporate strategy rather than a simple UX/UI twist. During the design process, I try to understand Instagram’s trajectory at my best and did the most essential parts that most likely can make a difference.
The social media industry is evolving quite fast, as of Feb 2021, Instagram has added a Buy Now button to their PDP page. They also add a cart icon to the bottom navigation bar for easy access. Will they align with my other idea to fix their cart? We are looking forward to it.
This was a fun exercise for me. Hope you find the reading interesting or somewhat helpful.
Add’l Project Details
Timeline: Nov 2020 — Feb 2021
Roles: Jackie S Zhang (UX, UI, Animation)
Product/Service: Instagram App
Platform: iOS
Roles: Jackie S Zhang (UX, UI, Animation)
Product/Service: Instagram App
Platform: iOS
