Caso UX/Product: Cómo ayudamos a una fintech a crear un sitio para comprar y vender dólares

Juan Martín Germano
WhoKnows
Published in
4 min readAug 20, 2019

Un estudio de caso sobre el diseño de una aplicación web

Este artículo es una explicación de cómo realizamos este trabajo. Si te interesa más la parte visual que la historia, entrá a este link

En Argentina el dólar es una herramienta que muchos utilizan no solo para preservar el valor de la moneda sino también para ahorrar. En un país en el que todos los meses más de un millon de personas compran y venden dólares por home banking, a CambioAR le surgió la idea de sumarse como una alternativa más, pero con el diferencial de ofrecer un mejor precio que el resto del mercado achicando el spread.

La secuencia que proyectaron los emprendedores de esta fintech era la siguiente: una persona bancarizada quiere comprar dólares. En su banco el dólar tiene un valor. En CambioAR, el dólar está más barato. Se hace una cuenta en el sitio en algunos minutos, la empresa la valida, vincula sus cuentas bancarias, y compra dólares a un mejor precio, ganando unos pesos más por dólar.

Con esta premisa, formamos un equipo junto a CambioAR para diseñar un producto desde cero.

Project kick-off

Comenzamos a trabajar en este proyecto con el siguiente desafío: la empresa ya se encontraba trabajando junto a un equipo de desarrollo y tenía una buena parte del producto ya armado desde la parte funcional.

Con un back-end alimentando un prototipo realizado con Bootstrap, tuvimos que amoldarnos a gran parte del flujo de navegación que el equipo había diagramado.

Esto es lo que cambioAR necesitaba de nosotros:

  • Diseñar el producto a nivel UX/UI desde lo realizado por los desarrolladores
  • Desarrollar las interfaces de forma 100% responsive y hacer un hand-off al equipo de desarrollo
  • Diseñar un sistema de piezas para correr anuncios en Facebook, Instagram y Google.

Desde las palabras hasta lo visual

A partir de un trabajo realizado con el equipo de CambioAR 100% enfocado en el copywriting que iba a tener el sitio, comenzamos a volcar las palabras sobre distintos layouts en wireframes de baja fidelidad.

A partir de estos wireframes y de un relevamiento de sitios de referencia, empezamos a definir la estructura visual del producto

Algunas de las aproximaciones que planteamos como wireframes cuando comenzamos a estructurar el sitio

A partir de este momento, con una estructura visual definida, el proyecto empezó a tomar su rumbo hacia lo que se convertiría en el producto final.

Con enfoque en mantener a la marca presente durante toda la experiencia, comenzamos a darle vida al diseño visual del producto.

Algunas de las pantallas finales tomadas desde Figma, el software que utilizamos para diseñar el producto

Desarrollando las interfaces

Una vez que cerramos el diseño del producto en su totalidad, comenzamos a desarrollar (o como le decimos en la vieja escuela, “maquetar”) las interfaces.

Considerando que necesitábamos feedback constante no solo de los founders de CambioAR sino también del equipo de desarrolladores trabajando en el producto, deployamos nuestra propia versión del sitio en Netlify.

(Si sos una persona curiosa, el proyecto sigue estando en la nube. Podés verlo en este link)

Con esto te vas a encontrar hoy si ingresás a whoknows-c-ar.netlify.com, la maqueta completa del producto, 100% responsive

Gracias a esto, el producto se podía testear pantalla por pantalla, desde cualquier navegador, y desde cualquier dispositivo, sin la necesidad de pasar por todo el proceso de volcar el desarrollo de las interfaces sobre el front-end del sitio.

A partir del desarrollo de las interfaces, el equipo de CambioAR debía tomar los componentes desarrollados visualmente y volcarlos sobre el front-end del producto, en el servidor que estaba utilizando la empresa.

Este punto fue vital; contábamos con dos versiones de CambioAR: un prototipo estático, y el producto real conectado al back-end. Como nuestra tarea fue encargarnos del diseño visual y de la experiencia del producto, era importantísimo para nosotros contar con un punto de referencia estético para darle feedback al equipo de desarrollo.

Comparando una versión con la otra fue como de a poco fuimos puliendo las interfaces finales y llegando al producto que CambioAR lanzó en mayo de 2019.

En esta nota podés leer a Daniel Levi, co-fundador de CambioAR, contando de qué se trata el producto: https://www.infotechnology.com/negocios/Son-argentinos-invirtieron-us-500.000-y-ahora-venden-dolar-barato-por-internet-20190701-0004.html

--

--

Juan Martín Germano
WhoKnows

I help startups and entrepreneurs scale visibility through Product Design and Strategy / imgermi.com