Lanzado Fintech · Ecosistema de Pagos · 2021-2024

eCloud4

Un ecosistema que integra pagos, beneficios y fidelización en una sola plataforma.

Conectando el valor de cada compra entre usuarios y comercios.

Dashboard de eCloud4 App móvil de eCloud4
Desafío

Los usuarios buscan valor en cada compra.

Los comercios buscan razones para que regresen.

* Esta tesis sale de las entrevistas con usuarios y comercios en Canadá.

Solución

Una experiencia financiera que conecta a usuarios y merchants.

Los usuarios pueden gestionar su dinero y acceder a beneficios, mientras los merchants cuentan con herramientas para operar y generar valor dentro del mismo ecosistema.

Rol
Product Designer
UX, UI y Design System
Figma Adobe XD Miro Jira ChatGPT Lottie Files
Fintech Ecosistema de Pagos 2021—2024
Mi contribución

Diseñar un ecosistema que pudiera crecer con el producto

Exploré cómo los beneficios podían formar parte de la experiencia de compra de manera relevante, creando valor tanto para usuarios como para comercios.

DESIGN SYSTEM UX/UI RESEARCH ARQUITECTURA FIDELIZACIÓN IDEACIÓN QA TESTING
Investigación

Entender qué hace que un beneficio se sienta real

Antes de diseñar una sola pantalla, necesitábamos entender por qué los programas de fidelización tradicionales se sienten abstractos tanto para quien paga como para quien vende.

Métodos o herramientas: Entrevistas con usuarios y comercios aliados Análisis de flujos de pago existentes Benchmark Talleres con stakeholders de negocio
Lo que vimos en las entrevistas Cómo lo resolvimos
80%
Usuarios
Prefieren una sola app para el dinero, el banco y las promociones.
01
Una app para pagar y ganar
El pago, el banco y el beneficio viven juntos, no en mil apps distintas.
7/10
Comercios
Quieren que sus promociones lleguen más a sus clientes, no quedarse en otra herramienta.
02
La promoción llega al cliente
El comercio la publica en el punto de venta y ve si realmente llega a quien compra.
90%
Usuarios
Pierden promociones porque no saben cuándo vencen ni cuándo usarlas.
03
El beneficio se ve a tiempo
En el momento del pago queda claro qué promoción aplica y hasta cuándo.
Julián, buyer persona
Persona · usuario de la app

Diseñando para Julián

J
Julián, 29 años
Comprador frecuente en comercios afiliados

Necesidad — Ver de forma inmediata cuánto gana o ahorra al pagar con eCloud4, sin hacer cuentas.

Frustración — Los puntos y beneficios se sienten abstractos: no sabe cuánto valen realmente hasta que intenta canjearlos.

Qué lo haría confiar — Un balance claro y un beneficio visible en el momento exacto del pago, no después.

Persona · usuario del backoffice

Diseñando para Marcela

M
Marcela, 41 años
Dueña de un comercio de barrio afiliado

Necesidad — Saber qué recompensas hacen que sus clientes vuelvan, sin armar reportes a mano.

Frustración — Ofrece beneficios, pero no ve si funcionan: no puede distinguir una venta nueva de una que habría ocurrido igual.

Qué la haría confiar — Un tablero claro, con cifras que entiende de un vistazo y cobros que se reflejan al instante.

Marcela, buyer persona comerciante
Arquitectura del ecosistema

Una app y un dashboard completos

Abajo está el recorrido que más valor genera: pagar y ver el beneficio en un solo gesto. Alrededor de eso diseñé el producto entero, en la app y en el backoffice.

Onboarding y tutoriales Remesas Seguridad y verificación Roles y permisos Funciones principales y mucho más

El recorrido en cinco momentos

De explorar comercios a ver resultados en el dashboard, el beneficio viaja con el pago.

01
Explorar comercios Comercios aliados y beneficios activos.
→
02
Pagar en el ecosistema Un solo método, sin fricción.
→
03
Ver beneficio al instante El ahorro o los puntos, visibles ya.
→
04
Acumular y canjear Beneficios usables en cualquier momento.
→
05
Dashboard de comercio Visibilidad de qué beneficio funciona.
Del boceto a la pantalla

Explorando la estructura antes del detalle visual

Antes de definir estilo o color, validé jerarquía de información y flujo de pago con wireframes de baja fidelidad. Arrastra el control para comparar el antes y el después.

App móvil de eCloud4
Antes Después
App de usuario: balance, promoción y pago con QR
Backoffice de eCloud4
Antes Después
Backoffice: crear una campaña en tres pasos
Sistema de diseño

La misma base para dos frentes

Cinco capas, un solo sistema. El ejemplo es el backoffice; la app usa las mismas piezas adaptadas.

Identidad compartida. Se usa igual en cada pantalla.

Piezas reutilizables, hechas con átomos.

Un bloque que completa una tarea: crear un usuario.

Un marco estable para cabecera, cuerpo y acción.

La pantalla armada con los elementos anteriores, que dan vida a la plataforma.

Azul#0652E1
Menta#40DF92
Azul vivo#0087F9
Cielo#46C0F8
Agua#49C6C2
Gerente de sucursal
NombreJohn
EmailJohnDoe@email.com
EstadoActivo
Crear
NombreJohn
ApellidoDoe
ComercioFresh and Organic▾
RolGerente de sucursal▾
EmailJohnDoe@email.com
PaísCanada
ProvinciaAlberta
CiudadCalgary▾
Dirección7 Ave.South West.
Teléfono+15873172579
EstadoActivo▾
Crear un usuario
Crear un usuario
NombreJohn
ApellidoDoe
ComercioFresh and Organic▾
RolGerente de sucursal▾
EmailJohnDoe@email.com
PaísCanada
ProvinciaAlberta
CiudadCalgary▾
Dirección7 Ave.South West.
Teléfono+15873172579
EstadoActivo▾
Crear
Proceso

Cómo llegamos a la solución

Haz scroll o clic en un paso para ver las etapas del proceso.

  1. Usuarios y negocio en la mesa

    Me reuní con usuarios y stakeholders para alinear cada flujo antes de dibujar pantallas.

  2. Qué entra y qué espera

    Con el equipo definimos qué iba al sprint y qué se quedaba en backlog.

  3. Un mapa para los dos frentes

    Armé la app y el backoffice como un solo sistema, no como productos aislados.

  4. Flujos listos para validar

    Diseñé cada recorrido y lo validé antes de construir.

  5. De la mano con desarrollo

    Revisamos la propuesta con el equipo técnico hasta poder construirla bien.

  6. Probado, y luego al usuario

    Testeamos función y diseño. Llegó al usuario ya probado por QA, desarrollo y diseño.

Usuarios y negocio en la mesa

Me reuní con usuarios y stakeholders para alinear cada flujo antes de dibujar pantallas.

Visuales

La experiencia en detalle

Haz clic en una pantalla para verla de frente. Esc o clic de nuevo para volver.

App móvil de eCloud4
App de usuario
Backoffice de eCloud4
Backoffice

2026 Actualicé el sistema de diseño en la app y el backoffice para aplicar neumorfismo en los flujos, e ilustraciones 3D.

App de usuario

Backoffice

Resultado

Pagar y ganar, en un solo gesto

Pagar y ganar, en un solo gesto

El beneficio de cada compra se hace visible en el mismo momento del pago, no en una pantalla aparte.

Visibilidad real para comercios

El dashboard muestra con claridad qué beneficios realmente traen clientes de vuelta.

Una base escalable

Un sistema de diseño y una arquitectura de ecosistema listos para sumar nuevos beneficios y comercios aliados.

En sus palabras

Colegas con los que he trabajado.

“

He tenido el placer de trabajar de cerca con Melanie durante los últimos años y no puedo recomendarla lo suficiente. Melanie es una diseñadora gráfica y de UX increíblemente talentosa, con un ojo excepcional para el detalle y la creatividad. Su pasión por el diseño se nota en cada proyecto que emprende, y su dedicación a entregar trabajo de alta calidad es realmente admirable.

Andrés Cárdenas
Software & Solutions Architect
“

Melanie fue fundamental en el proceso de construir las funciones tanto para la web como para la aplicación móvil que la organización necesitaba. Demuestra talento, conocimiento y se notaba que estaba actualizada con las nuevas tendencias. Supo entender los requerimientos de los stakeholders para traducirlos en pantallas intuitivas y fáciles de usar. En cuanto a su relación con el equipo, siempre estuvo abierta a recibir y dar feedback. Sin duda tiene buena energía y es muy proactiva, aportando ideas que ahorran tiempo y dinero.

Felipe Arango
Fintech, Marketplace & Mobile Developer
“

Melanie es una gran profesional, muy talentosa en el área de diseño y una gran persona. Los diseños de Melanie son de la más alta calidad y su compromiso y dedicación con sus proyectos son de admirar.

Felipe Rojas
Software Engineer · Node · Angular
Aprendizajes

Lo que me llevo de este proyecto

  1. 01

    Diseñar un ecosistema de pagos exige pensar en dos experiencias simultáneas: la de quien paga y la de quien recibe.

  2. 02

    El valor percibido de un beneficio depende de qué tan rápido se hace visible, no de cuánto vale en teoría.

  3. 03

    Un sistema de diseño compartido entre app y dashboard evita que la marca se sienta como dos productos distintos.

Ver otros proyectos