Streamlining BNPL process — designing a stress-free way to settle multiple open invoices.

Buy Now Pay Later (BNPL) is a popular payment method for Zalando customers. However, high-frequency buyers face challenges settling multiple invoices. This project aims to streamline the process by enabling multi-order invoice settlement, saving time and improving payment allocation accuracy.

PROJECT
Was done during employment with Zalando in Berlin for Zalando iOS, Android and Web. Learn more about Zalando

ROLE
Design prime / lead — Strategic vision & problem definition, Design Leadership & Ideation.

This case study is under a non-disclosure agreement and some information has been masked to protect its confidentiality.

tldr summary

🤓

tldr summary 🤓

Old Pay Order App
The Pay Order App settles invoices on a per-order basis, requiring separate transactions for each order. This contradicts user mental models and expectations.

Redesign Pay Order App
The redesigned Pay Order App enables consolidated settlement of multiple invoices, saving time and facilitating payment oversight to avoid debt.

New Open invoices overview widget
The open invoices overview widget serves as a reliable, consolidated source of accurate, up-to-date payment amounts and open invoices for all customer orders.

My contributions


Strategic vision & problem definition

  • Workshop facilitator and alignment

  • Product and design vision and prioritisation

  • Design scoping and roadmapping

  • Leading cross-functional alignment

Design leadership & ideation

  • Advocating and contributing to Zalando’s design system

  • Iterative design and solution-ing

  • Planning and executing research/experiment direction

Cross function collaboration & communication

  • Bridging design, product and development alignment

Outcome.


~7m € cost saving in logistics by enabling bundling functionality in CH alone.

~15% increase in timely payment or earlier payment for invoice orders.

~75% decrease customers complaints against payment misallocation.

Discovery and context

Order bundling, while convenient and cost-effective, presents challenges for customers using Buy Now Pay Later (BNPL) with bank transfers..

What is order bundling

Order bundling, a popular option among customers, consolidates multiple orders into one shipment, reducing costs and environmental impact while offering the convenience of trying on items together.

How Buy Now Pay Later (BNPL) and Pay Order App works?

Buy Now, Pay Later (BNPL) offers customers 14 days to try the items. After placing a BNPL order, they can easily select and pay for desired items through the "Pay Order App" flow.

Increased customer service contact costs due to order bundling outweigh the cost savings achieved

While order bundling offers convenience and cost savings, it presents a critical payment challenge for BNPL customers utilising bank transfers, especially when they want to return some items. This leads to payment misallocation, unjustified debt collection, and negative customer experiences, ultimately increasing customer contact.

Order Contact Rate was significantly higher for Bundled orders especially in CH (approx. ~0.5M Customer Service cost in 2023).

Payment misallocation, caused by customers not using our Pay Order App, occurs when the system can't distinguish between returned and purchased items. This has forced us to deactivate order bundling in the CH market, leading to higher logistics costs and the risk of losing customers.

With bundling is deactivated, we expect to bear ~6.5M€ in logistics cost

Data blindspot

To understand the reasons behind increased customer contact rates, we need to analyse contact ticket data. However, our current ticketing system relies on inconsistent manual categorisation, making trend analysis impossible. This lack of visibility prevents us from identifying root causes despite recognising the negative impact. To address this, we'll conduct a customer survey to gather direct feedback and inform our solution strategy.

Problem definition

Overcoming Data Limitations for Actionable Insights

Customer study to uncover root causes

I worked together with a UX research agency to gather more insights about our customers and their behaviour for Order Bundling. My contribution was to lead and drive research direction, but also to ensure the research roadmap matches with our project roadmap.

To identify behaviour and expectations in terms of bundling experience, we decided to do diary study to figure out the bundling experience in the market which Order Bundling is still on. We also did survey to validate our assumptions. We specifically target the survey for those customers who had order bundling and had contacted customer service. Thanks to the analytics team to discover these users

Documentations and plannings for the research study. These were really helpful especially to keep key stakeholders in the loop and move things faster.

Key pain-points

Customers receive lack of clear bundling communication which leads them to make payments incorrectly.

Communication and transparency issue

  • Orders are bundled without clear and immediate customer notification.

  • Bundled order emails are confusing, leading customers to miss that items are combined.

  • Delivery slips are overly complex, especially for bundled orders.

  • Bundled orders lack transparency, making returns and payments difficult to track.

  • Return confirmations don't accurately reflect bundled orders, causing confusion.

Payment misallocation and returns issue

  • Customers struggle to understand how much they owe, especially with bundled orders or multiple open orders. This leads to frustrating manual calculations as currently customers uses delivery slip to calculate the payment amount.

  • Delays as customers wait for return confirmation emails to get accurate payment amounts. Desire for a streamlined online return system with QR codes for easy, label-less returns.

  • Expectation to pay for kept items in one transaction, even if they originally came from separate orders.

  • Customers received unjustified dunning emails thinking they had paid the correct amount but the system doesn’t know how to allocate the money.

As-is journey.

Based on the insights gathered, I've crafted a detailed as-is customer journey map to clearly illustrate the current problems. This journey aims to increase empathy across the company, particularly within leadership, by showcasing the challenges our customers face. Additionally, the map will help us identify key touchpoints where the customer experience breaks down. This allows us to pinpoint opportunities for improvement and ultimately enhance the end-to-end customer experience.

This customer journey map fosters empathy, uncovers pain points, and identifies opportunities to enhance the end-to-end customer experience.

Aligning the problems and gather some ideas through kick-off workshop.

I facilitated a cross-functional kick-off workshop which aims to address customer pain points in the payment bundling process. Participants will review research insights and the customer journey to align on a vision for a seamless experience. Collaborative brainstorming and ideation sessions will generate potential solutions, which will then be prioritised, with clear action items and timelines assigned for implementation.

1. Check-in

The goal is to collect and review what the known and unknowns from all the audience in the room.

2. Align on pain-points and opportunity

This exercise is meant to get everyone in the team on the same page and understand the context of the problem we're trying to solve.

3. HMW generation and votes

This exercise is meant to frame key user needs, pain-points or opportunities as open-ended questions to drive creative ideations. These questions would be a shared foundation and guidance for ideation and brainstorming in the next session.

Solution design

Concept & vision groundwork

Foundations and touch-points explorations

Building on insights from the workshop and existing data, I've prioritised key areas for improvement. To guide the design process, I mapped out known customer touch-points, along with potential edge cases, to ensure the solution addresses the complete end-to-end experience. During this exercise, I presented solution ideas for each pain point, highlighting pros, cons, and potential opportunities where multiple options exist.

End-to-end touch point engagement explorations for North Star vision

I also worked with my product partner to define our target customers, understand their motivations, and align these with our project goals. This is essential because our solutions will vary significantly depending on whether our primary goal is to increase bundling adoption or to improve the existing experience and reduce confusion.

Zalando has specific customers persona and opportunity scope for each Jobs To Be Done. By tying the ideas/concepts to the opportunity score, this helps smoothen the buy-in process from the leadership to get the project move faster.

Concept & vision alignment with stakeholders and steer-co

Securing alignment on the north-star vision with high-level concept/wireframes.

I developed high-level concept wireframes based on touchpoint analysis to visualise the project vision. These served to secure stakeholder alignment, obtain approval, and facilitate discussions on feasibility, cross-project alignment, and potential collaborators for detailed design development.

  • Feasibility: Assessing the technical and operational viability of the concept.

  • Cross-Project Alignment: Identifying any overlaps or dependencies with ongoing Zalando projects.

  • Collaboration: Discovering key partners for turning the vision into detailed designs and screens.

Concept/wireframe improvement on customer account to increase bundling awareness during parcel tracking updates.

Concept/wireframes improvement on Pay Order App to allow customers to pay for multiple orders.

End-to-end concept / wireframes highlighting improvements and rationales.

Concept & vision alignment result

A solid and aligned vision, roadmap and plan.

At the end of this process, we aligned on the north star vision, key teams involved, and a big plan. During the alignment, we also evaluate that we need to split the topic into multiple milestones.

Our vision is “Improve the overall customer experience and efficiency of the payment for order bundling to enhance convenience, transparency, and communication for customers.

Visual to highlight improvements on each journey and their milestones. This ensures everyone has a shared understanding on what we are going to do, how, and when.

Design details 
(finals, iterations and testings).

Milestone 1 • Shipping confirmation communication

Enhancing post-checkout communication for Bundled Orders.

Due to limitations in the current bundling functionality, pre-checkout optimisations are deferred. Focus is shifted to enhancing post-checkout communication for bundled orders through informative emails and app notifications, detailing the benefits of bundling and providing instructions for payment management.

Shipping confirmation email.

Shipping confirmation push-app notification.

Milestone 2 • Orders list page

Increase order bundling awareness and payment amount due on Order details.

Proactive communication about order bundling will be implemented across the online platform to enhance transparency. Additionally, an "Open Invoices" widget will centralise all outstanding BNPL payments, providing customers with a single point of reference for due dates and payment management, reducing the risk of accidental debt.

To avoid unnecessary information and improve the customer experience, I've carefully considered the timing of our bundling notifications. We'll inform customers that their orders are bundled only while the parcel is in transit. This ensures they're aware of the combined delivery without creating confusion. Once the parcel arrives, they'll already know its contents, so we'll remove the bundling notification to avoid redundancy.

Open invoices widget explorations

The 'Open Invoices' widget streamlines payment by consolidating outstanding BNPL balances, due dates, and item images. Only unpaid, unreturned items are displayed, ensuring transparency and building customer trust regarding accurate payment amount.

The final design of the component prioritises simplicity and essential information. Research findings indicated that order numbers were not a primary concern for most customers during this process, leading to their removal from the final design.

Open invoices widget placements

Usability testing confirmed the 'Orders' section as the optimal placement for the 'Open Invoices' widget, aligning with customer expectations for payment-related information. Additionally, high traffic to the FAQ section for BNPL invoice inquiries supports placing the widget there as well.

Milestone 1 • Physical delivery slip

Delivery slips: a bridge to online payments

Research reveals that customers often return items before settling Buy Now Pay Later (BNPL) orders, manually calculating remaining balances using delivery slips and resorting to bank transfers. This method lacks item-to-payment linkage, causing potential misallocations and inaccurate dunning notices.

To address this, we aim to guide customers towards online payments via the Pay Order App, enabling streamlined item selection, accurate payment calculation, and direct payment-to-item linkage.

Multi-order payment using Pay Order App flow

Milestone 2 • Pay Order App (deferred checkout) flow

Onboarding

Onboarding modal notifies customers of their ability to consolidate multiple open Buy Now Pay Later invoices into a single payment.

Usability testing indicated that participants often overlooked the onboarding's initial title and content. The final design was simplified to convey the feature's essence in one to two sentences for improved comprehension.

Milestone 2 • Pay Order App (deferred checkout) flow

Item selection page which allows multi-order payment

The redesigned item selection page consolidates unpaid, unreturned items from open BNPL invoices for streamlined payment, aligning with customer expectations and internal data showing ~50% of customers with multiple open orders pay for them on the same day.


Below section, customers can view return item information to mitigate anxiety about return processing.

Usability testing validated the final design's information architecture, grouping items by order, as it aligned with customer mental models and expectations. Initial exploration of grouping by due date proved less effective, as customers primarily associate items with their respective orders.

Milestone 2 • Pay Order App (deferred checkout) flow

Optimising navigation for high-volume customers

To enhance the experience for customers with numerous orders and items, I introduced "load more" in-page pagination to the consolidated open invoices item selection page - which will load max 3 orders during initial load. This addresses potential issues with page length and loading times, ensuring smooth navigation and efficient item selection for payment.

How did I come up with this magic number ‘3’ ?
Data analysis revealed that most users have few unpaid orders (50% have one) and few items per order (50% have one). Therefore, initially displaying a maximum of 3 unpaid BNPL orders covers 84% of users and ensures fast loading, while also showing 12 items for 61% of customers upon initial load.


I selected approach 2, prioritising contextual relevance for customers. While acknowledging that it’s not the simplest to implement, it avoids displaying orders that might haven't yet arrived or haven’t tried, reducing potential customer frustration and aligning with user expectations.

While displaying all open orders may simplify development, it could overwhelm users to see those orders which due much much later, potentially delaying payments. This approach also misaligns with user expectations, making the 'Orders' section less intuitive.

Prioritising orders by due date encourages prompt payment and reduces user overwhelm, aligning with expectations regarding order arrival times. However, this approach may introduce development complexity and the risk of users overlooking orders if the "load more" function is missed.

While classic pagination may aid users to keep mental location of the orders / items, the additional interaction could be cumbersome. Additionally, the placement of the payment summary at the bottom may disrupt context on mobile devices, and the arrow icon could be misinterpreted as a way to move forward to next step.

Milestone 2 • Pay Order App (deferred checkout) flow

Review item selection and pay

Upon tapping ‘Continue’ CTA, customers will be able to review their item selections and choose how they want to pay.

The "bank transfer" payment title will be localised based on regional preferences. For instance, in Switzerland, where QR code payments are prevalent, terminology aligned with this practice will be used to avoid customer confusion.

Milestone 2 • Pay Order App (deferred checkout) flow

Bank transfer instructions

The bank transfer instructions page streamlines manual payments with features like a "Copy" button for bank details and scannable QR codes for mobile banking apps, prioritising QR codes in regions with high usage or on desktop for enhanced convenience.

Usability testing revealed that scanning QR codes on the same phone proved cumbersome for users, with little interest in features like downloading or emailing the code. Customers preferred established workarounds (screenshot and upload), highlighting the importance of considering existing habits when designing solutions.

Milestone 2 • Pay Order App (deferred checkout) flow

Success page

Upon completion, a success page will display a transaction summary. If unpaid items remain, a direct link to the return page will be provided to facilitate further action.

Deliverables and other docs

Thorough documentation is essential for complex projects with multiple components

To maintain project clarity and transparency, I meticulously document key decisions, processes, data, and stakeholders involved. This documentation facilitates alignment and serves as a valuable reference point. For example, I created documents outlining:

  • Key decision logs

  • Current and improved process flows

  • Relevant data analysis

  • Stakeholder mapping, etc.

High level flows for each touch-points

Key players / stakeholders

Product and design logic, rationales and other use cases.

Research documentations from planning till synthesis.


Looking back

Collaboration and communication are key.

Involving stakeholders early and maintaining open communication throughout the design process ensures alignment, fosters shared ownership, and leads to successful outcomes.

Clear communication is important

I recognised the importance of clear documentation and communication to ensure project transparency and keep stakeholders informed. This has helped me to move forward fast.

Data can help reduce the noise.

With a high number of stakeholders involved, there were many opinions, goals, and it could be overwhelming to keep everyone happy. I realised the value of combining user research with internal data to make informed design decisions and prioritise features effectively.

Empathy for stakeholders is essential for effective design solutions, too.

A comprehensive understanding of interconnected systems and processes, including backend logic, payment allocation, and ERP integration, is essential for effective design solutions. Thorough analysis and collaboration with relevant teams facilitated a deep understanding of these systems. This helped me to understand their perspective clearly and how and why the systems are built that way, enabling me to create user-centric designs that align with technical requirements and business goals.

Team

There are high numbers of key players involves, but here’s the Core Team:

Mari Laukkonen — Principal Program Manager

Julius Zielinski — Principal Product Manager

Abhishek Bhaumik — Senior Product Manager

Edward Pakpahan (me) — Senior Product Designer

Julia Khaspulatova — Senior Product Analyst

Malte Pickhan — Principal Software Engineer

Abhishek Prasad — Senior Content Designer

Robert Roedel — Senior ERP Integration Consultant

Jennifer Winz — Manager SAP Key Users


End of case study

More case study • personalising choices for speedy checkout

Payment page power-up →

More case study • increase users earnings through data and design

Auto-updated working capital →