New Configuration for the Mercado Pago Checkout Plugin
In 2021, I worked at Mercado Pago, the fintech arm of Mercado Libre, where I was part of the team responsible for designing checkout plugins for e-commerce platforms like Shopify, VTEX, Woocommerce, and Wix. My focus in this project was the VTEX platform, which posed the greatest challenges due to its rigid configuration process and technical limitations.
The Challenge
We had 2 months to deliver a new experience for configuring the Mercado Pago checkout plugin on VTEX. Unlike other platforms, VTEX's complex setup caused high friction for users, leading to a poor user experience. The goal was to improve the plugin's setup journey while overcoming significant platform limitations.
Discovery and Research
We started by mapping the entire configuration journey on VTEX, interviewing technical support and onboarding teams, and documenting the pain points using Figma. Unfortunately, we lacked quantitative data, but our qualitative insights from support teams and stakeholders gave us a clear direction. The biggest issues were:
Inflexible platform with limited customization.
Confusing, technical content in multiple languages (Portuguese/Spanish).
Poor design and usability, with no real-time feedback or support links.
Key Findings
Technical limitations prevented us from making meaningful changes within VTEX.
User confusion due to the dual-language display and overly complex fields.
No feedback mechanisms for users when errors occurred during configuration.
The Solution
We proposed moving the checkout configuration to the Mercado Pago login area to overcome these hurdles, giving us more control over design, functionality, and metrics tracking. This allowed users to leave VTEX, configure the plugin in Mercado Pago, and return to complete the setup. It also gave our team more autonomy to make improvements without relying on VTEX approvals.
Design Process
We started with low-fidelity wireframes in Excalidraw, collaborating with developers and product managers to align on feasibility. Once validated, I created medium-fidelity wireframes and organized a design review session with other designers and teams, gathering feedback and refining the flow.
After several iterations, we moved to high-fidelity designs, preparing prototypes for testing. Despite challenges in recruiting VTEX users, we tested with Mercado Pago support staff, who provided valuable insights based on their experience with the platform.
Results and Handoff
After multiple rounds of feedback and testing, we finalized the desktop and mobile designs, focusing on simplifying the user journey and enhancing the configuration experience. We wrapped up the project by delivering the high-fidelity designs and handoff documentation to stakeholders.
In the mobile flow of the new configuration platform, we introduced an onboarding screen to guide users through the updated process and a homepage where they could view all their store configurations and manage collaborator access.
When users added a new checkout configuration, they first chose their store application and e-commerce platform. After proceeding, they reached the main checkout configuration page, where we added new fields and improved the content to better assist users. Upon completion, a confirmation screen informed users to return to their e-commerce platform (like VTEX or Wix) to finalize the setup, as an automatic redirect wasn’t feasible due to technical limitations.
