Decidim

En Julio del 2016, el Ajuntament de Barcelona nos contactó para resideñar la plataforma de participación ciudadana Decidim.Barcelona. Por entonces, la plataforma ya estaba en producción, y se había desarrollado usando Consul, un framework en Ruby on Rails de código abierto, como base. Pero Consul no cumplía exactamente con los requerimientos del proyecto.

Barcelona tenía un roadmap más ambicioso que lo que permiten las funcionalidades de Consul, y por eso decidieron crear un framework más variado, usando Consul como fundamentos sobre los cuales construir. La nueva plataforma, por ejemplo, debería permitir múltiples procesos participativos de manera simultanea, cada uno con distintas fases y componentes de naturaleza diversa, como debates, encuentros, propuestas, estadísticas, reuniones, y mucho más.

Para rediseñar la plataforma desde cero y hacer el desarollo frontend, el Ajuntament de Barcelona nos contactó, dadas las buenas referencias que tenían de los proyectos que anteriormente habíamos desarrollado para ellos, entre los cuales destacaban el Barcelona Startup Map y la web del concurso de FuTurisme, entre otros.

El mayor reto del proyecto - sin contar la complejidad de una interfaz con múltiples procesos participativos, fases y decenas de componentes extra - era la fecha de entrega.

El proyecto empezó oficialmente la primera semana de Agosto. El cliente quería hacer una presentación pública a mediados de Octubre, y para ello, el frontend debía estar acabado un mes antes de la fecha de la presentación. Así, se daba tiempo suficiente a los desarrolladores del backend para adaptar el código a la nueva interfaz gráfica. Eso requería reorganizar las prioridades en algunos de nuestros proyectos, dado que teníamos a la mitad de la plantilla de vacaciones, pero conseguimos armar un plan y un equipo sin perjudicar a nuestros otros clientes.

Al final, el proyecto salió bien, tanto en fechas como en precio, y el cliente pudo presentarlo como tocaba. Y por nuestro lado, estamos muy contentos de haber participado en un proyecto de alto impacto en nuestra querida ciudad, y esperamos que esté contribuyendo a mejorar la vida de nuestros conciudadanos y conciudadanas.

Diseñar para una institución como un ayuntamiento - o para grandes corporaciones - no es una tarea trivial: hay muchas partes interesadas (stakeholders) involucradas en el proyecto. Cada una con sus opiniones, dando información relativa a sus intereses, y a veces esta información contradice a la de otras partes.

Por este motivo, optamos por crear una primera iteración del diseño con Sketch y lo subimos a InVision. InVision es una herramienta de prototipado que permite crear enlaces entre distintas páginas, para crear el efecto de navegabilidad y simular el comportamiento de una aplicación real.

Rediseñamos completamente la página principal y dos de las páginas de mayor importancia: el listado de procesos participativos y el detalle de los procesos.

Estos diseños preliminares permitieron cimientar la base para el resto de páginas y aspectos de la interfaz gráfica de esta plataforma, tales como la barra de navegación, la tipografía, los colores de los distintos componentes, etc.

Dado que el tiempo era un factor que nos jugaba en contra, decidimos dejar de iterar sobre Sketch. La alternativa fue crear un repositorio de contenido estático usando Middleman. Middleman es un generador de sites estáticos, usando frameworks de desarrollo web actuales, que organiza el código de manera eficiente usando plantillas, parciales y helpers de Ruby.

Como solemos hacer en la gran mayoría de nuestros proyectos, empleamos SASS, Modernizr, Compass, Autoprefixer y Font-Awesome. Sin embargo, en este proyecto, tuvimos que usar Foundation como framework de HTML/CSS (en vez del habitual Bootstrap), por petición expresa del cliente.

Era la primera vez que usábamos Foundation en un proyecto en producción. El hecho de haber trabajado con tantos frameworks de frontend en tantísimos proyectos, fue que aprender uno nuevo fuera facilísimo y también divertido.

El Ajuntament de Barcelona concibió esta plataforma como una aplicación en constante evolución. En consecuencia, las páginas y los componentes tenían que ser altamente reusables, para facilitar la tarea de crear nuevas funcionalidades a los desarrolladores lo más posible. Por esta razón, decidimos adoptar BEM como directiva. BEM es una metodología de desarrollo que define una manera eficiente de organizar el código y la convención de la nomenclatura de las clases. Cuando se implementa correctamente y de manera estricta, hace que el HTML de un proyecto y todos sus componentes sean extremadamente reusables.

Desde este proyecto, adoptamos BEM en todos nuestros proyectos (anteriormente usábamos SMACSS).

El proyecto de Decidim.Barcelona abrió las puertas a un porvenir prometedor. No solo se desplegó y se utiliza en toda Barcelona, sino que se ha extendido a los demás ayuntamientos del territorio para adoptarlo en sus respectivas ciudades, y esto traerá nuevas dinámicas de participación ciudadana y mayor colaboración a nivel local.

El framework de Decidim está publicado como código abierto. Puedes contribuir a su diseño en el repositorio de Github de Decidim Design, o al desarrollo, mediante el repositorio de Github de Decidim. Finalmente, puedes visitar y usar la plataforma en decidim.barcelona.