Case study / Profuturo AFP

Profuturo

A website experience designed around clear information and pension members' needs.

Service: Digital product and experience design
Specialty: UX/UI · Responsive web design
Designer: Jesus Tabaco

Profuturo interface on a tablet with a keyboard, showing navigation, search, account access and an information banner — 01 / Overview of the website proposal

Context

Financial information, easier to navigate.

This project explores a renewed web experience for Profuturo AFP. The aim is to organize information about pension funds, procedures and services for people with different needs.

The proposal combines an updated interface with a content structure that is easy to explore. Account access, updates and member guidance have distinct spaces rather than competing for attention.

Profuturo responsive designs on a phone and computer against a turquoise background — 02 / A consistent identity on mobile and desktop

Composition and balance

A structure that gives content room.

The grid organizes the page into modules: navigation, featured content, shortcuts and information blocks. Alignment and spacing distinguish each level before readers move into the details.

White and gray backgrounds provide visual breathing room. Everyday photography and illustrations create an approachable feel, while color accents add variety without overshadowing the information.

Design approach

Principles that connect the proposal.

The proposal brings together four areas: content, composition, the visual system and responsive layouts.

01
Content organization
Separate information by audience and need. Navigation distinguishes individuals, businesses and the organization, while account access and pension-provider switching retain recognizable positions.
02
Hierarchy and composition
Give each block a clear role: introduce an update, explain a requirement or support an action. Cards, headings and whitespace organize the reading order without relying on color alone.
03
Visual system
Use consistent typography, buttons, icons and information modules. Repetition connects pages with different content and levels of detail.
04
Responsive layout
Reorganize modules to suit the available width. On mobile, content moves into a single column and key actions remain near the top of the page.

Profuturo retirement requirements page on a laptop, with tabs, information cards and access to online support — 03 / Requirements and guidance organized into modules

Visual system

Typography and color with clear roles.

D-DIN provides the typographic foundation. Its weights distinguish headings, explanations and actions while keeping the reading experience consistent across screens.

Brand red draws attention to key links and actions. Turquoise, blue and violet extend the palette to organize modules and highlight content, while white, black and gray establish contrast and rhythm.

Profuturo D-DIN typography sheet, showing the alphabet, numbers and Light, Regular, Medium and Bold weights — 04 / D-DIN · Typographic hierarchy

Project palette: red FF2F1F, white FFFFFF, violet 61279C, turquoise 00B3B3, blue 0081C4, black 000000 and gray EBEBEB — 05 / Project color palette

Mobile experience

Clear priorities on a smaller screen.

On mobile, cards stack and information blocks follow a vertical sequence. Search and navigation become more compact, while account access and the option to change pension provider remain visible.

Consistent buttons, icons and card styles connect the mobile and desktop experiences. The layout adapts to the device while retaining the elements that identify the brand.