Finanzas para todos

The brief

Finanzas para todos is a domestic economy knowledge base provided by Banco de España, Spain’s national central bank and Supervisor of the spanish banking system. We were asked to redesign the whole site, focusing on a better navigation and a new modern look. For this project I worked in a team of two working together in the UX and UI. 

The main content of the web was a series of didactic articles from different domestic economy themes and also a set of calculators and tools for supposed situations (calculate a mortgage, debt payments…).

The state of the website navigation was in bad shape as it had many different navigation menus which were all competing in the upper part of the site, making it hard to get focus on the main content of the web.

  • Image

Original state of the website.

Information architecture

Our solution for the architecture had two main work areas: redefine navigation and put the most important content first and upfront.

For the navigation we made things simpler and divide the contents in three areas:

· First level navigation at the top of the site with just the three main contents: Articles, Resources (calculators) and News. Because the Articles were the most relevant thing of the website, we left the main themes (first level of navigation) in a prominent place of the homepage but not as the main navigation, which led to confusion.

· Another portion of the contents which seemed relevant to the client were links to download sections or other websites of Banco de España. We put them as a sidebar that could be brought at relevant places of the site.

· The least important navigation items were positioned on the footer, which originally was unused. 

  • Image

Distribution pages

Distribution pages were created for the articles section for a better understanding of the reader’s position around the content. With three levels of navigation, we decided to put the content navigation very clear so readers would always know their position. 

We also added a next/previous article navigation at the bottom of every piece of content so the lessons could be easily reached. 

  • Image

First wireframes looking for a navigation system

  • Image

Final wireframe

  • Image

Distribution page

  • Image

Article with third level of navigation at the bottom