In 2013 I was making user interfaces for a city reference and maps service 2GIS. It is known in Russia and some other countries as a highly detailed catalog of city organizations.
After almost a year of work, our design team and developers made the first-ever version of 2GIS web service previously existed only as mobile apps and a desktop app for Windows. Web maps are now the primary medium of 2GIS.
It starts with graph-paper-styled tiles. When you have a slow connection, you see it in the background.
When interacting with a map, every click makes a search query about what belongs there. I made a lot of pins for different purposes: current geolocation, favorites, points of interest, numbered search results, public transport stations, and a lot more.
Pictograms on the map display different types of public transport.
Clicking a pin opens what we called “callout”, a thing containing all the information about the point on the map. Pins transform into “callouts” and back with morphing animations.
There's a lot of states for “callouts”. It can be an organization, a building, a street, and even a whole city and it can contain very different data.
On-map user interface elements for zooming, using a ruler, geolocating, showing traffic, etc.
Search user interface elements and suggests interactions.
The card containing some list of organizations (and also an advertisement).
Explorations for saving an organization in bookmarks.
All the card states designed for search results and some more user interface elements.