Designing an efficient and personalised payment selection page for a fashion e-commerce.
Zalando’s payment selection page overwhelms customers, leading to a high exit rate and extended decision times. A redesign focused on streamlining options and visual guidance significantly reduced exist rates by 25pp exit and cut time spent on page down from ~3 mins to ~30 secs.
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.
Some information has been redacted and/or masked to protect its confidentiality.
tldr summary
🤓
tldr summary 🤓
Old Version
The existing payment selection page presented a cluttered and generic list of options, resulting in a high exit rate and extended decision times for customers.
MVP Milestone 1
The initial design iteration focused on decluttering the payment selection page by removing distractions, prioritising essential information, and employing progressive disclosure to streamline the payment process.
Milestone 2+
Subsequent iterations leveraged customer behaviour data to personalise the payment selection experience, prioritising frequently used payment methods and offering intelligent suggestions. Additionally, the "Continue" button was repositioned closer to the selection area to improve accessibility and reduce friction in the checkout flow.
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
Driving research/experiment direction
Planning & executing
Cross function collaboration & communication
Bridging design, product and development alignment
Outcome.
~15pp decrease in exit rates for new customers.
~83% decrease in time spent on page from ~3 mins to ~30 seconds
~2pp increase in conversion time.
How it started…
Improvement List where I document and track all ideas / pain-points / opportunities from various sources.Big ambitions, limited resources.
While there was widespread interest in improving the payment selection page, competing priorities repeatedly delayed the initiative. I created an "Improvement List" to manage the influx of suggestions, but it soon became unwieldy, hindering decision-making. This highlighted the need for a strategic approach to balance ambition with limited resources.
Discovery
Existing quantitative data
Zalando's payment selection page suffers from a high exit rate among new customers, despite offering a variety of payment methods.
Zalando's payment selection page presents a significant challenge. Despite offering a diverse range of payment methods, new customers exhibit a high exit rate at this final stage of checkout. This indicates a potential barrier to conversion, requiring investigation into the factors contributing to this abandonment.
What do we know from existing studies about customer behaviour?
Existing qualitative data
The word "free" can mislead users, raising concerns about hidden costs and increasing decision-making anxiety.
Our study reveals that the word "free" on the payment selection page triggers anxiety among users, as they anticipate hidden costs associated with certain payment methods, increasing cognitive load and potentially hindering conversion.
Most users stick to familiar payment methods, typically only using one or two regularly.
Most Zalando users rarely switch payment methods, typically cycling between two preferred options. New payment method adoption primarily occurs upon launch, suggesting a strong preference for established, familiar payment methods.
Payment decisions are driven by a complex interplay of factors.
Customers consider several things when deciding how to pay:
Easy vs. safe: Do they want the fastest way to pay (like saved card details), or do they worry more about keeping their information secure?
Pay now or later: can they pay right away, or would they prefer to pay over time (like with "Buy Now, Pay Later" options)?
How much it cost: larger purchases might make people think differently about their payment method.
What the item is: if they aren't sure the item is right (like clothes they need to try on), they might want a "Buy Now, Pay Later" option.
Do they know it? People often stick with payment methods they've used before and trust..
Managing stakeholder’s expectation during problem definition
Fostering early collaboration for success.
I recognised the value of bringing diverse perspectives together, so I organised a workshop with key stakeholders. Our aim was to identify pain points, opportunities, and business needs, and then prioritise solutions for quick implementation.
During the workshop, we focused on:
Aligning on goals: Making sure everyone understood our business objectives and customer needs.
Surfacing insights: Collectively identifying pain points, ideas, and potential opportunities gained from user research and individual expertise.
Democratising prioritisation: Using dot-voting to highlight the most critical areas.
Brainstorming solutions: Developing solutions tailored to the prioritised needs.
This early collaboration fosters team ownership and streamlines decision-making. Engaging stakeholders from the start increases project commitment and establishes a foundation for efficient, customer-centric solutions.
We worked together to understand what both customers and the business need. This helped us pinpoint problems and find areas for improvement.
To make sense of it all, I grouped similar ideas and had everyone vote on the most important ones. I then connected these top priorities back to our understanding of customer needs and business objectives.
Define and scope
Ship and learns fast: A two-phase approach for rapid improvement
Workshop results led to prioritising simplification and decluttering of the payment selection page. To achieve this, a two-phase approach was defined:
Phase one - rapid decluttering: This phase focuses on immediate improvements by optimising or removing existing components to streamline the user experience.
Phase two - features and personalisation: Based on the learnings from Phase One, this phase will explore the implementation of new features and personalisation options, leveraging data-driven insights to further enhance the payment process..
This phased approach enables rapid delivery of initial improvements while establishing a foundation for iterative, data-informed enhancements in the future.
Design and explorations.
Use Case Mapping for scalability
To ensure the redesigned payment selection page's effectiveness and scalability, use case mapping was employed to identify core user actions, potential edge cases, and future growth opportunities. Existing customer payment selection journeys were mapped, considering the potential impact of future payment options on the page's design. This comprehensive approach guarantees the redesign not only enhances the current experience but also provides a flexible foundation for Zalando's evolving payment needs.
Milestone 1
Ways to represent payments list
A card-style layout for presenting payment options offers several benefits compared to a traditional list view. The visual separation of cards and use of icons increases the scannability of payment options, making it easier for users to quickly find their preferred method. This clear, intuitive design can lead to faster checkout times and higher conversion rates. Additionally, tapping on a card to select a payment method feels more natural, especially on mobile devices. This can lead to greater user engagement, as measured by lower bounce rates and increased time spent on the page.
Comparison. Left: traditional radio button list. Right: card style listMilestone 1
Visual declutterring
The current payment selection page suffers from visual clutter, with an overabundance of information and payment logos potentially overwhelming both new and existing customers. To address this, I employed progressive disclosure, strategically revealing payment logos only after the user has selected their general payment type (e.g., card, third-party).
Research suggests that customers first decide their payment method preference; premature display of specific logos disrupts this process. Additionally, in markets like Italy, the high number of local card payment options can be overwhelming.
By applying progressive disclosure, we create a cleaner visual experience. This helps customers focus on decision-making while ensuring relevant payment options are easily accessible at the right moment.
Icon playground and competitor analysis
Icon testing using Click Test methodology
Progressive disclosure to prioritise information.Milestone 2
Prioritising familiar payment methods
Our customer data reveals a strong tendency to reuse the same one or two payment methods. By prioritising recently used methods at the top of the list, we aim to create a more personalised and streamlined experience. This approach aligns with user habits, reducing visual clutter and decision fatigue for faster checkout and potentially lower cart abandonment.
We hypothesise that this change will foster a sense of personalisation on the payment page. By reflecting how customers typically behave, we can remove distractions and simplify their decision-making process.
Page structure and patterns
Explorations: showing other available payment optionsMilestone 2
Adding card details instantly
Our data highlights that customers using card payments, particularly new customers, spend a significant amount of time on the payment selection page. This is further compounded by the frequent use of one-off card details.
Introducing card scanning functionality, allowing customers to add their card details using their phone camera, can significantly streamline this process. By reducing the manual entry of card information, we can alleviate customer frustration, decrease errors, and ultimately enhance the overall checkout experience.
A/B testing revealed that customers preferred the third exploration for introducing the feature, finding it simpler and better aligned with their existing workflow.Tapping the camera icon activates card scanning. Due to the vast variety of card designs, scanning might not always capture all details accurately. To ensure a seamless experience, users can also scan individual card details like card number, expiry date, and CVV separately. This fallback option guarantees successful data entry regardless of card design complexities.
Milestone 2
Addressing privacy concerns
Research reveals that some customers, especially in France, prefer one-off card payments due to privacy concerns, particularly the fear of unauthorised transactions if their accounts are compromised. To address this, we introduced an optional feature allowing customers to require CVV re-entry for every transaction, enhancing their control and security. Since implementing this feature, we've seen a significant increase in orders placed with saved cards, leading to faster checkouts and potentially higher conversion rates.
Milestone 2
Nudging and recommendations
This dedicated area within the payment selection page will showcase new payment methods and offer intelligent recommendations. Recommendations will be tailored to factors like the customer's basket contents or total purchase amount. This space aims to streamline the checkout experience and introduce customers to convenient payment options.
Learnings
Existing data is data.
Existing data is also valuable data. We don't always need to conduct new user research to identify problems and build a case for change. Complementing direct user research with existing analytics can accelerate project timelines and provide a more comprehensive understanding of user behavior.
Incremental progress wins support.
When resources are limited, demonstrating the impact of small, strategic changes can pave the way for larger investments. Quick wins establish momentum and showcase the value of design improvements.
Early collaboration for smooth buy-in.
Involving stakeholders from the start fosters ownership, empathy, and a shared vision. This collaborative approach streamlines decision-making and increases project support.
End of case study
More case study • designing a stress-free way to settle invoices.
Multi-order BNPL settlement →
More case study • increase users earnings through data and design