arrow_back Back Next →
UX Research UI Design Figma

Portal de Pagos

I redesigned Sistecrédito's internal debt collection interface, structuring the data into clear, hierarchical tables so that 43 collection agents could manage their daily caseload faster, with fewer clicks and less friction.

Role

UX/UI Designer

Year

2022

Team

2 Designers

Deliverables

Research, UX, UI, Components

Tools

Figma

open_in_new

Figma prototype

Ver prototipo

arrow_outward
Portal de Pagos Sistecrédito

Portal de Pagos interfaz de cobros rediseñada para los agentes de Sistecrédito

01 Overview

Sistecrédito's collection agents now have a more accessible, easier to understand interface for managing the company's debt recovery operations.

The main goal was to design a collections interface with well-organized, clearly structured tables, easy to read and easy to act on. The redesign is built for the 43 collection agents who spend their entire workday inside this system, managing hundreds of accounts across dozens of data points at once.

02 Users

Who is this product designed for?

Collection agents

Internal Sistecrédito employees who manage debt recovery from users behind on their payments. All of their daily work happens through this interface.

Agent profile

  • Comfortable with technology, interacting with complex applications isn't a barrier for them
  • Young professionals between 17 and 35 years old
  • Work entirely from a computer, the desktop is their only device

03 Research

We sat down for structured interviews with three agents at different seniority levels. The goal was to surface what the current system was failing to provide and understand how agents think about their daily work.

Arnaldo Pérez G.

29 años · Agente Senior

What would improve your work?

"An application that lets me view user data more simply and quickly. Something that shows all user records on a single screen whether they're behind on payments or up to date."

What's wrong with the current app?

"It's very complex, slow to load data, and in many situations it's very confusing."

Marlon Parra B.

25 años · Agente Jr

What would improve your work?

"See all data in one place. Our day-to-day involves visualizing a lot of data, and it would be great if it were all on a single screen no need to open and close so many windows."

What's wrong with the current app?

"It doesn't let us optimize or speed up our work. Speed and efficiency are essential when we're dealing with clients and data all day long."

Luis Londoño

32 años · Agente Senior

What would improve your work?

"A design that includes all the records we work with daily, in an interface that's actually understandable."

What's wrong with the current app?

"I've been a collection agent for 3 years and I still struggle to find certain records and navigate the system."

Every agent, no matter their seniority, pointed to the same root problem: too many screens, too many clicks, and too much time lost just finding information.

04 The Problem

To do their job in the current system, agents go through a fragmented sequence: desktop access, then login, then the application itself, which branches out into Excel exports, pop-up windows, and data scattered across multiple disconnected screens.

That forced agents into unnecessary extra steps at every turn, slowing down their debt management workflows and adding cognitive load to an already demanding job.

Tabla actual del sistema

Current interface: a dense, unstructured table layout that agents have to navigate every day

Excel usado como solución alternativa

Excel workaround: agents exported data to spreadsheets just to make it readable

Agent's current flow

Desktop access
→
Login
→
Application
→
Excel exports Pop-up windows Data across multiple screens

Friction points identified

close

Slow data loading

The system took too long to display records, forcing agents to wait between every action

close

No visual hierarchy

All data looked the same, so there was no quick way to tell what was urgent from what wasn't

close

Constant window switching

Agents had to open and close multiple windows to view a single client's full information

close

Confusing navigation

Even senior agents with years of experience still struggled to find specific records

close

Excel as a workaround

Agents exported data to spreadsheets just to be able to read and analyze it properly

close

No remote access

The system was tied to office equipment, so agents couldn't work from home or on a laptop

close

Fragmented client data

Payment history, contact info and debt status were spread across different sections with no unified view

close

High onboarding cost

New agents needed weeks to become productive because the interface offered no intuitive way in

05 Design Proposal

The proposal was built around six product objectives, each one addressing a pain point uncovered in research and aligned with Sistecrédito's new brand identity.

Structure

Design a new architecture grounded in accessibility and visual design fundamentals, aiming for an interface that's consistent, inclusive, and simply good quality.

Hierarchy

Every component and element has a purpose. Visual hierarchy guides agents to the most important information without them having to hunt for it.

Modernize

The interface aligns with Sistecrédito's new brand manual, with product and marketing working in sync instead of in isolation.

Accessibility

Designed for all 43 collection agents, regardless of their individual conditions, a system everyone can use without barriers.

Visual design

Quality and consistency built from the visual design fundamentals: color, contrast, typography scale, and Gestalt principles applied throughout.

Better experience

The digital product will give every collection agent back time optimizing workflows so they can focus on what matters: the client interaction.

06 What the product delivers

Six core capabilities, defined around the agent's real context: desktop-first, always connected, working with clients from anywhere.

mail

Mail communication

Built-in email templates let agents communicate with clients directly from the platform, no switching between tools.

devices

Adaptive design

The interface adapts to different screen sizes from large desktop monitors to laptops without sacrificing data density.

public

Works anywhere

The application works anywhere in the world, at any hour, which helps agents on rotating shifts and in different time zones.

layers

Everything on one screen

All relevant client data, payment history, debt status, contact info, consolidated into a single view. No more window-switching.

home_work

Remote-ready

Agents can do their full job from home without needing access to an office workstation or VPN-locked legacy tools.

person_add

New agent onboarding

The simplified interface drastically cuts down the learning curve, so new agents reach productivity faster, without weeks of training.

The result

Nueva interfaz Portal de Pagos resultado final

Portal de Pagos: the new collections interface consolidates all client data, negotiation controls, and management records on a single screen

open_in_new

Puede visualizar el prototipo en Figma

Ver prototipo

arrow_outward

07 Design system

The proposal is structured around giving agents fast, reliable access to client credit records all on a single screen, with accessible table architecture and clear data hierarchy.

Every decision reduces the number of clicks required. The goal: a single, cohesive experience where data is dense but never hard to parse.

Components

  • Pop-ups
  • Modals
  • Color dots
  • Pills

Design fundamentals

  • Color & contrast
  • Type size & hierarchy
  • Table structure
  • Gestalt & Fitts' Law

Agent-centered design

The experience is built to be inclusive for all 43 collection agents, regardless of their individual needs or conditions. Everyone can understand the interface and deliver quality, efficient service to Sistecrédito's clients.