Fondo Nacional de Garantías
institutional & transactional web design
-
Colombia
Project overview
FNG required a redesign to enhance user connection, clarify its positioning, simplify access to service information, and make complex financial concepts, like credit guarantees, understandable for the public. I managed the entire process, from initial research to design system delivery and developer handoff.
Research & discovery
I benchmarked the previous FNG portal and audited it with Google PageSpeed Insights for performance, alongside an accessibility review of color, typography, and hierarchy. The team ran technical workshops to identify functional, performance, and design priorities.
The UX designer led user interviews within FNG, in which I also participated, producing an insights document that became the foundation for everything that followed.
Bussines and users insights from the discovery interviews.
Bussines and users insights from the discovery interviews.-
“The information about what a guarantee is and how to access it is not clear; it should be, just like the mission objective of the FNG”.
(Customer Service) -
“Business owners find it difficult to locate information on lines and benefits”.
(Communications Office) -
“We want access to be more user-friendly, so that business owners have all the ease in paying their obligations”.
(Operations Sub-Director)
Information architecture & lo-fi wireframing
I defined the information architecture and content structure for every section of the site based on the insights that were defined in the first discovery phase. I worked closely with the UX designer on the section-level planning.
As a result of that process the low-fidelity wireframes were designed by the UI team I led and went through review cycles with FNG stakeholders.
Hi-fi wireframing
As a result of validation directly with users and FNG's internal stakeholders, the navigation structure and information architecture reached a defined stage. Based on that I designed the final prototypes for each section, while design system documentation continued in parallel.
Accessibility compliance
Built on WCAG 2.2, with specific attention to Colombian government transparency and accessibility guidelines. Information was never conveyed through color alone — the Colombia coverage map, for example, pairs each region's color with the actual percentage in text. I extended and refined FNG's existing brand palette to meet contrast requirements, both between UI elements and background, and between adjacent colors used in data visualization. Sign language videos for the main navigation menu were adapted for mobile as well, and an accessibility sidebar lets users increase contrast, increase font size, and connect directly to Centro de Relevo, the Colombian government's relay service for people with disabilities.
The final outcome
Leading FNG's redesign end-to-end meant proving that accessibility, government compliance, and brand clarity don't have to compete with each other — they can be built into the same system from the ground up. The institutional portal now explains complex financial concepts, like what a credit guarantee actually is, in language the general public can follow, while the transactional portal gives financial partners a simpler, more secure path to file claims.
The project shipped and was approved by FNG across both the institutional and transactional portals, with a design system documented well enough for developers to build from — even under real time constraints that required practical trade-offs along the way. What stayed non-negotiable though: accessibility wasn't treated as a checklist item, but as a constraint the entire visual system — color, typography, video content, navigation — was built around from day one.