Teake Kastelein
53.2194° N, 6.5665° E —— NL
Identity, Product Design, UX Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

  • Role

    Design lead & production
  • Agency

    Concept 7
  • Project type

Tailormap (GIS)

Tailormap is a highly customisable GIS viewer designed to create maps layers for any professional discipline. For Tailormap we did a complete redesign to make the experience more user friendly, scalable and modern. By building upon their users we redesigned the flows and interactions to better translate the experience to modern platforms. To accommodate a bigger clientele, we designed new complex functions, making the software more customisable for specialised needs. Through the redesign process we created the Tailormap Design System to introduce new design principals and to standardise components for consistency. 

Tailormap Demo - Map layers
The challenge

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.

Tailormap - list view
Building the experience

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.

Tailormap wireframe - UI architecture
Tailormap 4 layer system
Old interactions, new interactions

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.

Tailormap - iconography
Tailormap - color system
Tailormap - styling presentation
Visual foundations

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.

Tailormap - UI drawer system
Tailormap - Design System Library
Building the design system library

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.

Tailormap Demo - Map layers
The outcome

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.

Tailormap - selection
Tailormap - create a layer
Tailormap demo - draw objects