Portfolio: Visualizing the Debt of the City from 2000 to 2012.


The wireframe to showcase the debt of a city is presented. The information within the mockups is displayed in Spanish. This was done in 2012.


In 2012 a new administration took over the city council of a San Luis Potosi, Mexico. One of the challenges the new administration faced was helping citizens understand the debt that the city had.

The debt had grown over the years and back then was hard to comprehend. The city council, and in particular the first Finances deputy major, wanted to make sure that the financial situation was clear to everyone at the start of the project. The particular goals of the administration were:

  1. Show the status of the debt, with the category of each item so that citizens understood to whom was debt issued.
  2. Show how the debt had grown in the last 12 years.
  3. Be as transparent as possible.

The selected medium to display the information was the website of the city, focusing on the desktop version.

Proposed Solution

The information that is included in all mock-ups is in Spanish. The mock-ups were done using PowerPoint. It was decided to show the information using a microsite to allow us to move faster than the development time.

To achieve the proposed goals of the administration, I proposed the following key actions:

  1. Display the current status of the debt highlighting the categories associated with it.
  2. Show how the debt grew over the last 12 years, from 2000 to 2012.
  3. Ability to download the raw data in CSV format. So that users could perform their own analysis.

Those three points were the main actions that would allow users to organize the information displayed on the page. Each action was coded in an actionable way that citizens would understand. Thus, each action was called:

  1. Show to the 30.09.2012
  2. Debt growth during the last 12 years
  3. Download the Excel file.

The file was called Excel so that people understand what it means, but the file was in CSV format.

The next step was to divide the real state of the window. The top area first has the header, followed by a menu. The majority of the space is dedicated to showcasing the debt information. At the bottom, there is a footer that would link to the main website of the administration.

Figure 1: Dividing the real state of the window to display information.

The homepage of the microsite opened showing the status of the debt up to the 30.09.2012, highlighting them per category. The user could see the debt as a Total, Due, Overdue, All. The first three showed the debt as a single item, while the fourth one would compare the Total, Due and Overdue debts (see Figure 4 for an example).

Figure 2: Homepage for the site, showcasing the current status of the debt with categories.

When the user would click on each debt category, the page would focus on showing the different categories associated with it, while keeping in context the full debt (Figure 3). Again, users could see the debt as Total, Due, Overdue or All.

Clicking on the whole debt would return to the page to the status shown in Figure 2.

Figure 3: Focusing on a single category of debt, showing the different subcategories associated with them. Debt can be shown as total, due, overdue or all.

When users select All to display the status of the debt, either by category or all, users could see the Total, Due and Overdue debts.

Figure 4: Showing the debt as All.

The next option would show the growth of the debt over the last 12 years, clustering the x-axis on 3 years, which is the length of each administration. Each category is shown at the bars, and hoovering would provide more details to the user.

Figure 5: Show the growth of the debt. The information is organized on the x-axis by the length of the period of each city administration.


Here are some screenshots of the implemented mockup. The implementation was done by Asaf (Development) and Juan José Gámez Leija (UI Design). The implemented screenshots come from my personal files, as the website is no longer active, so I think even though is one of the final versions, it is not the final version.

Figure 6: Screenshots of one of the final implemented versions. The user could still see all the information about the debt. The mock-ups were almost similar to the final versions. One of the changes was to provide the information of due and overdue debts in the same column using a colour coding scheme.

If you have questions or would like to know more, do not hesitate to contact me. In this case, questions about the design process, not the numbers or the growth of the debt; direct those questions to the city administration.

Dr. Eduardo Calvillo Gamez

Dr. Eduardo Calvillo Gamez

Written by

Faster solutions to complex problems using design sprints and gamification. English and Spanish. When things are bad… Mezcal & we they are good… Mezcal too.