SidM Systems

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

CLIENT: NHS City and Hackney CCG

SidM Systems

Social Infrastructure Demand Modelling

A suite of cloud based digital spatial tools designed to assist in housing and social infrastructure planning. The tools provide data driven evidence base for Needs assessments, Infrastructure Plans, Local Plans as well as provides rapid scenario planning of social infrastructure assets.

For this project I designed the interface of the software and all its assets. The aim was not just to making the app usable, but also to ease the fruition of complex set of data.


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.





Housing and Health icons

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.

Therefore the 4 icons with the houses indicate different kind of housing based on their size.  The first fours in full colour indicate houses already built (in the year selected by the users), while the second row represent the ones in construction.
Finally the last icon is for the General Practices.

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 blue for GPs. 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.

The sidebar icons

Set of icons designed for the sidebar data.

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