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