Dos productos opuestos en una plataforma: una app donde se pide el crédito y un backoffice donde se aprueba. Two opposite products in one platform: an app where the credit is requested and a backoffice where it gets approved.
Completamos el handoff y el desarrollo arrancó. Antes de avanzar más, la empresa reasignó el presupuesto del proyecto a otras urgencias y el desarrollo quedó congelado. Fue una decisión de priorización de negocio, no de producto ni de diseño. We completed the handoff and development started. Before it went further, the company reallocated the project budget to other urgencies and development was frozen. It was a business prioritization call, not a product or design one.
Lo que sí quedó: un proceso de validación documental rediseñado, que pasaba de uno o dos días a minutos, y un sistema de diseño que sirvió de base para el trabajo posterior del equipo. What did remain: a redesigned document validation process, going from one or two days down to minutes, and a design system that became the base for the later work of the team.
El dato de tiempos corresponde al flujo diseñado y a las pruebas internas, no a una medición en producción: el proyecto no llegó a operar. The timing figure corresponds to the designed flow and internal testing, not to a production measurement: the project never went live.
Conaliados otorga crédito a personas y empresas a través de cinco líneas distintas. Nos concentramos en las dos principales: libranza y créditos para SOAT. Conaliados grants credit to individuals and companies through five separate lines. We focused on the two main ones: payroll lending and SOAT credit.
El problema no era decidir si aprobar. Era la validación documental del solicitante: manual, y entre uno y dos días. Para el administrador eso significaba una jornada revisando papeles en lugar de asesorar. Para el solicitante, un limbo sin saber en qué paso estaba ni cuánto le faltaba. En crédito esa espera es cara: quien no recibe respuesta hoy pide el préstamo en otro lado mañana. The problem was not deciding whether to approve. It was validating the documents of the applicant: manual, and one to two days long. For the administrator that meant a workday reviewing paperwork instead of advising. For the applicant, a limbo with no idea which step they were on or how much was left. In lending that wait is expensive: whoever gets no answer today asks for the loan somewhere else tomorrow.
Debajo había una causa heredada: parte de la documentación exigida no incidía realmente en la decisión de crédito. Underneath sat an inherited cause: part of the documentation being required had no real bearing on the credit decision.
Trabajé con otro diseñador, que me consultaba las decisiones de criterio y de implementación. La participación de los 2 desarrolladores fue puntual, en la última etapa del proyecto. I worked with another designer, who came to me for judgment and implementation calls. The 2 developers came in at specific points, in the last stretch of the project.
Lo que no fue mío: las reglas de negocio del crédito vinieron del área que maneja el producto, con quienes hicimos una consultoría dedicada. La implementación fue de desarrollo, y la marca ya existía. What was not mine: the credit business rules came from the area running the product, with whom we ran a dedicated consultancy. Implementation belonged to development, and the brand already existed.
Entrevistamos a 5 personas que habían solicitado créditos de libranza y de SOAT, y lo complementamos con una consultoría con un responsable de la gestión de esos créditos. Esa consultoría fue la que nos dio la letra pequeña de cómo funciona la operación por dentro, que ninguna entrevista con solicitantes podía darnos. We interviewed 5 people who had applied for payroll and SOAT credit, and complemented that with a consultancy with someone responsible for managing those credits. That consultancy gave us the fine print of how the operation works from the inside, which no applicant interview could give us.
Con eso construimos los flujos de las dos caras del producto y la arquitectura de información de cada una. Cada decisión del recorrido quedó resuelta en el diagrama antes de abrir una pantalla. De ahí pasamos a foundations, componentes y prototipos de alta fidelidad hasta el handoff. From there we built the flows for both sides of the product and the information architecture of each. Every decision in the journey was settled on the diagram before opening a screen. Then came foundations, components and high-fidelity prototypes through to handoff.
Diseñé la app del solicitante y el backoffice del administrador como dos productos con lenguajes distintos: la app más expresiva, el backoffice más sobrio y orientado a datos. Lo que descarté fue una sola interfaz responsive compartida, que era más barata de construir y de mantener. I designed the applicant app and the administrator backoffice as two products with distinct languages: the app more expressive, the backoffice more sober and data-oriented. What I ruled out was a single shared responsive interface, cheaper to build and maintain.
El solicitante y el administrador no comparten contexto ni objetivo. El solicitante pide crédito desde el celular, casi siempre una sola vez, y necesita confianza y claridad sobre en qué paso va. El administrador trabaja sentado, revisa solicitudes en serie toda la jornada y necesita comparar y decidir rápido. Una interfaz responsive habría obligado a que uno de los dos usara una versión degradada del producto del otro. The applicant and the administrator share neither context nor goal. The applicant asks for credit from a phone, almost always once, and needs confidence and clarity about which step they are on. The administrator works seated, reviews applications in series all day and needs to compare and decide fast. A responsive interface would have forced one of them to use a degraded version of the product of the other.
La consecuencia fue concreta: el backoffice se construyó con densidad alta y la tabla como unidad principal; la app, con una decisión por pantalla y el progreso siempre visible. The consequence was concrete: the backoffice was built with high density and the table as its main unit; the app, with one decision per screen and progress always visible.
En lugar de optimizar la velocidad de revisión del paquete documental, revisamos qué documentos hacían falta de verdad y rediseñamos la aprobación alrededor de los que sí incidían en la decisión de crédito. Lo que descarté fue dejar la cadena de requisitos intacta y limitarnos a revisarla más rápido, que era la ruta de menor resistencia. Instead of optimizing how fast the document package got reviewed, we looked at which documents were actually needed and redesigned approval around the ones that did bear on the credit decision. What I ruled out was leaving the chain of requirements intact and just reviewing it faster, the path of least resistance.
El tiempo del administrador no se iba en revisar despacio, se iba en revisar de más. Acelerar una tarea innecesaria sigue siendo tiempo perdido. Este fue el cambio que llevó la validación documental de uno o dos días a cuestión de minutos. The time of the administrator was not lost reviewing slowly, it was lost reviewing too much. Speeding up an unnecessary task is still wasted time. This was the change that took document validation from one or two days down to minutes.
Priorizamos que el estado del crédito y la información de pagos estuvieran accesibles sin varios clics de por medio, tanto para el solicitante como para el asesor. Lo que descarté fue el patrón habitual en productos financieros de enterrar los datos sensibles detrás de capas de confirmación, por precaución. We prioritized keeping credit status and payment information reachable without several clicks in between, for the applicant and for the advisor alike. What I ruled out was the usual pattern in financial products of burying sensitive data behind layers of confirmation, out of caution.
El asesor necesita responder en el momento en que el cliente pregunta; si tiene que navegar tres niveles para saber si un pago entró, la asesoría deja de ser oportuna. La protección de esos datos se resolvió en las capas de autenticación y permisos, no escondiendo la información de quien ya tiene derecho a verla. The advisor needs to answer at the moment the client asks; if they have to navigate three levels to know whether a payment landed, the advice stops being timely. Protecting that data was solved in the authentication and permission layers, not by hiding the information from someone already entitled to see it.
Los flujos fueron la forma de ver el problema completo antes de tener una sola pantalla que defender. Mapear las dos caras a la vez obliga a resolver en el diagrama lo que después cuesta caro: dónde se bifurca el recorrido, qué pasa cuando algo falla, en qué punto una decisión del solicitante cambia el trabajo del administrador. Solo con ese panorama encima de la mesa el diseño de pantallas se vuelve una consecuencia en lugar de una apuesta. The flows were how we saw the whole problem before having a single screen to defend. Mapping both sides at once forces you to settle on the diagram what gets expensive later: where the journey branches, what happens when something fails, at which point an applicant decision changes the administrator's work. Only with that picture on the table does screen design become a consequence rather than a bet.
La app resuelve tres cosas: entender qué productos tengo, saber cuánto y cuándo debo pagar, y pagar. El home abre con el saldo pendiente y el próximo pago porque es la pregunta con la que el usuario abre la app. The app solves three things: understanding which products I have, knowing how much and when I owe, and paying. The home opens with pending balance and next payment because that is the question the user opens the app with.
El backoffice está organizado por producto, y dentro de cada producto por solicitudes e historial. La tabla es la herramienta principal del analista: filtros por fecha y estado, orden por cualquier columna y el estado siempre visible como etiqueta. The backoffice is organized by product, and within each product by applications and history. The table is the analyst's main tool: filters by date and status, sorting on any column, and the status always visible as a tag.
Una solicitud puede estar aprobada, rechazada, resuelta o anulada; un crédito puede estar al día o en mora. Cada estado cambia lo que el analista puede hacer en la pantalla, y la anulación exige motivo y fecha para que la decisión quede trazable. An application can be approved, rejected, resolved or cancelled; a credit can be current or in arrears. Each status changes what the analyst can do on the screen, and cancellation requires a reason and date so the decision stays traceable.
Los foundations son la parte del sistema que nadie ve y que decide todo lo demás: cada componente hereda lo que aquí quede definido, y corregirlo después obliga a revisar el producto entero. Por eso el color no se cerró eligiendo valores bonitos sino verificando combinaciones: qué texto puede ir sobre qué fondo, con qué mínimo de contraste, y qué combinaciones quedaban descartadas de entrada. La tipografía se definió con el mismo criterio, especificada por dispositivo para que la jerarquía se sostenga en pantallas pequeñas. Foundations are the part of the system nobody sees and that decides everything else: every component inherits whatever gets defined here, and fixing it later means revisiting the whole product. So color was not closed by picking nice values but by verifying combinations: which text can sit on which background, at what minimum contrast, and which pairings were ruled out from the start. Type was defined on the same terms, specified per device so the hierarchy holds up on small screens.
El sistema quedó como una librería de componentes en Figma, con sus estados resueltos y armada para usarse sin tener que interpretarla. Solo construimos lo que el producto iba a usar de verdad: cada componente extra es trabajo de diseño, de documentación y de implementación que alguien tiene que sostener, así que el catálogo se mantuvo del tamaño del problema y no del tamaño de un sistema ideal. The system ended up as a component library in Figma, with its states resolved and put together to be used without having to be interpreted. We only built what the product was actually going to use: every extra component is design, documentation and implementation work someone has to carry, so the catalogue stayed the size of the problem and not the size of an ideal system.
El proyecto pertenece a un producto de un cliente, así que comparto un subconjunto de pantallas, y los datos que se ven son ficticios, generados para el prototipo. El prototipo completo, los flujos y las decisiones que quedaron fuera puedo presentarlos en una conversación. The project belongs to the product of a client, so I share a subset of screens, and the data shown is fictional, generated for the prototype. The full prototype, the flows and the decisions left out I can walk through in a conversation.
Visualmente el resultado nos dejó orgullosos, pero al llevar los componentes a fondos oscuros aparecieron fricciones de contraste que no habíamos previsto. El error fue de origen: definimos la rampa pensando en cómo se veía sobre fondo claro, no en el rango completo de superficies donde iba a vivir. Hoy la defino contra todos los fondos previstos antes de darla por cerrada. Visually we were proud of the result, but taking the components onto dark surfaces surfaced contrast friction we had not anticipated. The mistake was at the origin: we defined the ramp thinking about how it looked on a light background, not about the full range of surfaces it would live on. Today I define it against every intended surface before calling it closed.
Usamos mucho blanco, y en el backoffice, donde el administrador pasa la jornada entera, eso es fatiga acumulada. El dark mode no se agrega después sin rehacer los tokens: o está en la definición de foundations, o no está. We used a lot of white, and in the backoffice, where the administrator spends the whole day, that is accumulated fatigue. Dark mode cannot be added later without redoing the tokens: either it is in the foundations definition, or it is not there.
Trabajando con datos sensibles y con pagos, la manera de comunicar el estado de la información resultó tan crítica como la interfaz. Que todos los actores estuvieran al día sobre los pagos correspondientes no era un requisito de contenido: era la función del producto. Working with sensitive data and payments, how the state of information gets communicated turned out to be as critical as the interface. Keeping every party current on the payments due was not a content requirement: it was the function of the product.