The pop-up

When you're looking at data on the maps at Mapsense, the users can click on a point to receive more information about it. I was tasked to take a look at their current pop-up and improve it, quickly and efficiently. The challenging part was that the category name and number of them could change dramatically according to the data being displayed. This was a version one. Version 2 with more personality was a project for a later time! 


Getting Sketchy


Previous Design

Previous Design (pop up on right side)

The toggles on the left were to show the amount of screen real estate that could be taken up by other filters. 

New design

New Design (on data point)

The toggles on the left were to show the amount of screen real estate that could be taken up by other filters

Let's talk about the problem: 
I found that the main pain point of the having the information on the right side was that it was taking up more screen real estate.  Also, I saw that if the user happened to move their mouse, they would no longer know which point they selected. This was a major pain-point when I was using the program my self. I had no idea which point I was getting information for! 

Let's talk about the solution: 
Putting the information on a popup on the point was helpful because the user's eye doesn't travel back and forth on the screen. This also helps to show which point the user selected. Though, we could have solved this by putting an outline on the selected point, the solution needed to be coded and create quickly, and this was the fastest way to solve it.