Blinx Design System: Maps

SUMMARY

Blinx Solutions keep a design system as a guide to developers and designers as to how each element should be in each of their applications. This covers everything from the basic components such as buttons, dropdowns and input elements to the more advanced components such as date pickers, modals and upload file windows.

Under the data visualization section of the design system, they previously listed how tables, data charts and charts in cards should be displayed but did not have a section for maps. In this case study I will show the work that went into designing the maps function of the design system.

ROLE

Head of UX/UI

As head of UX I am the owner of the Blinx Design System and responsible managing, updating and releasing new components to developers.

Background

Blinx has previously used maps in their products, however, they have not always been identical in each system.

The development team had previously created maps with ‘Here Maps’ too in the past but were not switching to Google Maps. This means it would be easier for me to style a map using the Google Maps Styling Wizard and then simply save the JSON files for the dev team once they require them.

Understanding the problem

The maps created would need to compliment the branding and colouring of the Blinx brand (currently the older branding – this design system was later redesigned). I was needing to create map views for each screen breakpoint (according to Bootstrap) and keep to the guidelines of the DS in terms of spacing and padding, font sizes, brand colours, all while delivering something that would create a good experience for the user interacting with it.

The solution

The following designs are the maps I created for the design solution. As you will see, it was decided that the colour of the water would match that of the modal colours used in the DS, meaning only the land stands out and it all looks a little more smooth.

I also created some pins & dots for different scenarios. These can be seen as clustered pins or as a range of different coloured dots to help display more data on a map.