federico forrester mango online mobile payments

Estamos muy contentos de darle la bienvenida al equipo de Mango a Federico Forrester.

Federico tiene una importante trayectoria en operaciones comerciales al haberse desempeñado en PayU Latam como Gerente Comercial, desarrollando clientes tanto locales como internacionales en verticales como turismo, games, recaudos, tecnología, venta directa y otros verticales. Previamente se desempeñó como Gerente Comercial en Bumeran.com, uno de los portales de empleo más importantes de LatAm, atendiendo a grandes empresas en mercados como FMCG, petroleras y consultoras de RRHH. Posee una amplia experiencia en ventas, tanto formando equipos como así también atendiendo clientes.

En Mango, Federico se desempeñará como Business Developer, llevando nuestro producto a clientes en diferentes puntos de Latinoamérica, generando partnerships con compañías y entidades claves para la mejora y avance de los pagos mobile/online y ayudar a nuestros clientes a ofrecer la mejor experiencia de pagos en múltiples canales.

En su tiempo libre, Federico disfruta de su familia y como ex jugador de rugby sigue a sus hijos en el deporte. Además hace unos años empezó teatro.

¡Bienvenido Federico!

¿Querés trabajar en el equipo de Mango? Tenemos todas estas búsquedas abiertas. ¡Postulate ahora!

hotsale

Introducción

En los últimos años, cientos de compañías aprovechan diferentes oportunidades para vender sus productos o servicios en iniciativas especiales que se dan durante diferentes momentos del año, como por ejemplo, Hot Sale o Cyber Monday.

Si bien estas oportunidades de venta son realmente importantes (algunas empresas reportan 22x de aumento de ventas durante estos días), también son una prueba de estrés para las infraestructuras y diferentes sistemas implicados en el proceso de ventas.

En este artículo les acerco información sobre la industria de pago y algunas recomendaciones para poder sacarle el máximo provecho al gran volumen de tráfico provocado por estas iniciativas; para poder convertirlo en una mayor tasa de ventas concretadas.

Números de comercio

Para poder aceptar pagos con tarjeta de crédito es necesario contar con un número de comercio.
La empresa tendrá un número por cada emisora de tarjeta de crédito (Visa, FirstData, o American Express por ejemplo).
Empresas como MercadoPago o PayU (ex Dineromail) le brindan la posibilidad a empresas u organizaciones pequeñas de realizar ventas sin la necesidad de dar de alta su propio número de comercio al operar a través de su plataforma.

Por otro lado, en el caso de PyMEs o empresas más grandes, es de su preferencia operar directamente con sus propios números. Esta decisión suele tomarse principalmente por la posibilidad de administrar sus propios fondos y sus propias promociones bancarias. Por dicho motivo, se dan de alta con las tarjetas en forma directa e independiente.

Terminales

A cada número de comercio se le asignan terminales. Una terminal es el medio por el cual se procesa una transacción. En un comercio a la calle, la terminal suele ser (en Argentina) de PosNet o LaPos.
Cuando se opera de forma online, se le asignan terminales “virtuales” a un comercio. Por lo general, cuando recién se comienza a operar, entre 1 y 3 terminales.

Empresas u organizaciones con altos volúmenes transacciones suelen contar con mayor cantidad de terminales.

A mayor cantidad de terminales disponibles,
mayor cantidad de transacciones en simultáneo se pueden realizar.

¿Esto que significa? En síntesis, 3 terminales pueden hacer 3 transacciones en simultáneo. La cuarta, falla.

El problema

Adicionar terminales a un comercio es una tarea administrativa y no suele ser rápida:

  • Se le debe solicitar al procesador nuevas terminales.
  • Se debe demostrar un volumen de transacciones suficiente para justificar el pedido.
  • En caso de calificar, el promedio de otorgamiento ronda entre 2 y 3 semanas.

Esto significa que en lo posible, frente a estos casos, se deben solicitar terminales adicionales de antemano para tener un menor embudo transaccional.

Sin embargo, si al comercio no se le brindan terminales adicionales en el tiempo que necesita, o si el negocio tiene un incremento de ventas fuera de lo común (por publicidad o eventos como un “Hot Sale”) y comienza a tener mayor cantidad de transacciones que las soportadas, empezará a tener transacciones rechazadas por terminales no disponibles.

La propuesta de valor de Mango

terminales

Mango a través de su producto y plataforma, provee un servicio de encolamiento de pagos para mitigar esta problemática. Este encolamiento lo que permite es que frente a la falta de disponibilidad de terminales, los pagos queden en un estado pendiente. Cuando Mango detecta que las terminales vuelven a tener disponibilidad, ejecuta los pagos pendientes en la cola.

queue_updated

El comercio tiene el control total sobre la experiencia del usuario en este estadío, pudiendo optar por enviarle un correo al comprador una vez que la transacción se procese, o cualquier otra alternativa que elija.

Que el próximo Hot Sale o Cybermonday no te encuentren desprevenido/a. Te invito a probar nuestra plataforma creando una cuenta. Adicionalmente, si te interesa recibir una demostración de nuestro producto en tu empresa u organización escribinos a hola@getmango.com

 

slideout

En Mango siempre nos esforzamos en diseñar la mejor experiencia para nuestros usuarios a la hora de utilizar nuestros productos desde cualquier dispositivo. Ya sean celulares, tablets o computadoras de escritorio.

Nuestro panel de administración es una single-page application que construimos aplicando el concepto de Mobile first donde el proceso de diseño empieza a pensarse comenzando por el uso de dispositivos móviles y luego se va adaptando a otros dispositivos. Además de pensar en diferentes resoluciones, hay que pensar en las diferentes capacidades con las que contamos en cada dispositivo y utilizarlas para poder brindar la mejor experiencia posible.

En este caso, quiero contarles como aprovechando los eventos touch creamos una experiencia mucho más fluida en nuestro panel. Seguramente, cuando usan una aplicación nativa, están acostumbrados a abrir un menú arrastrando la pantalla desde un costado.

En las últimas semanas estuvimos trabajando para llevar esa interacción a nuestra web app y estamos muy contentos de anunciar Slideout.js.

Slideout.js es un módulo open source que ofrece la posibilidad de utilizar el patrón off-canvas en tu sitio o aplicación web de una forma muy sencilla aprovechando al máximo los eventos touch, de una manera muy fluida, sin dependencias y sólo en 4 Kb.

Slideout.js demo

Los invito a que lo prueben desde sus dispositivos touch y si están interesados nos ayuden a mejorarlo: testeando, cargando issues o agregando mejoras.

¡Hasta la próxima!

A very important part of the build phase of a single-page app it’s the bundling process, which consists in combining the app’s files and modules needed in order to run it.

In Mango’s Dashboard we used Browserify to structure the front-end.

Browserify provides lots of advantages and useful features as we outlined in this post.

The simplest bundling process using Browserify has an output of a single JavaScript file that contains the whole application logic.

The problem with single bundles

As new features are added to the app, the size of the bundle also increases and create some inconvenients:


– Download time increases.
– Time to interpret the code also increases.

Our Dashboard -like most single-page apps- needs to download, parse and interpret code before rendering the views.
This creates longer waiting periods before being able to use the app, directly affecting the user experience.

The first problem -although real- it does’t manifest in a linear fashion as the output code increases. As TJ VanToll points out, gzip compression is very powerful and works better with larger files (the bigger the file, the more repetitions it needs to find).

The bigger problem relies with the parsing and interpreting timeframe of the initial code.

Filament Group made an interesting analysis about the penalisation of using certain popular MVC frameworks that provides a clear vision of the problem.

factor-bundle to the rescue

factor-bundle works as a Browserify plugin that receives multiple files as entry points (in our case are mapped to the sections of our app), analyses their content and generates two things: an output file for each input file, and also an extra file that contains the related dependencies between them.

Thanks to this ‘factorization’ of dependencies, when users load the app, only downloads the JavaScript associated to the section that they’re visiting and the related dependencies. The remainder sections will only download in an asynchronic way and without repeating the dependencies downloaded while the users navigate the Dashboard.

A small optimization we make is for each output file creating another file with the shared dependencies. This avoids downloading an extra script (-common-.js).

The output after the process looks like this:

.
|-- config-0.3.6.js
|-- config-common-0.3.6.js
|-- login-0.3.6.js
|-- login-common-0.3.6.js
|-- store-single-0.3.6.js
|-- store-single-common-0.3.6.js
|-- stores-0.3.6.js
|-- stores-common-0.3.6.js
|-- user-0.3.6.js
`-- user-common-0.3.6.js

There are optimisations to delay downloading not used modules, i.e. detecting mouse proximity to links to different sections or similar strategies. We decided to talk about these optimisations in future posts.

Conclusions

Separating bundles resulted in an optimization of waiting times of around 30% when users logged in to our Dashboard; thanks to the decreased size of the initial script and also the fewer amount of code to interpret. Also, adding new sections doesn’t impact the performance of the app’s initial load.

There are a lot of techniques to enhance the initial load of single-page apps. One we’re investigating right now is the shared rendering between client and server. A very interesting advantage of bundle factorization is that it’s almost exclusively a change in the compilation process of the app.
Business logic and rules remained intact.

Any doubt, comment or experiences you want to share, please contact me via Twitter: @dzajdband.