arrow-rightbarscheckmarkcircle-dribbbleCreated with Sketch.circle-emailCreated with Sketch.circle-facebookCreated with Sketch.circle-githubCreated with Sketch.circle-github2Created with Sketch.circle-gplusCreated with Sketch.circle-instagramCreated with Sketch.circle-linkedinCreated with Sketch.circle-rsscircle-twitterCreated with Sketch.emailCreated with Sketch.facebookgplusinstagramCreated with Sketch.keysCreated with Sketch.linkedinmarsbased-logo-hormarsbased-marsmouseCreated with Sketch.pinpinteresttwitter

Decidim Barcelona

Decidim Barcelona is a platform created by the Barcelona City Council allowing citizens to debate, attend meetings, create and vote proposals within participation processes aimed to improve life in the city.

The platform is a Ruby on Rails application built on top of the open-source e-government framework called Decidim, powered by the Barcelona City Council.

In this article, we explain how we designed and developed the user experience and the interface of the platform.


In July 2016, we were offered the chance to redesign the participative democracy platform of the Barcelona City Council. At that time, the platform was already live, built on top of Consul, a Ruby on Rails open-source e-government framework. However, Consult didn't quite fulfil the Barcelona Council requirements.

Barcelona had different plans for their own platform and the Council decided to create, from the ground up, a more ambitious framework inspired by Consul. The new platform had to allow multiple simultaneous participation processes and different phases and components within them (debates, proposals, meetings, stats, etc).

To redesign the platform from scratch and do the frontend development, the Barcelona City Council hired us, because we had good references by then thanks to our good reputation in the city and had previously worked with them on the Barcelona Startup Map project and the FuTurisme site.

The most challenging part of the project - besides the complexity of an interface with multiple participatory processes, phases, and components - was its delivery date.

The project officially started in the first week of August. The client wanted to do a public presentation by mid-October and the front end needed to be finished one month earlier, to give the backend developers time to adapt the underlying code for the new UI. Most of us were enjoying our summer holidays, so we had to rearrange a lot of pieces to assemble a team. We like challenges and summer projects, so we got the job!

In the end, everything came out perfectly. We are very happy to have participated in what we consider one of the most exciting projects we have ever done, especially because it has a real impact on the lives of the citizens of Barcelona.

Decidim Barcelona

Designing for an institution like the City Council - or big corporations, for that matter - is always a difficult task: there are a lot of stakeholders involved in the project. Each one with different opinions, giving feedback at the same time, and sometimes contradicting one another.

For that reason, we opted for creating a first iteration of the design with Sketch and uploaded it to InVision. InVision is a prototyping tool that allows to create links between the different pages, thus providing a simulation of the navigation like in a real application.

We only designed the home page and two of the most important pages: the list of participatory processes and the process detail page.

These preliminary designs laid the foundations to discuss other aspects of the UI such as the navigation, the typography, the colours or the content of each page.

Since time was a pressing concern, we resolved not to iterate further on the Sketch file. So we could meet the tight deadlines, we created a repository for the project using Middleman. Middleman is a static site generator, using modern development technologies, which organises the source code in an efficient way using layouts, partials and Ruby helpers.

Decidim.Barcelona is one of the most exciting projects we have ever participated in because it has a real impact on the lives of the citizens of our city Barcelona.

Jordi Vendrell, COO & Co-founder.

As we do in most of our projects, we used SASS, Modernizr, Compass, Autoprefixer and Font-Awesome. However, in this project, we also had to use Foundation as its main HTML/CSS framework (instead of Bootstrap or anything else), as per the client's request.

It was the first time we used Foundation on a production project. After having worked with so many frontend frameworks in the past years, learning something new was a walk in the park and we even had some fun by using it.

The Barcelona City Council conceived the platform as an application that will constantly evolve. Consequently, the pages and components needed to be highly reusable, thus allowing the developers to create new features easily. For that reason, we followed the BEM guidelines. BEM is a coding methodology which provides an efficient way to organise code and a class naming convention. When you follow its guidelines strictly, it makes HTML components extremely reusable.

Since then, we have adopted BEM in all our projects, instead of SMACSS.

Citizen Proposals Decidim Barcelona Citizen proposals

The Decidim.Barcelona opens the door to a very promising future. Not only is the project about to be publicly released in Barcelona, but other City Councils all over the country want to adopt this technology to give their citizens a platform for open collaboration.

The Decidim framework has been published as an open source project. You can contribute to its design through the Decidim Design Github repository, or to its development through the Decidim Github repository. Finally, you can access the platform at decidim.barcelona.

Hire Us

You're one step away from meeting your best partner in business.

Hire Us
Cookies icon

This website uses cookies to give you the most relevant experience. Using this website means you agree with this. You can change which cookies are set at any time and find out more about them by following this link.