Platform for interactions about the UN Sustainable Development Goals


The Center for Studies and Opinion Surveys (CESOP) is part of the Portuguese Catholic University since 1991. CESOP develops studies in order to create knowledge about the Portuguese political, social and cultural realities. Its mission is to carry out applied studies and put scientific knowledge about Portuguese society at the service of civil society and businesses allowing public and private entities to adapt to social change and to be prepared for the future.

The recent creation of CESOP-LOCAL, a living laboratory of societal dynamics, is in line with this mission, leading CESOP to work in close partnership with municipalities and create an observatory to foster the involvement and participation of citizens in the UN Sustainable Development Goals.

The CESOP team reached out to Marzee Labs asking for a platform to produce and share specialized information, mostly based on data sets, between them and Portuguese municipalities, also allowing citizens to access the information made available to them.

Therefore, they needed a digital solution that would provide them with a hub to manage their data, and have the ability to administer its consultation through two types of environments, one private for interactions with the municipalities and another public to present the results to civil society. In short, the project was, in fact, a two-in-one application.

For the private environment, we created a Forum to allow for interactions between CESOP-Local team and the different municipalities involved, making it easy to understand how the municipalities in Portugal are dealing with the UN Sustainable Development Goals in their territory.

Marzee Labs was responsible for the development and evolution of a full back-end Drupal 8 structure for content management and the Forum, as well as all the design, look and feel, and implementation of the front-end experience. Our team is currently responsible for the maintenance of this platform.

  • Drupal 8
  • JavaScript
  • CSS3
  • HTML5
  • Web Design
  • Front End
  • Back End

Project development

  • Visual Identity and Design

    This first stage started with the analysis of the design components and elements needed for the web application. We planned how they would be featured in the web platform and how they would relate to each other. In this process, we took an incremental system approach - from simple buttons to more complex elements like teasers or slider blocks.

    The result was presented in a design language document. This paved the way for a logical growth procedure, and allowed us to preview the styling of all elements before starting to build the site. This approach assures a solid visual language for the web platform and facilitates interactions with client.

  • Theming

    This second stage focused mainly on setting up a Drupal base theme. Here we started implementing the components we defined in the previous stage into HTML markup and CSS styling. The same incremental procedure is applied here, from singular to complex elements.

    In addition to the structuring of the theme, we also developed some dynamic logic into our templates.

  • Development

    We opted for Drupal 8 due to the architectural solidity it offered for the needs of this project. The whole content structure and hierarchy, as well as all the intervening actors and their roles, were precisely defined within a spec sheet before implementation, making it a straightforward task to define within Drupal’s administrative interface itself.

    Contributed modules carry the benefit of being extensively tested and documented by the Drupal community, giving us a greater quality and stability assurance. Several of these were used, for example, for communication forms, internal analytics integration, basic forum functionality implementation, and management of scheduled events.

    Much of the portal’s core functionality, such as content hierarchical custom navigation, opinion feedback (“Likes”), and e-mail notifications, were made in-house, always in lose relation with the CESOP-LOCAL team, employing short and thorough cycles of goals definition - implementation - testing - feedback, in order to meet expectations and deliver high quality results.

    The project was managed mainly via Github issues and projects, where we planned ahead the several stages of releases and sprints, and gathered feedback from the client (and gave our own) on specific tasks.

  • Documentation

    Most of the documentation was done within the code itself, to facilitate comprehension and easily relate it to specific portions of the code-base. Highlights and more generalized instructions were gathered within readme files, or transmitted directly to the CESOP-LOCAL team as we worked on them.

  • Delivery

    Following our suggestion, we used platform.sh to host the production site. It links directly to the Github code repository, which gave us separate work environments for previewing and testing different active lines of work. Because it is almost fully self-configured and self-managed, the go-live was made with barely more than a flick of the switch, ready to be used by the CESOP community right at that moment. Any subsequent updates and maintenance patches can be delivered on command, immediately after being implemented as well.