Banco InternacionalRediseño del homepage institucional de un banco de desarrollo internacional. Encaré el proyecto de punta a punta: diagnóstico, arquitectura de información, sistema visual y prototipo funcional, entregando avances semanales durante 5 semanas.
Por un acuerdo de confidencialidad con el cliente, no puedo nombrar la institución ni compartir capturas, links o cifras reales del sitio. Lo que sigue describe fielmente el proceso, el diagnóstico y las decisiones de diseño del proyecto, con los datos específicos generalizados.
Tomadores de decisión: gobiernos, organizaciones aliadas, investigadores y periodistas.
El homepage original mostraba todo el contenido institucional al mismo tiempo, sin una jerarquía que guiara al usuario. En la Semana 1 (kickoff) diagnostiqué tres problemas concretos.
Cada sección tenía sus propios estilos y espaciados. La página no se leía como un solo producto.
Elementos mal agrupados y alineados. No quedaba claro qué iba junto ni qué era clickeable.
El contenido relacionado estaba repartido por la página, obligando al usuario a buscarlo.
El recorrido del usuario por la nueva home. Elegí un paso para ver ese módulo.
Ordené los colores en dos niveles: una paleta base y variables semánticas que nombran el uso. Los componentes usan las semánticas, así cualquier cambio se hace en un solo lugar.
Cambios para que el usuario sepa siempre dónde está y cómo moverse por el sitio.
Rediseñé el header con el logo a mayor escala para darle a la institución presencia propia frente al banco, sin desprenderse de la marca madre ni de su marco institucional.
Sumé un breadcrumb para que el usuario sepa en qué nivel del sitio está y pueda volver atrás en un clic, y un navegador entre artículos para pasar al contenido anterior o siguiente sin volver al listado.
Del diagnóstico inicial a un sistema de componentes documentado, con entregas y revisiones de avance cada semana.
Diagnostiqué los problemas del sitio y definí la reestructuración de contenido bajo una lógica de biblioteca: así se lo expliqué a los directivos. Sus publicaciones son los libros, que se agrupan en secciones, y las secciones en áreas más grandes.
Bajé la arquitectura de información a nivel de página y presenté 4 propuestas de color por sección.
Cerramos la paleta, rediseñé el header y empecé a construir los primeros módulos en código.
Convertí los módulos sueltos en un sistema y sumé las secciones faltantes que detecté en la revisión.
Ajusté las reglas de imagen y componentes, y documenté todo para el equipo del cliente.
El rediseño fue aprobado por varios directivos de la institución y está en proceso de publicación. El equipo del cliente ya usa los módulos del sistema para replicar otras páginas del sitio.
Unos 30 componentes, desde botones e inputs hasta secciones enteras.
El sistema ya se aplicó a unas 20 pantallas, armadas con los mismos módulos y sin rediseñar desde cero.
El sitio no tenía ninguna medición. Ahora se registra por dónde navega el usuario y dónde hace clic, como base para las próximas mejoras.
A redesign of the institutional homepage for an international development bank. I ran the project end to end: diagnosis, information architecture, visual system and functional prototype, delivering progress weekly over 5 weeks.
Under a confidentiality agreement with the client, I can't name the institution or share real screenshots, links or figures from the site. What follows accurately describes the project's process, diagnosis and design decisions, with the specific details generalized.
Decision-makers: governments, partner organizations, researchers and journalists.
The original homepage showed all the institutional content at once, with no hierarchy to guide the user. In Week 1 (kickoff) I diagnosed three concrete problems.
Each section had its own styles and spacing. The page didn't read as a single product.
Poorly grouped, misaligned elements. It wasn't clear what belonged together or what was clickable.
Related content was spread across the page, forcing users to hunt for it.
The user's path through the new homepage. Pick a step to see that module.
I organized color in two levels: a base palette and semantic variables that name the use. Components use the semantic ones, so any change happens in one place.
Changes so users always know where they are and how to move around the site.
I redesigned the header with a larger-scale logo to give the institution its own presence apart from the bank, without breaking away from the parent brand or its institutional framework.
I added a breadcrumb so users know which level of the site they're on and can go back in one click, plus an article navigator to jump to the previous or next piece of content without returning to the listing.
From initial diagnosis to a documented component system, with deliveries and progress reviews every week.
I diagnosed the site's problems and defined the content restructuring around a library logic, which is how I explained it to the directors. Their publications are the books, grouped into sections, and the sections into larger areas.
I brought the information architecture down to page level and presented 4 color proposals per section.
We locked in the palette, I redesigned the header, and started building the first modules in code.
I turned the loose modules into a system and added the missing sections I spotted during review.
I fine-tuned the image and component rules, and documented everything for the client's team.
The redesign was approved by several of the institution's directors and is in the process of being published. The client's team already uses the system's modules to replicate other pages of the site.
Around 30 components, from buttons and inputs to entire sections.
The system has already been applied to about 20 screens, built from the same modules without redesigning from scratch.
The site had no measurement at all. It now tracks where users navigate and what they click, as the basis for future improvements.