Product Design:
Mercado Pago
This is a project designed during a process to join an UX bootcamp at Mercado Livre. The idea is to develop the visual design for some screens on the Mercado Pago app.
Mercado Livre shared a wireframe for 3 screens developed for the Mercado Pago app. My task was to create visual design for these screens, including: a presentation about the design process, style guides, userflow, UI design and a prototype.
The App
At Mercado Pago, their are working on the product Mercado Pago POS, an application (for Android and iOS) that allows add funds with a credit card through Mercado Pago from anywhere. This application works with a credit card reader that connects to the device via Bluetooth.
1. Challenge
About the product and the proposed challenge
The product is the Mercado Pago POS (Point of Sale), which are devices for in-person payment collection. In this particular case, a machine that requires a mobile phone to perform its functions.
Based on the wireframes provided by Mercado Livre, it's necessary to develop the visual proposal for a standard payment flow for the Android app. The process consists of 3 stages:
1. Generate a new payment
2. Insert/swipe the card
3. Congratulations screen
Wireframes provided:
.png)
2. Project
User-Centered Design Thinking method
The User-Centered Design Thinking method aims to develop a project and its delivery based on the following stages:
1. Understand how the user experiences the product: via mobile for making payments.
2. Understand which problems are the user's needs: to make the payment and receive on-screen confirmation.
3. Generate design solution ideas.
4. Evaluate the solutions to ensure they meet the user's needs and develop the prototype.
Ideation
Based on the proposed challenge and the design thinking analysis,
the following ideation has been defined:
The user needs to use the app via mobile to make a payment
and receive on-screen confirmation, following the design pattern
defined in the wireframe files.
Userflow
The userflow follows the plans outlined during ideation:
Style Guides
The User-Centered Design Thinking method aims to develop a project and its delivery based on the following stages:
1. Understand how the user experiences the product: via mobile for making payments.
2. Understand which problems are the user's needs: to make the payment and receive on-screen confirmation.
3. Generate design solution ideas.
4. Evaluate the solutions to ensure they meet the user's needs and develop the prototype.
All images used in this presentation are property of Mercado Livre.
3. Prototype
Using the wireframes and style guide, the prototype was developed as follows:
