Porto (via Môre)
First purchase: the credit card inside the cart
A hub with more than 80 Porto products and services got a cart and checkout. On the first purchase, eligible customers apply for the Porto Bank card without leaving the cart and pay for the purchase with a discount, on the first statement.
- Role
- Senior Product Designer, Platform/Checkout squad
- Period
- 2022–2024
- Sector
- Insurance and financial services
Pain points
- Each line of business had its own purchase journey, with no shared cart.
- Applying for a credit card means login, a credit check and biometrics, steps that can derail a simple purchase.
Discovery
- 01As-is mappingFrom product page to confirmation, for the priority products.
- 02Concept testScript on mandatory login, biometrics, offer clarity and paying with a card still being issued.
- 03Unmoderated testFirst-purchase prototype tested on Maze.
- 04In-depth interviewsExpectations about the purchase flow and reasons to apply for the card.
- 05A/B testsProduct recommendations inside and outside the cart.
Journey
- 01CartCard offer with the full price struck through.
- 02LoginSign in or sign up, with a token when needed.
- 03Data reviewPersonal details and card delivery address.
- 04BiometricsA selfie to confirm identity.
- 05Card selectionPlatinum or Gold, benefits side by side.
- 06SetupNetwork, limit, due date and a free tag.
- 07PaymentThe approved card pays for the purchase, with a discount.
- 08ConfirmationOrder, card and tag, with next steps.
What changed
- The approved card pays for its own purchase, on the first statement.
- One cart for insurance and services.
- More clicks and higher conversion in checkout.
Results
Approval funnel by step, as presented in the case.
The problem
Porto's legacy site became a sales hub that brings together more than 80 products and services. Each line of business had its own purchase journey.
The question: can insurance, services and financial products share one cart and one checkout?
Discovery and testing
I mapped the current journey of the priority products, such as Auto Digital, Porto Vida and Travel insurance, and studied how each one is bought.
Then came usability tests with simulated purchases, including the Porto Bank card in the cart, in-depth interviews and A/B tests of product recommendations.
Two findings changed the solution: people find it natural to put insurance in a cart, but expect a loan to follow its own linear flow. And cross-selling insurance with a card only works if the card is the payment method.
The first-purchase concept test explored five points: whether mandatory login adds friction, whether biometrics after login feels odd, whether the offer is clear enough to sign up, whether people feel safe paying with a card that is still being issued, and whether listing the card among the products is confusing.
The solution
Only products paid in the cart go into the cart. Financial products keep a separate linear flow.
Eligible customers are offered the Porto Bank card inside the cart, with a discount on the purchase and the full price struck through next to it.
The application has four steps with visible progress: data review, biometrics, card selection and setup, with network, limit, due date and a free Porto Bank toll tag. Once approved, the card becomes the payment method and the purchase lands on the first statement.
The edge cases were designed too: token login, incomplete data, rejection in the credit or biometric check, and removing the card from the cart, which warns that the discount will be lost.
Evolution
In version 2, from February 2024, the offer started showing the undiscounted price struck through, and card selection reused the credit card journey, keeping both journeys consistent.
Want something similar?
Describe the problem. alema.io replies with a path, not a generic quote.