Caso de estudio / Profuturo AFP
Profuturo
Diseño de una experiencia web orientada a la claridad de la información y a las necesidades de sus afiliados.
Contexto
Información financiera, una lectura más clara.
El proyecto aborda la renovación de la experiencia web de Profuturo AFP. El propósito es ordenar información sobre fondos de pensiones, trámites y servicios, y acercarla a personas con necesidades distintas.
La propuesta combina una interfaz actualizada con una estructura de contenidos fácil de recorrer. Los accesos a la cuenta, las novedades y la orientación al afiliado tienen espacios definidos, sin competir por la misma atención.
Composición y armonía
Una estructura que da espacio al contenido.
La retícula organiza la página en módulos de lectura: navegación, contenido destacado, accesos y bloques informativos. Las alineaciones y la separación entre elementos permiten distinguir cada nivel antes de entrar al detalle.
Los fondos blancos y grises aportan descanso visual. Las fotografías de situaciones cotidianas y las ilustraciones introducen cercanía; los acentos de color mantienen la propuesta fresca sin quitar protagonismo a la información.
Metodología de diseño
Criterios que articulan la propuesta.
La propuesta articula cuatro frentes de trabajo: contenido, composición, sistema visual y adaptación a dispositivos.
- 01
Organización del contenido
Separar la información por perfiles y necesidades. La navegación distingue Personas, Empresas y Nosotros, mientras que los accesos a la cuenta y al cambio de AFP conservan una posición reconocible.
- 02
Jerarquía y composición
Dar a cada bloque una función concreta: presentar una novedad, explicar un requisito o facilitar una acción. Las tarjetas, los títulos y los espacios en blanco ordenan la lectura sin depender solo del color.
- 03
Sistema visual
Mantener criterios comunes en tipografía, botones, iconos y módulos de información. Esa repetición da continuidad a páginas con contenidos y niveles de detalle distintos.
- 04
Adaptación responsive
Reorganizar los módulos según el ancho disponible. En móvil, el contenido pasa a una columna y los accesos principales se mantienen próximos al inicio de la página.
Sistema visual
Tipografía y color con funciones definidas.
La familia D-DIN establece la base tipográfica. Sus distintos pesos distinguen titulares, explicaciones y acciones, manteniendo una lectura consistente entre pantallas.
El rojo de marca concentra la atención en los accesos y acciones principales. Turquesa, azul y violeta amplían la paleta para organizar módulos y destacar contenidos; el blanco, el negro y el gris sostienen el contraste y el ritmo de la composición.
Experiencia móvil
Prioridades claras en una pantalla más pequeña.
En móvil, las tarjetas se apilan y los bloques informativos siguen un recorrido vertical. El buscador y el menú se compactan, mientras que los accesos a la cuenta y al cambio de AFP permanecen visibles.
La repetición de botones, iconos y estilos de tarjetas mantiene la continuidad con escritorio. La propuesta adapta la distribución al dispositivo sin perder los elementos que permiten reconocer la marca.
Contacto
Conversemos sobre tu próximo proyecto digital.
Si tu equipo está evaluando una nueva plataforma o el rediseño de un servicio, podemos revisar el alcance y las necesidades de diseño.