Klarna Integration
Buy Now. Pay Later. INTEGRATED.
OVERVIEW
PROBLEM
Staples currently offers a range of payment options but lacks a flexible buy now, pay later (BNPL) solution. This results in missed sales opportunities and a seamless checkout experience for customers who prefer more flexible payment terms.
SOLUTION
Klarna, as a buy now, pay later (BNPL) service, provides a valuable financing option that can help alleviate these concerns by allowing customers to spread their payments over time. However, without clear visibility of this option on the Staples Product Details Page (PDP), customers may not be aware of the flexibility available to them, resulting in lost sales.
The Goal
and
*This project focuses solely on PDP
intuitive
discoverable
integration that enhances the checkout experience while aligning with Staples existing payment methods.
To design an
INDUSTRY
eCommerce
MY ROLE
User Research
UX Writing
Content Strategy
TOOLS
UserTesting
Figma
DURATION
2 months (2024)
CURRENT PDP
DESIGN PLAYGROUND
Right off the bat, I experimented with different Klarna Banner designs that I believed would fit well with the current branding and elevate the Staples Product Details Page (PDP).
Since the PDP already has elements with both a gray outline and gray fill, I aimed to maintain by designing a few concepts that mirrored this style.
Because of the abundance of elements which already had a white fill gray border, I ruled out that option.
DESIGN PROCESS
visual consistency
During our internal team design review, I asked for my team members feedback on which design they thought would fit best in the page, and the overall consensus was this design:
BANNER PLACEMENTS
The client initially proposed placing the Klarna banner below the "Add to Cart" button, but said we were alternative options as well. I experimented with a few placements in order to determine the best fit, being mindful of the Placing it further down on the page would distance it from the product price could lessen its impact in the visual hierarchy.
banner's visibility.
free to explore
right here
So... we put it to the test
A/B test with 10 participants
It's no secret that considering user needs is extremely important when implementing a change, so that was the next step we took. I decided to conduct an to determine which placement users prefer. I also standardized the design for both options to ensure that the designs wouldn't influence users' decisions.
USER RESEARCH
TOP OF PAGE
Near Price
BOTTOM OF PAGE
Near"Add to Cart"
We wanted to check:
✅ User's preference on Klarna Banner placement
✅ Users understanding of Klarna
RESEARCH ANALYSIS
Overall:
⭐ Klarna was a very understood platform, everyone expressed familiarity with it
⭐ 9/10 users preferred the Klarna banner to be higher up near the price, while 1 user preferred it to be near the "Add to Cart" CTA
Memorable Quotes:
I think the placement at the top of the page is clear, it’s straightforward, it’s obvious, and it’s well placed.
Most people will not pay attention underneath any button that’s “Add to cart” because they just want to move on with their day, so they might miss a wonderful offer.
“While I’m thinking about the price and thinking how am I going to pay for this, boom, it’s right there [top of page]”
TOP OF PAGE
BOTTOM OF PAGE
-
Users felt Klarna should be visible when considering payment options in relation to the price.
-
Placement at the top was seen as more effective for catching attention and providing timely information about payment options.
-
Placing Klarna at the bottom often made it less visible to entirely missed, particularly when users didn’t scroll far enough after reviewing the product details and price.
Overall conclusion is to place Klarna at the top of the page
DESIGN AND HANDOFF
We created the Klarna banner design for multiple different screen sizes, as shown below.
For development handoff, we used Klarna's WYSISYG Editor.
