Decidim

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 without compromising the quality of our services. 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.

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.

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 use BEM in all our projects, instead of SMACSS.

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.