The Smart Citizen Platform Revamp


Smart Citizen is a platform to generate participatory processes of the people in the cities. Connecting data, people and knowledge, the objective of the platform is to serve as a node for building productive open indicators and distributed tools, and thereafter the collective construction of the city for its own inhabitants.




The Smart Citizen project is based on geolocation, the Internet and free hardware and software for data collection and sharing. It connects people with their environment and their city to create more effective and optimized relationships between resources, technology, communities, services and events in the urban environment.


To do so, Smart Citizen has developed the Smart Citizen Kit. It’s a piece of hardware comprised of a set of sensors, a data-processing board, a battery and an enclosure. The first board carries sensors that measure air composition (CO and NO2), temperature, humidity, light intensity and sound levels. Once it’s set up, the device will stream data measured by the sensors over Wi-Fi using the FCC-certified, wireless module on the data-processing board. The device’s low power consumption allows for placing it on balconies and windowsills.



Smart Citizen from smartcitizen on Vimeo.



Lafosca + Smartcitizen


Lafosca joined the Smart Citizen crew to revamp its platform during an 8 months process. Together, we evolved the platform from its first version to a new one built with latest technologies, with a new UX / UI approach and having modularity and scalability in mind, but most importantly, designed following their KPIs in mind. This is the full story.


Artboard 21 Copy 2



First there was the inception


Like every single project at Lafosca, Smart Citizen wouldn’t be just the client. We mixed their staff with our people to create a whole new team who would work on the project. That included Smart Citizen developerssupport members and their team lead, and Lafosca UI / UX designers, developers and a project manager of our own too. Once everyone was on board, the inception phase started.


That was a three week period committed to answer several important questions: what’s the current platform being used for, mainly? Who are our users? What do people expect from Smartcitizen in the near future? Is there anyone doing stuff like this? And a loooo 😮 ooong etcetera.




This phase gave us a fabulous KPI Brief and allowed us to define a product build strategy based on three simple goals:


1. Let users browse data in a fast, visual way.

2. Let users compare and analyse this data easily.

3. Let’s socialize the data.


Then there was the product development


The inception phase set the team ready to go. We started a cross platform development using the Agile and SCRUM framework: weekly sprints checked and planned through weekly meetings. Small work iterations for a big, big project.


The result is a brand new platform, visually and technically revamped. The new UI and UX is focused on simplicity and modularity. Smart Citizen now lets everyone check their city data easily, but also analyze data and get involved. Moreover, Smart Citizen is now ready to grow: its modularity lets the platform support new functionalities, data sources and new sensors all under the same interface and without extra coding effort.


Artboard 21 Copy 3



From the developer side, the new platform is made using Angular JS and the Material Design Framework. This allowed the SmartCitizen team to focus on the backend performance and the data process, while the front-end is a completely separated app running on the user machine.


Artboard 21 Copy


During all this revamp process, Lafosca has also developed the Smart Citizen Android app. It’s quite far from the web platform complexity –it’s just a data browsing tool– but it still sticks to the simplicity and robustness goals. It’s a whole native Android experience that lets users browse their city data and kit owners check their sensor status.


Artboard 21 Copy 4



Also worked in this project: Máximo Gavete (UI) and Ruben Vicario, Riccardo Agnoletto and Daniel Mañà  (front-end development). Special thanks to Guillem Camprodon, Tomas Diez, John Rees and all the Smartcitizen crew. Cheers!



Check Out Smart Citizen