Checkout page design examples

Koto juices up the branding for checkout platform Bolt

“You don’t need to be bland to feel trustworthy,” says creative director Arthur Foliard of the brand’s new fluoro-coloured identity

The Checkout 2022

FWA of the day 08 January 2023: The Checkout 2022 Project Link The Checkout 2022 is Klarna’s global, annual summary of the year through the lens of our purchases. #FOTD #thefwa

Instagram’s In-App Checkout Feature

Some 23 brands—including Nike, Adidas and Warby Parker—are testing a closed beta version of Instagram with an in-app point of sale. A big, blue “Checkout on Instagram” button will indicate when a product is available. Pre-stored payment information, done through Facebook, will then allow for much quicker purchasing. It’s the latest shopping feature rolling out from the app, and more developments are expected. Read more …

From the Desk: Designing for cart changes on checkout

🛒 How we reduced friction for users in the checkout process by handling cart changes gracefully.RoleUser Experience Designer and ResearcherCollaboratorsHaziq Mir — Head of DesignPranay Merchant — Product ManagerTimeline2–3 weeksAbbreviations usedOOS* — Out of Stock SKU* — Item Unit MOV* — Minimum Order ValueIt all started when…We started receiving feedback from our external users(LinkedIn, AppStore, etc) as well as from internal users (Slack) about how Dunzo’s handling of OOS items on checkout is confusing and a total mess!Snapshots of feedback we got from folks from social media and internallyThe problem statement…Due to a high number of out-of-stock sessions (around 15%) and unintuitive handling of the scenario, users are often dropping off at the cart due to dissatisfaction with the overall experience. This is also creating a negative impact on our brand due to the issue surfacing on social media.And a few constraints…With current tech limitations changes made on any page other than checkout are out of scopeUse of existing widgets as strictly as possibleWith current tech limitations, we cannot reduce the number of OOS sessions for a user (operational)Reservation ideology out of scope (operational)Example illustrating reservation ideologyBreaking down the facts —Total Out-of-stock cases (15% of total CP sessions), out of which —80% of sessions have some item(s) OOS,10% of sessions have all items OOS, and7% of sessions have a change in item quantity.Understanding the pain points 😫Communication is confusing — pointed out by many users.The user is still shown the bill with the delivery fee and stuff even when all items are out of stock; the user has no clear way to proceed.The permanent OOS msg box takes up an unnecessary significant space on CP.In the case of a change in item quantity, the user is blocked from continuing to pay without knowing why.Goals 🥅How might we ensure an intuitive experience for users facing stock scenarios with their cart item(s) on checkoutHow might we fulfill user needs so that they can contently place an order even after an out-of-stock scenario?How might we ensure clear communication so that the user can make an informed decision?We want to fix a broken UX loop, but there is no clear metric that this improvement would impact.AssumptionThe user is willing to place an order with the given changes in the cart.Based on the assumption outlined above, below is the flow for changes happening on the cart.Brainstorming on scenarios…We sorted the issues based on their occurrences and the level of hindrance to the overall checkout experience.Brainstorming high-level solutions for all use cases.Brainstorming high-level solutions for item out-of-stock use cases.We are going to focus on the below scenarios one by one —Some items are out of stockAll items out of stockChange in item quantityScenario 1 👉 Some item(s) out of stockExisting design & pain pointsKey focus elements💡 Insight: Some of our users have contacted customer support to report that they did not notice items were out of stock before placing an order but only realized after receiving it.Has the user acknowledged the change?Do we need to make users acknowledge the above fact forcefully? — Yes.Once acknowledged, can the user move forward intuitively?Ideating on solution approachesThere were two directions explored in which rapid prototyping was done —created at very early stage, do overlook irregularities in designs (if any) 🙈Both iterations had their pros and cons, with the major decision point being —In approach 1, a blocker would act as a possible hindrance to user flow however makes sure that the user acknowledges the change, whileIn approach 2, if we don’t block users, there is a considerable chance of the user missing out on the change — resulting in breaking the trust in the brand itselfAfter considering several factors, including user feedback from customer support and current industry practices. We decided to move forward with iteration 1, choosing the lesser of two evils.removing individual out-of-stock itemremoving all out-of-stock itemsScenario 2 👉 All items are out of stockExisting design & pain pointsKey focus elementsIs the communication intuitive and upfront?Does the user know what to do next?Are we making sure that the user acknowledges the change?Opportunitiesrecommend items on checkout based on OOS items and purchase history — can dore-direct users to the home page — can doget users notification permission to notify them about stock items — not in scopeFinal designsclearing cart with all out-of-stock itemsScenario 3 👉 Change in item quantityExisting design & pain pointsKey focus elementsIs the communication intuitive and upfront?Make sure to not over-communicateDoes the user know what to do next?Are we making sure that the user acknowledges the change?Final designsIdeas that could not make it 💔👉 Out-of-stock item recommendationsThe idea is that instead of reminiscing about an item that went out of stock, the user can add a suggested replacement (similar to the item) to their cart.👉 Notify users when an item is back in stockTrade-offsWith current tech limitations, we cannot suggest a replacement for an OOS item.Notify about items back in stock as a feature requires separate logic and timeline to be built, hence can’t be covered with this projectEnding notes 🌸We want to fix a broken UX loop, but there is no clear metric that this improvement would impact. However, with the release of this project, the number of complaints from users regarding OOS handling has become negligible.Highlighting the fact that we actively listen to our users and constantly strive to meet their needs :)That’s it, folks! For those who made it till here…https://medium.com/media/79194be57734de0c523503e7e6da9384/hrefWant to discuss more? Let’s chat about anything and everything — Say hi on Twitter or Linkedin 👋Designing for cart changes on checkout was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Tictail Checkout by Petter

Tictail Checkout by Petter Nilsson inspiration ux payment ui ecommerce

Checkout and Membership

Ecommerce app membership plan page and checkout page design... Checkout the Behance Case study: https://www.behance.net/gallery/76243153/Pigi-App-Case-Study Hope you like this. Feel free to share your views on this. Have an awesome idea? We will provide a quick analysis and free proposal for it. Don’t worry, it is secure and confidential. Contact us on http://www.mindinventory.com/inquiry.php Or sales@mindinventory.com

Food delivery - checkout

This is a food delivery application which we started working on during the lockdown with one of my dev. friend. It's a personal project which is still in development, but right now it's on hold, so let us know what do you think. Stay tuned for more, Cheers!