How to Design a Flow: Checkout Process (Part 2)

Zahra Afshar
Bootcamp
Published in
10 min readFeb 23, 2024
Online Shopping

In the continuation of How to Design a Flow: Checkout Process (Part 1) we are going into four more steps in the checkout process. In the previous section, we investigated Visual Storytelling Importance, How to Navigate to Checkout, How to Handle Errors, and How to streamline the Flow to have a frictionless purchase experience.

Let’s continue!

Step 5: Payment Variety — Catering to Diverse Preferences

In today’s diverse e-commerce landscape, customers come with a variety of payment preferences. Offering a limited selection simply means leaving money on the table.

Payment variety goes beyond just credit cards and debit cards. By providing a rich tapestry of options, you can cater to various customer demographics, shopping habits, and even security concerns. Here are 5 key considerations for incorporating payment variety into your checkout process:

1. Know Your Audience:

  • Demographics: Consider the age, location, and tech-savviness of your target audience. Younger generations may prefer digital wallets, while older demographics might lean towards traditional methods.
  • Shopping Habits: Impulse buyers might favor express checkout options like buy-now-pay-later solutions, while regular customers might benefit from loyalty programs linked to specific payment methods.

Example: Asos caters to a diverse audience with an impressive payment variety:

  • Traditional options: Credit/debit cards, Maestro, VISA Electron.
  • Digital wallets: Apple Pay, Google Pay, PayPal, Klarna.
  • International options: Klarna Sofort (Austria, Belgium, Germany, Netherlands), Alipay (China).

2. Offer Popular Choices:

  • Credit/debit cards: Still the dominant force, ensure you accept major brands like Visa, Mastercard, and American Express.
  • Digital wallets: Apple Pay, Google Pay, and PayPal offer secure and convenient one-click payment experiences.
  • Buy-now-pay-later (BNPL) solutions: Klarna, Affirm, and Afterpay enable customers to split payments into installments, appealing to budget-conscious buyers.

Example: Amazon provides a comprehensive list of popular payment options:

  • Credit/debit cards: Visa, Mastercard, American Express, Discover, Diner’s Club, JCB, UnionPay.
  • Digital wallets: Amazon Pay, Apple Pay, Google Pay, Samsung Pay.
  • BNPL: Affirm, Amazon Monthly Payments.

3. Consider Local Preferences:

  • Emerging markets: Integrate popular local payment methods like Alipay (China) or Boleto Bancário (Brazil).
  • Alternative currencies: Allow payments in select cryptocurrencies (e.g., Bitcoin) if relevant to your audience.

Example: SHEIN a fashion retailer with a global reach, offers localized payment options:

  • China: Alipay, WeChat Pay.
  • Brazil: Boleto Bancário.
  • Mexico: Oxxo cash payments.

4. Integrate Seamlessly:

  • Secure connections: Ensure PCI compliance and utilize HTTPS encryption for all payment methods.
  • Pre-fill saved information: Returning customers appreciate having their preferred payment method displayed at checkout.
  • Clear instructions: Provide easy-to-understand guides for any unfamiliar payment options.

Example: Zalando seamlessly integrates various payment methods:

  • Secure PCI compliance and HTTPS encryption.
  • Users can save preferred payment methods for future purchases.
  • Clear instructions are available for BNPL options like Klarna.

5. Monitor and Adapt:

  • Track usage trends: Monitor which payment methods are most popular and adjust your offerings accordingly.
  • Stay updated on emerging options: New digital wallets and payment services appear regularly, so stay informed and consider relevant additions.

Example: Nike is known for its responsiveness to payment trends:

  • They integrated Apple Pay shortly after its launch.
  • They offer crypto wallet payments through Coinbase in select regions.

Step 6: Security Sanctuary — Building Confidence and Peace of Mind

In the digital age, where customers entrust sensitive financial information online, building trust and security is paramount for any e-commerce store. The checkout process, where payment details are exchanged, becomes a critical touchpoint where customers need to feel safe and reassured. This is where the concept of a Security Sanctuary comes in — a set of measures that create a safe haven within your checkout process, fostering trust and ultimately driving conversions.

Here are 5 key elements to build a robust Security Sanctuary in your checkout:

1. Transparency is Key:

  • Display security protocols: Clearly showcase HTTPS encryption and relevant security badges like Verisign or McAfee.
  • Communicate data practices: Provide easily accessible privacy policies and terms and conditions detailing how customer data is collected, used, and protected.
  • Be upfront about fees: Avoid hidden costs or surprise fees, ensuring transparency throughout the checkout process.

Example: Asos demonstrates transparency through:

  • A prominent padlock icon and “https://” at the beginning of the URL, indicating secure connection.
  • Accessibility links to detailed privacy policies and terms and conditions.
  • Clear display of any applicable shipping or processing fees before payment confirmation.

2. Secure Payment Processing:

  • Partner with trusted providers: Use established payment processors with PCI compliance and robust security measures.
  • Offer multi-factor authentication: Implement options like two-factor authentication (2FA) for added security when processing sensitive information.
  • Regularly update security protocols: Stay vigilant about updates and patches for your payment processing systems to stay ahead of potential threats.

Example: Zalando prioritizes secure payment processing by:

  • Partnering with trusted providers like Adyen and PayPal.
  • Offering 2FA options for card payments.
  • Regularly updating their security systems and conducting penetration testing.

3. User Education and Support:

  • Explain security measures: Briefly explain the purpose of security badges and protocols in user-friendly language.
  • Offer readily available support: Provide multiple channels like FAQs, live chat, or email support for customers with questions or concerns about security.
  • Display customer testimonials: Showcase positive feedback about security practices to build trust and social proof.

Example: Warby Parker fosters trust through:

  • Simple explanations of their security badges and encryption protocols.
  • Live chat support readily available within the checkout process.
  • Customer testimonials highlighting their commitment to data security.

4. Address Fraudulent Activity:

  • Implement fraud detection systems: Utilize systems that identify and prevent fraudulent transactions based on suspicious activity patterns.
  • Offer secure storage options: Consider tokenization or similar methods to avoid storing sensitive card information directly on your servers.
  • Communicate clearly in case of breaches: If a security breach occurs, be transparent and proactive in informing affected customers and outlining remedial actions.

Example: Amazon takes fraud prevention seriously by:

  • Employing advanced fraud detection systems with machine learning.
  • Utilizing tokenization for secure storage of credit card information.
  • Publishing detailed information and support resources in case of security incidents.

5. Continuous Improvement:

  • Stay informed about evolving threats: Regularly educate yourself and your team about emerging cybersecurity threats and vulnerabilities.
  • Conduct security audits: Schedule regular audits by independent security specialists to identify and address potential weaknesses.
  • Seek customer feedback: Encourage customer feedback on their security concerns and perception of your security practices.

Example: Patagonia demonstrates continuous improvement by:

  • Investing in ongoing cybersecurity training for their team.
  • Conducting regular penetration testing and vulnerability assessments.
  • Actively soliciting customer feedback and incorporating it into their security strategies.

Step 7: Offer Help When Needed — Empowering Self-Service

E-commerce checkout journeys can be confusing, leading to abandoned carts and lost sales. But what if customers could get help right when they need it most? By offering personalized and timely assistance within the checkout process, you can empower them to navigate smoothly and complete their purchases confidently.

Here are 5 key ways to offer help when needed in your checkout process:

1. Contextual Support:

  • Real-time error messages: Provide specific and actionable messages alongside errors, guiding users towards solutions instead of leaving them confused.
  • Hover effects: Display additional information or FAQs when users hover over specific fields or buttons, offering proactive guidance.
  • Tooltips: Implement brief explanations or instructions next to complex fields or unfamiliar terminology, providing instant clarification.

Example: Warby Parker excels in contextual support:

  • Users entering an invalid address see a clear message prompting them to “double-check the city and state.”
  • Hovering over the “Lens fit guide” button reveals detailed information about choosing the right size.
  • Tooltips explain unfamiliar terms like “PD” within the prescription form.

2. Multiple Support Channels:

  • Live chat: Offer live chat support directly within the checkout page for immediate assistance with questions or concerns.
  • FAQs: Provide a readily accessible FAQ section within the checkout flow, addressing common queries about payment, shipping, and returns.
  • Phone support: Make phone support easily accessible for customers who prefer voice communication.

Example: Nike equips their checkout with diverse support options:

  • A live chat button opens a chat window directly on the checkout page.
  • A comprehensive FAQ section addresses various topics related to checkout, orders, and returns.
  • A phone number is prominently displayed for customers who prefer calling.

3. Proactive Suggestions:

  • Address autocomplete: Offer address suggestions as users type, minimizing errors and typos.
  • Payment method recommendations: Based on previous purchases or cart contents, suggest relevant payment options like store credit or loyalty points.
  • Estimated delivery timelines: Display estimated delivery dates and any potential delays upfront, avoiding surprises.

Example: Glossier offers helpful suggestions:

  • As users type their address, the system suggests valid options, streamlining the process.
  • For returning customers, the system recommends using store credit if applicable.
  • Estimated delivery dates are clearly displayed based on the chosen shipping method.

4. Personalization and Recognition:

  • Pre-fill saved information: Pre-populate fields with saved addresses and payment details for returning customers, saving time and effort.
  • Address recent interactions: If a customer contacted support with a specific question, offer relevant knowledge base articles or chat transcripts within the checkout.
  • Highlight preferred options: If a customer previously used a specific payment method or shipping address, prioritize those options for quicker selection.

Example: Sephora personalizes the checkout for returning customers:

  • Saved addresses and payment methods are automatically displayed for easy selection.
  • If a customer recently contacted support about return policies, relevant information is offered within the checkout process.
  • Preferred shipping and payment methods are highlighted based on past purchase history.

5. A/B Testing and Analytics:

  • Test different approaches: Experiment with various support options, wording, and placement to see what resonates best with your audience.
  • Track user behavior: Analyze where users seek help and identify areas where offering proactive assistance could be beneficial.
  • Gather feedback: Actively solicit customer feedback on their experience with the checkout flow and support options.

Example: Asos continuously optimizes their checkout based on data:

  • They A/B test different layouts and wording for their live chat button.
  • They track user behavior to identify common areas where customers require assistance.
  • They collect feedback through surveys and social media to understand customer needs and preferences.

Step 8: Celebrate the Purchase — Creating a Positive Finish

The checkout process is more than just a transaction; it’s the final touchpoint customers have with your brand. This pivotal moment presents a golden opportunity to leave a positive and lasting impression that encourages repeat business and fosters brand loyalty. By crafting a delightful and memorable finish to the checkout journey, you can turn satisfied customers into enthusiastic advocates.

Here are 5 key elements to create a positive finish in your checkout process:

1. Order Confirmation with Personality:

  • Go beyond the basics: Don’t just reiterate order details. Include a personalized thank you message and express your appreciation for their business.
  • Offer order tracking: Provide immediate access to a user-friendly order tracking system for peace of mind and transparency.
  • Highlight next steps: Offer relevant suggestions for related products, content, or loyalty programs to keep customers engaged.

Example: Lush excels in personalized order confirmations:

  • They include a handwritten thank you note with every order, adding a personal touch.
  • Customers have immediate access to detailed order tracking with estimated delivery dates.
  • The confirmation email suggests similar products based on the purchased items, encouraging further exploration.

2. Post-Purchase Upsells and Cross-Sells:

  • Offer relevant recommendations: Utilize purchase data to suggest complementary products or accessories, but avoid being overly promotional.
  • Highlight limited-time offers: Present exclusive discounts or promotions on related items to incentivize additional purchases.
  • Personalize the experience: Tailor recommendations based on individual customer preferences and purchase history.

Example: Glossier offers personalized post-purchase upselling:

  • They suggest complementary skincare products based on the customer’s chosen items.
  • Exclusive discounts are offered on limited-edition sets or new product launches.
  • Recommendations are personalized based on the customer’s skin type and previous purchases.

3. Emphasize Easy Returns and Exchanges:

  • Clearly communicate return policies: Ensure your return policy is easily accessible and clearly explained within the order confirmation.
  • Offer multiple return options: Provide various return methods, like in-store drop-off, mail-in options, or prepaid shipping labels, for customer convenience.
  • Simplify the return process: Make the return process straightforward and hassle-free, avoiding unnecessary steps or complications.

Example: Patagonia prioritizes easy returns:

  • Their return policy is clearly displayed within the order confirmation email.
  • Customers can choose between in-store drop-off, mail-in returns with prepaid labels, or online returns with a simplified process.
  • The return form is easy to access and requires minimal information, making the process smooth and efficient.

4. Share Gratitude and Build Community:

  • Express sincere appreciation: Thank customers again for their purchase and express your genuine gratitude for their business.
  • Invite social media engagement: Encourage them to share their purchase or experience on social media with relevant hashtags.
  • Offer exclusive benefits: Provide early access to new products, exclusive discounts, or loyalty program rewards to incentivize future purchases.

Example: Warby Parker fosters community through their finish:

  • Their order confirmation email expresses heartfelt gratitude for choosing their brand.
  • They encourage customers to share their new glasses on social media with a branded hashtag.
  • Customers receive early access to new product launches and exclusive discounts as part of their loyalty program.

5. Encourage Feedback and Reviews:

  • Request customer feedback: Ask customers to share their experience with the checkout process through a short survey or email feedback loop.
  • Respond to feedback promptly: Address any concerns or suggestions seriously and communicate your commitment to improvement.
  • Showcase positive reviews: Share positive customer reviews and testimonials on your website or social media to build trust and social proof.

Example: Asos actively solicits customer feedback:

  • They include a link to a short survey in the order confirmation email, asking for feedback on the checkout experience.
  • They respond to customer reviews promptly and address any issues raised.
  • Positive reviews are showcased on product pages and on their website, building trust with potential customers.

This expanded version aims to provide a more holistic view of optimizing the e-commerce checkout process, incorporating not just functional aspects but also psychological and emotional considerations. A smooth and user-friendly checkout experience can be a powerful differentiator in a competitive online marketplace.

Part 1 is Here

--

--