Geographical information systems (GIS) are systems designed for highly specialized use cases. The development of these systems tends to fall behind on (now) modern interaction patterns and requires trained specialists to be operated. Tailormap was created to be used and viewed on the cloud, making it suitable for cross-platform use.Our goal was to create a modern, human-first, scalable, cross-platform GIS experience.

An experience that works for both highly-trained specialists, as well as users with little to no prior training.

Being briefed on the complexity of the software and its users, we kicked off the project by mapping out potential pain points and analyzing typical user flows. By taking inventory of industry-standard and niche GIS interaction patterns, we built a framework of reference. A framework that we would use as a portal between niche and conventional.

Acting on our framework, we audited UI elements to filter out awkward interactions and niche cases. As desktop-style interactions wouldn't translate well to a web-based platform, we had to rethink how users could navigate the software. Tailormap being multiplatform, we had to translate these interactions to touch-supported systems.

Building upon the platform constraints has led us to design the Tailormap interaction architecture. Which is a scalable system in which we restructured the user flow based on layers, type, and importance of function. We build prototypes using our system to re-map the core navigation to corresponding positions and elements. Building prototypes in rapid succession allowed us to eliminate awkward patterns and validate the new.

To design Tailormap's new look and feel, we first had to identify core visual assets. We started with the color scheme, typography, iconography, grid system. As theming would be a unique selling point, we had to decide to which extent a user would be allowed to edit the visuals styling. Enabling users to control the styling would be risky, as we couldn't ensure an optimal user experience. We decided to limit the customization options to the most minimal yet prominent visual elements. Doing so meant that we had to design every other visual, such as the icon pack, to compliment a wide variety of colors.

We decided on using both the primary and secondary colors to refer to interactive elements. Doing this would make both colors interchangeable, making Tailormap flexible enough to still be usable by users with colorblindness.

As we already had taken inventory of the interface elements, it was time to combine the interaction architecture and visual foundations to form the UI components. Kicking it off with base components, we iteratively expanded the component library while simultaneously testing the elements and states using wireframes and prototypes.

Having the system in place, we had an all-encompassing framework to further add to Tailormap. We created new functionalities, such as Map Analysis, Adding and Deleting objects, Editing and Assigning object Passports, Theming, Filtering (thematic, spatial, specific), and many more.

To finalize the project, we created high-fidelity prototypes and set up the design system library to be managed and further developed by the client.