Pay with Ame
without leaving Americanas
UX/UI design | Usability testing
Americanas, as the second-largest e-commerce platform in Brazil, stands out as a significant B2C company, recognized for its extensive range of products, including electronics, furniture, groceries, household items, and apparel. Operating as a marketplace, Americanas facilitates transactions between buyers and sellers. Integrated with the Grupo Lojas Americanas, Ame is a Brazilian financial technology company specializing in innovative payment solutions. With a digital wallet platform, Ame streamlines transactions securely and efficiently.
Challenge
Criar uma experiência de pagamento integrado sem quebrar o fluxo do usuário.
Role
Product designer
Tool
Figma
Team
1 product designer/ 2 UX Writer / 2 UX Research / 5 Devs / 1 Product Owner /1 product manager
Year/duration
2021 /2 meses
APPROACH
Integrating Payments: Challenges, Innovations, and Refinements
The project required extensive research, data analysis, and technical constructions. Integrating the payment stage of two companies demands attention to detail and a focus on data security. Given the complexity, we applied design processes, usability testing, and behavioral research to deliver the best product. While the screens were completed in two months, refinement persisted for a year before the final public presentation.
Understanding the demand
In the initial phase, with details provided by the Product Owner, I focused on identifying crucial points and clarifying essential doubts. I collaborated with a diverse team, including X Write, UX Research, Product Owner, Front-end Developers, Back-end Developers, Product Manager, Technical Leader, and also with the Product Owner from the external company. This collaboration addressed uncertainties, with crucial support from the partner company providing essential data.
This stage provided valuable insights into the importance of effective communication and aligning expectations at the project's outset. Furthermore, it became evident how close collaboration with the development team from the early stages is fundamental to the project's success.
Problem
Choosing Ame for payment led users to the Ame app, causing checkout interruption, confusion, and cart abandonment. This project aimed to enhance the purchase journey, ensuring smoothness, simplification, and reduced abandonment. The focus was on elevating user experience, boosting sales, and eliminating obstacles in the disjointed purchasing process.
Mapping the current flow
The initial approach involved mapping the user journey to understand friction and the problem in-depth. We identified critical areas and those essential for a solution.
Observed issues
-
lack of information about next steps;
-
automatic sending to another application;
-
flow break;
-
cart abandonment;
-
it is only possible to pay with cards already saved;
-
It is not possible to add a credit card during checkout.
Points to consider
-
authentication for entering the app (password/ biometrics/ facial)
-
the user can pay only by credit card
-
the user can pay only with balance
-
the user can change the balance amount they want to use
-
the user can change the installment amount.
Heuristic from Baymard
To guide our next steps and ensure adherence to market best practices, we employed Baymard's heuristics. We identified the following:
#590 - Use a Payment Method Interface with Tabs and a Default Selection
-
Simplify the payment method selection step to avoid user intimidation.
-
Offer other payment methods.
-
Highlight the credit card option.
-
Represent the cards by their flags.
#671 - Provide one or more third-party payment options as a secondary choice:
-
Offer other third-party payment methods.
-
Organize by level of use.
-
Offer clear information if the user is redirected to another environment or flow.
#726 - Ensure third-party services and embedded resources cannot disrupt the checkout flow:
-
Avoid breaking the flow of third-party payments.
-
Avoid requiring specific software, extensions or resources for the user to use that payment method.
-
Eliminate external dependencies for using the chosen payment method.
These heuristics provided valuable guidelines to maintain a consistent proposal, aligned with previously studied user behaviors, and contributed to creating an effective and user-centered checkout experience.
Benchmark Analysis
Following market best practices and considering Hick's Law, which emphasizes that decision time increases with the number and complexity of options, we sought choices that would reduce the user's cognitive load during the decision-making stage. It is crucial to adopt behavioral patterns familiar to the user to ensure an intuitive and effective experience.
During the benchmark analysis of three players offering integrated payment with balance and cashback, we observed that:
-
Not all provided clear information about the balance on the Home or Product Details Page (PDP).
-
Users typically did not adjust the account balance, choosing to use the entire available amount or supplement with a credit card.
-
All allowed credit card registration during the process.
-
All enabled completing the purchase only with the available balance.
Project scope
In this phase, we develop the scope of the project, consolidating all the insights and understandings previously acquired.
​
To prioritize deliveries, we chose to divide the project into distinct parts:
-
Target Audience:
-
We would do an initial test from the first development with just a small group of collaborators;
-
We limited the initial target audience to users who already had an account on both applications and had them installed on their mobile devices.
-
-
MVP Centered on essential components:
-
We included a linking mechanism for users to opt-in to the integration.
-
We developed a specific balance component for the checkout stage.
-
-
Temporarily Suspended Features:
-
Balance adjustment;
-
Credit card registration in the same flow
-
Hide balance at checkout
-
I unlink at checkout
-
​
This strategic approach allowed for a focused and efficient delivery, addressing the initial needs identified in the project scope definition process.
Prototyping
Link component
We start by creating the link process according to the requirements:
-
Link required at Home and Checkout, maintaining the same standard.
-
Preservation of the AME brand to inform the user about the partnership.
-
Information about the need for authorization to use the data.
-
Communication about replacing wallets.
-
After linking, balance information on the AME account.
Pre-linking of accounts
Post-linking of accounts
After creating the first version, we took it for usability testing with users and refined the proposal considering:
-
Decrease the width of the component to align with the pattern of the others on the screen.
-
Emphasize "Pay with AME", replacing the existing component.
-
Use text to reinforce the link instead of explanatory screens.
-
Immediate use decision.
-
Adjust according to the Design System.
And we reached the following result:
Pre-linking of accounts
Post-linking of accounts
Payment Screen
In parallel with the development of the linking component, we worked on adapting the existing payment screen to incorporate the new functionalities. Initially, we aimed to maintain the same checkout pattern as Americanas and achieved the following initial result:
After refining the first version, we chose to simplify the flow by bringing credit card options to the payment screen. This allows the user to proceed to the next step, deciding how they want to make the purchase payment. The final result of the flow was:
Conclusion
Upon completing this project, I gained valuable insights by collaborating with diverse teams across two different companies. Delivering an MVP proved to be a fundamental strategy, showing that even within a mature product scenario, adopting an MVP approach for new features can yield significant benefits.
​
The project underscored the importance of user-centered design through usability testing, enabling us to discern user behavior and prioritize components effectively. Additionally, we conducted A/B tests initially with stakeholders, then with 5% of our customer base, and upon obtaining positive results, we extended the changes to the entire user base. This experience reinforced the commitment to considering MVPs from the project's inception, emphasizing the value of starting with a simple solution that can evolve and scale during user testing.
​