Mercado

pago POS

Permite cobrar a tus clientes con tarjeta de crédito y débito a través del lector mercado pago POS, conéctandolo con la app desde cualquier lugar donde estes.
Ejercicio solicitado por Mercado Libre, para probar mis habilidades en el área de diseño de experiencia de usuario e interfaz.

imagen-app-tus finanzas
Herramientas
  • Figma
  • Marvel
  • Photoshop
Duración
  • 7 días
Entregables
  • - Propuesta visual de un flujo de pago en app Android
  • - Landing page promocional
Requerimientos

I Partiendo de una base definida de unos wireframes funcionales, te pedimos que desarrolles la propuesta visual de un flujo de pago standart en la app de Android
El proceso tiene 3 pasos:

  • 1. Generar un nuevo pago.
  • 2. Insertar/deslizar tarjeta.
  • 3. Pantalla felicitaciones.

    • II En paralelo desarrollá también una landing promocional para el lanzamiento de la app de Android en base a un contenido dado.


    No hay un esquema funcional o visual definido. Podés usar las imágenes del producto, imágenes de cualquier banco de imágenes o generar elementos gráficos que necesites (ilustraciones, por ejemplo).

Investigación

Antes de comenzar a diseñar el ejercicio inicié un research para conocer mejor a la empresa, sus objetivos, aplicaciones, sitios web, aspectos visuales estilo, entre otros. Como también investigué de que se trata el lector POS y que valor da a sus usuarios.
Investigué referencias de otras empresas y realicé un benchmark con cada una. Saqué puntos e insights importantes para conocer que realmente funciona y de qué forma realizan cobros y pagos en sus respectivas apps.

square
sumup
paypal
todopago
Usuario

Cree un usuario para entender mejor el negocio y las necesidades que requiere el tener un lector de tarjeta, ya sea para potenciar una tienda, emprendimiento, etc.

Journey Map

Cree un customer journey Map para comprender los puntos del dolor de Rocio, y ver oportunidades e ideas de mejora. Me sirvió para poder visualizar mejor el Landing Page promocional, el cual me permitió saber a qué público abordar y de que forma poder comunicarme con los usuarios, para poder ofrecer de mejor forma el lector.

Ver detalle
Wireframes

Luego de terminar el proceso de research, comence a realizar bocetos a mano del flujo de pago y otras pantallas. Basándome principalmente en los wireframes dados por Mercado Libre.

Nuevo-cobro
Insertartarjeta
procesando
Felicitaciones

Realicé una guia de estilos basándome en el manual de marca entregado por Mercado libre.

Guía de estilo

Guia estilos

Mockups

Nuevo-cobro
deslizartarjeta
leyendoTarjeta
comprobante
Ver prototipo navegable

Prototipo navegable

Landing promocional

header
Encabezado

Decidí colocar el lector junto a la app al inicio para llamar la atención y mostrar el producto. Agregé un call to action para que inmediatamente los usuarios puedan pedir su lector.

Beneficios

Beneficios principales para llamar la atención de los potenciales usuarios.

beneficios
opcionespago
Opciones de pago

Opciones disponibles: Se muestran las imágenes de las tarjetas que pueden ser usadas con el lector de mercado pago, detallando como puede beneficiar al negocio y los usuario, además del costo.

Detalle lector

Muestra el lector como funciona y sus características principales. Haciendo hincapié en su tamaño, pero con grandes beneficios.

lector
seguridad
Opciones de pago

Énfasis a la seguridad, ya que, en las transacciones siempre es importante para los usuarios que sus datos estén protegidos. Además de invitárlos a conocer más sobre la ciber seguridad. La seguridad genera confianza.

Aplicación

Los beneficios y características de la aplicación que acompaña al lector. Como podrán sacarle provecho los usuarios a su negocio. Invitándolos a descargarla.

lector
Ver landing promocional

Diseñado y codeado conpor Natalia Miranda