Prestio

De vale ciego a app en el bolsillo: saldo, comercios y control cuando el cajero espera.

Pantalla principal de Prestio: saldo disponible, tarjetas y accesos rápidos

Acerca de

Lideré de 0→1 la primera app iOS y Android de vales de despensa y gasolina: el canal digital que el plástico no tenía. Como único diseñador armé UX, UI, identidad y design system en ~5 meses, y dejé handoff listo para BA, desarrollo y QA. Nombre cambiado por confidencialidad.

0→1Primera app del producto
iOS · AndroidUna lógica, dos plataformas
3Tabs al alcance del pulgar
~5Meses de diseño
Mi rol
Product Designer — único diseñador: UX/UI móvil, identidad y design system
Entregué
Flujos, arquitectura de información, UI core, sistema en Figma y handoff
Contexto
App nativa · beneficios / fintech · BA, PM, devs, QA · ~5 meses

El problema

El beneficio ya existía en plástico. El empleado pagaba en el super o la gasolinera, pero no sabía cuánto le quedaba, con qué tarjeta ni dónde la aceptaban hasta el cobro, o después, con fricción.

No faltaba “una app bonita”: faltaba un canal de control en el momento de uso. Quien abre Prestio lo hace con prisa, a menudo en público, con el cajero esperando.

El job: en segundos, saber si puede pagar, con qué vale y qué hacer (ocultar saldo, bloquear, encontrar comercio) sin menús ni pasos de más.

Las condiciones

  • Claridad al abrirSaldo y tipo de vale legibles en la primera capa — sin scroll.
  • Decisión en calleComercios cercanos que aceptan el vale activo e historial que se entiende de un vistazo.
  • Control con criterioBloqueo rápido en Home; robo o baja de tarjeta con fricción deliberada.
  • Una mano, dos OSNavegación al pulgar; misma lógica en iOS y Android para no diseñar dos productos.

Producto móvil

Cómo lo resolví

De la arquitectura de información al flujo core, al uso en calle y a un sistema que el equipo pudiera implementar sin adivinar.

01Arquitectura

Tres tabs. Solo el día a día

Había dos caminos: menús profundos “completos” o un tab bar de tres. Aposté por lo segundo (Inicio, Movimientos, Comercios) para que lo crítico quepa en un pulgar.

Lo que no es del momento de pagar (legales, ayuda extensa, soporte raro) no compite por el bar: vive en Perfil, accesible desde el avatar en Home, o en pantallas secundarias. Prioridad: abrir y actuar, no explorar un árbol.

Inicio — saldo, tarjetas y accesos rápidos
Inicio

¿Cuánto tengo y con qué vale pago? Respuesta en la primera capa.

Movimientos — historial de compras y recargas
Movimientos

Entradas y salidas a la vista; filtra por tipo, no por menú.

Comercios — mapa y listado geolocalizado
Comercios

Dónde aceptan el vale activo, cerca y ya.

Perfil — configuración y seguridad
Perfil

Config y acciones de alto riesgo: fuera del camino caliente.

Mapa de módulos · arquitectura y flujos
Mapa de la app Una sola arquitectura de información para iOS y Android — antes de bajar a pixel.

02Flujo core

El Home es el momento de pagar

El Inicio no es un dashboard de marketing: es el flujo crítico abrir → entender → actuar. Lo diseñé para una mano, prisa y espacio público.

  • Multitarjeta sin dudaWallet: al pasar de Despensa a Gasolina cambian color y saldo — se ve con cuál pagas.
  • Privacidad en la filaEl saldo es el centro; un toggle lo oculta si hay miradas ajenas.
  • Control en un tapVer CVV y apagar tarjeta bajo el saldo. Si no encuentra el plástico, lo bloquea al instante.
Home — wallet, saldo y control Primera capa sin scroll: todo lo que el job exige en el momento de cobro.

03Uso en calle

El saldo no basta: hay que decidir afuera

Una app de beneficios que solo muestra un número deja al usuario a medias. Lo resolví con dos preguntas más: dónde pagar y qué pasó con el dinero.

  • ComerciosMapa y listado de tiendas que aceptan el vale activo — la duda #1 fuera de casa.
  • MovimientosRecargas vs consumos a la vista; montos y fechas agrupados por día, filtrables por tipo de movimiento.
Mapa de comercios cercanos con pin activo y card del comercio seleccionado
Comercios — dónde sí puedo pagar Mapa y card del comercio seleccionado: la duda #1 fuera de casa, resuelta sin salir de la app.

Fricción solo donde evita daño

Bloqueo temporal en Home (un tap). Robo o eliminar tarjeta en Perfil, con más pasos y doble confirmación, para no cancelar por error con prisa.

Una lógica, dos plataformas

Un solo modelo de navegación y componentes adaptados a iOS y Android: el equipo no mantiene dos productos conceptuales.

Design system

El sistema que entregué

La marca del plástico se sentía vieja. Rediseñé identidad y un sistema en Figma para que cada pantalla no se reinventara: color por tipo de vale, estados y piezas compartidas entre plataformas.

  • Tokens — color, tipo y elevación con lectura clara despensa vs gasolina.
  • Componentes — estados default, error, disabled y loading listos para spec.
  • Handoff — assets y reglas para BA, dev y QA: una fuente de verdad.
Sistema visual Prestio: botones, chips, tab bar, tarjetas, inputs y tokens de color

Cierre

Resultado

Una app 0→1 lista para construir: navegación, pantallas del momento de pago y sistema, no un paquete de mockups sueltos.

  • 3 tabs · arquitectura de la app
  • 1 flujo core sin scroll
  • ~5 meses 0→1
  • 1 sistema iOS/Android
  • Canal digital donde no había

    Del plástico opaco a una app con saldo, comercios y control: el producto pasó a vivir en el bolsillo del empleado.

  • Diseñado para el momento de uso

    Home y navegación pensados para prisa y una mano: menos pasos entre “abrir” y “puedo pagar”.

  • Listo para implementación

    Arquitectura, pantallas core y design system en Figma: BA, dev y QA con una sola fuente de verdad.

Aprendizaje

«El flujo core de una app de dinero no es adorno: es abrir, entender y actuar antes de que el cajero pierda la paciencia.»