I'm working on a requirement where within a map I need to differentiate between two pins. 1 - Normal fuel station 2 - Partnered fuel station

I need to show these two on the map with differentiation and I need to show which brand that fuel station belongs to.

Does anyone have an suggestions?

Here is a basic idea which I tried:

Made partnered bunks in red color which is our brand color and added a box with icons of both brand and out logo, but again its too much going on at once.

How do I make it simple and clean?

enter image description here

  • 1
    Do the users care whether a station is partnered? Or is this just a distinction to make the stations want to become partnered? Commented Aug 2, 2018 at 12:40
  • 2
    Nope we do have extra benefits if user goes to partnered pumps . it is a major use case for us
    – Harshith
    Commented Aug 2, 2018 at 17:09

2 Answers 2

  • Use multiple subtle cues to make the partnered stations look more important, e.g. not just color but maybe also a little bigger, with a slight glow effect, maybe a star shape or something special, etc.
  • Don't put your logo on them. They already know they are using your service.
  • Is there a way you can use the partner logos instead of or on the gas pump icons? That would save you some visual clutter if you could eliminate the gray icon boxes. It would be better if you didn't have to see the partner logo unless you tapped on it for more details (hours, services, etc.) but if that's something legally required (e.g. in the contract you signed with the partners) then you may not be able to get around it.

Based on this comment

Nope we do have extra benefits if user goes to partnered pumps . it is a major use case for us

I would suggest to have a more subtle filling color for the other icons.

Also the "extra information" (tooltip)

I would also display upon hovering or tapping on mobile devices.

  • By "more subtle" do you mean using the same color as for the partnered stations but with lower saturation, like a hovered button vs. a non-hovered button?
    – sintax
    Commented Aug 29, 2019 at 15:09
  • Yeah the partnered stations in this case I would assume shall grab the users attention, yet not scream it. Still: the other stations MUST be visible at all the time imo. Say the user isn't near a partnered station so it would be convenient to drive there: they should still be able to fill their gas. How you color them is up to you; but the partnered stations should stand out without screaming for attention. Lowering the saturation would be a good start :)
    – Muqito
    Commented Aug 31, 2019 at 7:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.