Madrid Government

During 2 years, I worked as a UI/UX Designer for Indra (Indra is a leading global consulting and technology company, and the technology partner for the core business operations of its clients’ businesses throughout the world).
Usually, I was the only Designer assigned to a project however, for Madrid Government project we were a team of 4 Designers: Javier Cañada was the leader of the team and we were 3 more Senior Designers.

This project is the biggest one I have ever joined. I learned from one of the bests UI/UX and Design professionals in Spain.

We belonged to the HCI (Human Computer Interaction) Department of Indra. The project consisted in the absolute redesign of Madrid Government site.

Apart from the magnitude and importance of the project, we were privileged to count on a substantial budget. Our project consisted of three phases, each of them lasted several months:
> Phase 1: Research & Analysis
> Phase 2: Information Architecture
> Phase 3: Prototyping

Phase 1 was called “Trends & Best Practices”

The four of us divided up 20 city government websites which were carefully selected based on: a study from a university; being considered good models to follow and being considered relevant for the project.

For the first part of the study, we contemplated 5 fields, and several aspects for each field. For example, for the Institutional Image field, we payed attention to the following aspects: branding, values, tone and SEO.
We highlighted the cities which stood out on those aspects, along with an assessment and a matrix of all the cities rated.
For the second part of the study, we analysed each city, rated it generally for each field and stood out the best practices.

This slideshow requires JavaScript.


Phase 2: “Information Architecture”

In this phase was time to register all the contents of the old Madrid Government website, rating, reviewing and locating problems and inconsistencies.
All that information was captured in a graphic document represented by symbols and colours.
Later, after the Concept of the website was settled in Phase 3, we came back here and created the Tree Structure for the new website.
Categorising and assigning tags for each unit of information in order to create adequate facets, were also tasks on this phase.
Examples of the documents created for Phase 2 follow:

This slideshow requires JavaScript.


Phase 3: “Concept & Prototypes”

For the new website, we came up with a simple scheme that combined two main functions: the “institutional web“, which covered procedures that citizens could do online or information about them, along with governmental information and the “web of the city“, which covered news, events, agenda, temporary monographic specials, real time information,…
One can check part of the graphic document that we elaborated to explain those concepts in the slides below.
Finally, we created a series of prototypes contemplating each possible case of a page.
There was also a huge task of delivering knowledge and training for the professionals at the Government who would have to work with the new website and take charge of updating and creating content for it.

This slideshow requires JavaScript.