SidM Systems

Interface design for a software aimed to assist in housing and social infrastructure planning, through the use of geodata.

CLIENT: Coplug, NHS City and Hackney CCG

SidM Systems

Social Infrastructure Demand Modelling

SidM Systems is divided into 3 sections: SidM Housing, SidM Health and SidM Education. The first one concerns housing developments, the second one provides demand projection for GPs linked to population projection and the third one for schools. So far only the first two sections have been developed.

I designed the entire software interface from scratch. In an initial stage I also coded in HTML and CSS (and occasionally some functionality in Javascript) the interface and the sidebars which were then integrated by backend developers. After that, as the project size increased and with that the team. I took the design lead and left all coding to developers.

The work is still in progress as the areas of interest and the functionality are in continuous expansion.


The map was designed in Mapbox, making sure to use soft colour which wouldn’t clash against all the elements which had to overlay it.

A first challenge was to design the boundaries lines using different colours which would be fairly distinguishable when overlapped to each other.

The software allows to switch on and off as many boundaries users want at the same time. Which meant that the colours had to be different, but also not to clash with each other creating a disturbing colour combination. For this reason many tests were done, checking colours and lines thicknesses at different zoom levels.

The ones here show only some of the boundaries, since quite a few more have been added.





Map icons

Here are some examples of the map icons (or pins) which I designed. The 4 icons with the houses indicate different kinds of housing based on their size. The first four’s in full colour indicate houses already built (in the year selected by the users), while the second row represent the ones in construction.

The last icon instead is for the General Practices. I’ve arrived to design about 40 of these icons so far, the characteristics is that all the ones relative to Health are squared, while the others round.

Selected icons

Users can click on each icon which will open up a sidebar with some information. Selected icons are slightly bigger than the original ones, red for housing and darker in colour for all the health related ones. All with a shade at the bottom. As per the other icons, this design has been approved after a series of tests which would make them stand out enough.

Cluster icons

These icons were created for when the map is observed on a far zoom level. In such case a lot of icons would overlap, making the layout messy and unclear.

The circle in the middle is filled by a coded number which depends on the number of housing/GPs icons which are overlapping in that specific point.

The sidebars

Each sidebar showcases different set of data and some graphs which are often editable by the users. This was one of the most challenging features to design trying to make all data accessible and pleasurable to assimilate. Spacing, font hierarchy, colour code and a large use of icons were fundamental to achieve this. Besides designing them I coded every sidebar, including the graphs.

These here are only a first bunch of sidebars (when the project was at start-up stage). After that we expanded greatly the functions and consequently reviewed the sidebars design several times.

Similar works:

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Consent to display content from Youtube
Consent to display content from Vimeo
Google Maps
Consent to display content from Google