Diego Alvarez
Volver a proyectosBack to work Plataforma digital de créditoDigital lending platform

Conaliados

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.

Rol Role Responsable de diseño, equipo de 2 Design owner, team of 2
Duración Duration ~5 meses ~5 months
Plataforma Platform App móvil · Backoffice web Mobile app · Web backoffice
Sector Sector Fintech · Crédito Fintech · Lending
Estado Status Congelado por reasignación de presupuesto Frozen by budget reallocation
Conaliados
ResultadoOutcome
1–2 días → minutos 1–2 days → minutes La validación documental del solicitante en el flujo rediseñado, después de quitar los requisitos que no incidían en la decisión de crédito. Applicant document validation in the redesigned flow, after removing the requirements that had no bearing on the credit decision.
Sin retrabajo No rework Ingeniería implementó el login y parte del backoffice sobre lo entregado, sin retrabajo mayor sobre la especificación. Engineering implemented the login and part of the backoffice from the handoff, with no major rework on the spec.

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.

El problemaThe problem

El cuello de botella estaba antes de la decisión de crédito. The bottleneck sat before the credit decision.

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.

Mi rolMy role

Responsable de diseño del proyecto. Design owner on the project.

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.

  • · El sistema de diseño del producto, del que fui responsable directo: foundations, componentes y su documentación. The product design system, which I owned directly: foundations, components and their documentation.
  • · El concepto visual, incluida la decisión de tratar la app y el backoffice como dos lenguajes distintos. The visual concept, including the decision to treat the app and the backoffice as two separate languages.
  • · La investigación y los flujos, desde las entrevistas hasta el handoff. Research and flows, from the interviews through to handoff.
  • · Las dos interfaces completas, de la arquitectura de información a los prototipos de alta fidelidad. Both full interfaces, from information architecture to high-fidelity prototypes.
  • · Los estados de solicitudes y créditos, incluidos rechazo, anulación con motivo y trazabilidad de cada cambio. The states of applications and credits, including rejection, cancellation with a reason, and traceability of every change.

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.

ProcesoProcess

Entrevistas primero, y la letra pequeña de la operación. Interviews first, then the fine print of the operation.

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.

Decisión · Lenguaje visualDecision · Visual language

Dos productos, dos lenguajes visuales. Two products, two visual languages.

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.

Decisión · DocumentosDecision · Documents

Quitar documentos en vez de acelerar su revisión. Removing documents instead of speeding up their review.

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.

Decisión · Información sensibleDecision · Sensitive information

La información sensible se muestra, no se esconde. Sensitive information gets shown, not hidden.

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.

FlujosFlows

Dos recorridos sobre un mismo objeto. Two journeys over one object.

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.

Flujo de usuario del cliente
Flujo del solicitante: decisiones de cuenta, onboarding omitible y escaneo de identidad con sus condiciones de reintento. Applicant flow: account decisions, skippable onboarding and identity scanning with its retry conditions.
Flujo de usuario del administrador
Flujo del administrador: acceso, recuperación de contraseña y ruta de revisión hasta resolver la solicitud. Admin flow: access, password recovery and the review path through to resolving the application.
App del solicitanteApplicant app

Pedir un crédito desde el teléfono. Applying for credit from your phone.

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.

Pantallas de la app del solicitante
Onboarding, home con productos activos y detalle de un crédito con sus cuotas y fechas. Los datos mostrados son ficticios. Onboarding, home with active products, and credit detail with instalments and dates. The data shown is fictional.
BackofficeBackoffice

Una solicitud entendible en una sola pantalla. One application, understandable on one screen.

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.

Listado de créditos en el backoffice
Listado de solicitudes de SOAT: filtros, orden, paginación y estado por fila. SOAT application list: filters, sorting, pagination and per-row status.
EstadosStates

El estado es el producto.The status is the product.

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.

Detalle de solicitud y crédito en distintos estados
El mismo detalle en tres estados: solicitud aprobada con opción de anular, crédito al día con su póliza, y solicitud anulada con el motivo registrado. The same detail in three states: approved application with the option to cancel, current credit with its policy, and cancelled application with the reason on record.
FoundationsFoundations

Color y tipografía, con el contraste verificado. Color and type, with contrast verified.

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.

Foundations de color
Rampas de marca, colores de feedback y las combinaciones sugeridas de fondo y texto. Brand ramps, feedback colors, and the suggested background-text combinations.
Foundations de tipografía
Tipografía primaria, usos de peso y la escala especificada por dispositivo, nivel por nivel. Primary typeface, weight usage and the scale specified per device, level by level.
ComponentesComponents

Componentes documentados por estado y por tamaño. Components documented by state and by size.

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.

Componentes del sistema de Conaliados
Inputs, carga de archivos, tabs, progress y avatares, con la matriz de estados de cada uno. Inputs, file upload, tabs, progress and avatars, each with its state matrix.

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.

AprendizajesLessons

Lo que hoy haría distinto.What I would do differently today.

La rampa de color se construyó a medias. The color ramp was only half built.

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.

No consideramos dark mode a tiempo. We did not consider dark mode in time.

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.

En productos financieros, comunicar es parte del diseño. In financial products, communicating is part of the design.

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.