Banco BCI Chile (via Globant) · 2022–2024

BciPlus+ SDK:
beneficios transversales
en múltiples canales

EmpresaBanco BCI Chile (via Globant)
RolUX Designer
ProgramaBciPlus+ — Cashback & Beneficios
CanalesApp BCI · MACH · SSFF
Product Design Design System Service Blueprint Stakeholder Management SDK Modular
Contexto

Un programa de beneficios,
tres canales distintos

Desafío de experiencia transversal

BciPlus+ es el programa de cashback del Banco BCI de Chile. El desafío no era diseñar una sola app — era diseñar un sistema de beneficios que funcionara de forma coherente y escalable en tres ecosistemas móviles completamente distintos.

Cada canal tenía su propio design system, su propia audiencia y sus propias restricciones técnicas. El SDK debía integrarse en todos sin perder identidad ni consistencia.

App BCI
Canal principal
App del banco. Audiencia amplia, clientes con productos financieros activos.
MACH
Wallet digital
App independiente orientada a un público joven y digital. Identidad propia.
SSFF
Canal corporativo
Canal de servicios financieros con usuarios de perfil corporativo y B2B.
El Desafío

Diseñar una vez,
integrar en todos lados

El SDK tenía que ser modular, adaptable y escalable — sin que cada equipo de producto tuviera que reinventar la rueda al integrarlo en su canal.

🧩
Consistencia entre canales
La experiencia BciPlus+ debía sentirse coherente en BCI, MACH y SSFF, aunque cada uno tuviera su propio lenguaje visual y restricciones técnicas.
⚙️
Modularidad real
Los módulos debían poder activarse, desactivarse y reordenarse según el canal sin romper la experiencia. Cada canal elegiría qué mostrar y cómo.
👥
Múltiples stakeholders
Coordinar con tres equipos de producto distintos — BCI, MACH y SSFF — con prioridades, timelines y criterios de aceptación diferentes.
🎨
Design system adaptable
El sistema de componentes tenía que ser lo suficientemente neutral para integrarse en identidades visuales distintas sin perder la identidad BciPlus+.
Proceso de Discovery

De la pregunta
a la arquitectura

El proceso arrancó con un Discovery intensivo — entender cómo funcionaba BciPlus+ en el canal existente, qué esperaban los stakeholders de cada canal y qué restricciones técnicas había que respetar.

1
Análisis del canal existente

Relevamiento del flujo actual de BciPlus+ en la App BCI — blueprint completo de acciones del usuario, backstage y tracking.

2
Sesión con stakeholders

Workshop con equipos de BCI, MACH y SSFF para alinear expectativas, levantar preguntas críticas y definir qué era innegociable en cada canal.

3
Crazy 8 en equipo

Sesión de ideación rápida con el equipo de diseño para explorar múltiples conceptos de arquitectura modular antes de converger en una propuesta.

4
Definición del MVP

Con los inputs del equipo y los stakeholders, priorizamos los módulos del primer release y definimos el criterio de escalabilidad hacia canales futuros.

Service Blueprint

Trazando toda
la experiencia

Mapeamos la experiencia completa — desde el engagement inicial hasta el movimiento de cashback — incluyendo las acciones del usuario, el backstage del sistema y los datos de tracking.

🗺️
Momentos clave
Identificar en qué puntos del journey el usuario interactúa con BciPlus+ — y qué acciones del sistema ocurren sin que lo vea.
🔌
Gaps de integración
Detectar dónde la experiencia se fragmentaba al pasar de BCI a MACH o SSFF — fricciones invisibles para el usuario pero evidentes en el blueprint.
📡
Coordinación cross-canal
Entender qué acciones de backstage — notificaciones, tracking de pixel, validación de cashback — debían sincronizarse entre los tres canales.
Service Blueprint BciPlus+ SDK

Service Blueprint — engagement, inicio, home, detalle de oferta y movimientos

Ideación

Ocho ideas,
un solo equipo

El Crazy 8 fue clave para divergir antes de converger. Cada diseñador del equipo — Clau, Nacho, Mati — exploró su propia lectura de cómo debían organizarse los módulos.

Las ideas más votadas compartían un patrón: modularidad vertical con secciones independientes, donde cada bloque pudiera existir o no según el canal, sin romper el flujo general.

Principio que guió el diseño

Si cada módulo es autónomo y configurable, entonces cualquier canal puede activar solo lo que necesita — sin forzar una experiencia genérica que no encaje en ninguno.

Crazy 8 del equipo

Crazy 8 — sketches rápidos del equipo para explorar la arquitectura modular

Arquitectura & Design System

Los módulos del
SDK

Diseñamos 6 módulos independientes con dos variantes visuales cada uno — adaptables según el canal que los integre.

Módulo 1
Header
Identidad BciPlus+ y acceso rápido al saldo de cashback disponible.
Módulo 2
Caja / Saldo
Resumen del cashback acumulado, por validar y abonado en cuenta.
Módulo 3
Destacados
Carrusel de ofertas personalizadas según el perfil y comportamiento del usuario.
Módulo 4
Categorías / Filtros
Navegación por rubros — Deporte, Hogar, Comida, Moda — adaptable por canal.
Módulo 5
Vitrina
Grid de ofertas y descuentos del ecosistema BciPlus+ con badge de cashback visible.
Módulo 6
Acceso Socios
Conexiones y partners del programa — marcas adheridas y beneficios especiales.

Design System compartido

Para que los módulos funcionen en tres canales distintos, construimos un design system neutral con variables de color, tipografía y componentes adaptables.

🎨
Sistema de color
Color primario de la fuente + colores secundario, terciario y auxiliares. Cada canal aplica su primario manteniendo la estructura.
✍️
Tipografía — Overpass
Tipografía funcional y multiplataforma, pensada para legibilidad en pantallas pequeñas y contextos de alta densidad de información.
🧱
Componentes modulares
Cada módulo existe como componente independiente en Figma, con estados, variantes y documentación para el handoff a dev.
Módulos y design system

Propuesta de módulos con dos variantes + design system (colores y tipografía)

Producto Final

El SDK en
funcionamiento

Las pantallas finales muestran el SDK integrado en la App BCI — desde el home con beneficios hasta el detalle de movimiento de cashback, pasando por búsqueda y categorías.

Pantallas finales BciPlus+ SDK

Pantallas del SDK — home, historial de movimientos, cashback, búsqueda, categorías y detalle de oferta

Resultados

Impacto
del proyecto

El SDK Modular resolvió el problema de escalar BciPlus+ sin triplicar el trabajo de diseño en cada canal.

3
Canales integrados con un sistema único — BCI, MACH y SSFF
6
Módulos independientes diseñados con variantes para cada canal
MVP
Definición, validación con stakeholders y handoff a desarrollo completados
Aprendizajes

Lo que me dejó
este proyecto

1
Diseñar para sistemas, no para pantallas
El mayor cambio de mentalidad fue dejar de pensar en "la pantalla del home" y empezar a pensar en "el módulo que vive en el home de tres apps distintas".
2
Los stakeholders son parte del diseño
Con tres equipos involucrados, la sesión de preguntas y pensamientos fue tan importante como cualquier wireframe. Alinear antes de diseñar evitó retrabajo enorme.
3
La modularidad tiene un precio
Diseñar componentes verdaderamente independientes requiere mucho más trabajo upfront — pero multiplica el valor cuando llega el momento de escalar.
4
El design system es un producto
La documentación, los estados de componentes y las guías de implementación no son un extra — son lo que hace que el trabajo de diseño sobreviva al traspaso a desarrollo.