Skip to main content

Map Overhaul Specs (old)

Map Overhaul Specs

JIRA: https://powrtrak.atlassian.net/browse/PM-7359

Figma: https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul

Juwan Bepo last updated on October 16, 2019

alt_text

New Location Panel design, more details in Location drilldowns, and new Search design

Previously Created Maps​

Scenario: TinyMCE should be available in location drilldowns until user edits after the overhaul

Given a user has created a Map prior to the overhaul

When the user has not yet edited their Map since the overhaul

Then text and formatting in TinyMCE will not change

And when the user loads the editor for their Map after the overhaul

Then TinyMCE and previous formatting will no longer be available in their Map

Scenario: Popup message should appear when existing users load the Map editor

Given a user created a Map prior to the overhaul,

When the user loads the editor for their Map after the overhaul

Then a popup message should appear letting the user know about the new updates to Map

Locations tab​

Scenario: New Locations tab

Given a user loads the Map editor,

Then the previously named “Content” tab should now be the “Locations” tab

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=110%3A219​

Scenario: New Maps should only have 3 locations by default

Given a user creates a new Map plugin,

When the user opens the Locations tab,

Then there should only be 3 default locations, identical to the first three default addresses in the current default

Scenario: Rename Location Title and Location Description inputs in location drilldowns

Given a user clicks on a location drilldown in the Locations tab

Then Location Title should be renamed to “Name”

And Location Description should be renamed to “Description”

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=88%3A1​

Scenario: Remove TinyMCE for the Location Title and Location Description inputs

Given a user clicks on a location drilldown,

Then the Location Title and Location Description TinyMCE inputs should no longer be available

And both inputs should now be a regular text input

Scenario: New Phone Number and Website inputs in location drilldowns

Given a user clicks on a location drilldown,

Then a new “Phone Number” and “Website” input should be visible

And if a user inputs an invalid website URL,

Then an error should appear below the website input with the text, “Please enter a valid URL”

Scenario: Placeholders in Locations drilldown

Given a user clicks on a location drilldown,

When the user erases text in the Name input or the input is empty

Then the input will display “Headquarters” as the placeholder

And when the user erases the Description input

Then the input will display “Main Office” as the placeholder

And when the user erases the Phone Number input

Then the input will display “(123) 456-7890” as the placeholder

And when the user erases the Website input

Then the input will display “https://www.google.com” as the placeholder

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=130%3A0​

Scenario: New tooltip for the first location in a Map plugin

Given a user clicks on the FIRST location drilldown,

Then a tooltip should appear next to the “Enter Address” input with the text, “Map will center on this address, the first in your list of locations”

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=97%3A7​

Scenario: Popup content in Map should contain Name, Description, Address and Website for each location

Given a user clicks on the map pin for a location

When the popup content for the specific location opens

Then it should display the location’s Name, Description, Address, Phone Number, Website, and directions link only

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=104%3A0​

Content tab​

Scenario: Repurposed Content tab

Given a user creates a new Map plugin

When the user clicks on the Content tab

Then the following features should always be visible:

  1. Show Locations Panel (transferred from the Map Display drilldown)
  2. Search Bar (transferred from the Map Display drilldown)
  3. Show Directions Link

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=110%3A490​

Scenario: Default state of toggles in the Content tab

Given a user creates a new Map plugin,

When the user clicks on the Content tab,

Then the Show Locations Panel and Search Bar toggles should be OFF by default

And the Show Directions Link toggle should be ON by default

Scenario: Change the placeholder for search bar

Given a user opens the Content tab

When the user turns “Search Bar” ON

Then the placeholder text for the search input should be “Search by Location”

Scenario: Enabling Show Directions Link toggle

Given a user clicks on the Content tab,

When the user disables the “Show Directions Link” toggle

Then the “Directions” link which appears after clicking on a location pin should NOT be visible

Location Panel (appView): For each scenario in this section, Show Locations Panel must be ON.​

Scenario: Website in the Locations Panel should be underlined

Given a user clicks on a location drilldown in the Content tab

When the user adds a valid URL to the “Website” input

Then the URL should always appear with an underline in the Locations Panel on Map

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=110%3A219​

Scenario: New icon for address in the Locations Panels

Given a user clicks on a location drilldown in the Content tab,

When the user adds a valid address in the Enter Address field,

Then an map-market-alt icon should appear to the left of the Address in the Locations Panel

And the icon should be the same color as the Location Details color in the Fonts drilldown

Scenario: New icon for phone number in the Locations Panels

Given a user clicks on a location drilldown in the Content tab,

When the user adds text in the Phone Number field,

Then a phone icon should appear to the left of the phone number in the Locations Panel

And the icon should be the same color as the Location Details color in the Fonts drilldown

Scenario: New icon for website in the Locations Panels

Given a user clicks on a location drilldown in the Content tab,

When the user adds a valid URL in the Website field,

Then a link icon should appear to the left of the website in the Locations Panel

And the icon should be the same color as the Location Details color in the Fonts drilldown

Scenario: Inputs without content should not appear in the Locations Panel

Given a user does NOT add content to an input in the location drilldown,

Then the content and its corresponding icon should NOT appear in the Locations Panel

(e.g. if a user does not add text to the Phone Number input, then the phone icon should not appear in the Locations Panel for that location and the link icon and URL should move up in its place)​

Scenario: The height of each section in the Locations Panel should be the same

Given a user adds more than one location to their Map,

Then the height of each section (i.e. each location) in the Locations Panel should be equal to the height of the largest section

(i.e. if a Map with a single location has a section of height 130px in the Locations Panel and a new location is added to the Map with details that make the height 150px, then both locations in the Panel should now have a height of 150px)​

Scenario: Width of Locations Panel should be 30% of the Map

Given a user has “Show Locations Panel” in the Map Display drilldown enabled,

Then the width of the Locations Panel should be 30% of the width of the entire Map

Scenario: Remove Locations Panel color inversion effect

Given a user has “Show Locations Panel” in the Map Display drilldown enabled,

When the user hovers over a location in the Locations Panel,

Then the background and font colors should NOT invert any more

Scenario: Behavior for clicking a location in the Locations Panel

Given a user clicks a location in the Locations Panel

When Map centers the location on the map

Then Map should also automatically open the details bubble (i.e. popup content) for that location

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=104%3A0​

Map Display​

Scenario: Map Display drilldown should display all visual settings of Map

Given a user opens the Map Display drilldown in the Design tab

Then the drilldown should contain the following settings:

  1. Map Provider
  2. Zoom
  3. Map Type (only when Map Provider > Google Maps)
  4. Auto display nearest location
  5. Enable Dynamic Map (only when Map Provider > Google Maps)
  6. Map Shape Type
  7. Map Style

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=110%3A560​

Scenario: Tooltip for Enable Dynamic Map

Given a user opens the Map Display drilldown

When the user hovers over the tooltip icon for Enable Dynamic Map

Then a tooltip should appear with the text, “Map will only become interactive after a visitor on your website clicks on it, if this toggle is off.”

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=110%3A560​

Design tab​

Scenario: Change default Pin Highlight Color

Given a user creates a new Map plugin

When the user hovers over a location in the appView,

Then the Pin Highlight Color should be #8b0000 by default

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=110%3A422​

Scenario: Name should always be bolded in Locations Panel

Given a user clicks on a location drilldown in the Content tab,

When the user adds text to the “Name” input

Then the text should always appear bold in the Locations Panel on Map

And the default Name should be 14px in $color7

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=72%3A206​

Scenario: All Map Details in Locations Panel should be 12px in $color7 by default

Given a user clicks on a location drilldown in the Content tab,

When the user adds text to the “Enter Address,” “Description,” “Phone Number,” or “Website” inputs

Then the default text should be 12px in $color7 in the Locations Panel

Scenario: Rename Description in the Fonts drilldown

Given a user opens the Fonts drilldown in the Design tab,

Then “Description” should be renamed “Map Details”

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=110%3A353​

Scenario: Add a font size selector to the color and font selector for location Names

Given a user opens the Fonts drilldown in the Design tab,

Then a font size selector should appear to the right of the name and font selector for “Names”

And the maximum font size should be 32px

And the designated font size should be the same for all location Names in the Locations Panel

And the “Max Name Size” slider should be removed from settings

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=110%3A353​

Scenario: Add a font size selector to the color and font selector for Map Details

Given a user opens the Fonts drilldown in the Design tab,

Then a font size selector should appear to the right of the name and font selector for “Map Details” (“Address,” “Description,” “Phone Number,” and “Website” )

And the maximum font size should be 24px

And the designated font size should be the same for all Map Details in the Locations Panel

And the “Max Description Size” slider should be removed from settings

Scenario: New Hover Color selector for Locations Panel

Given a user opens the Background & Border drilldown in the Design tab

Then the “Hover Color” selector should appear directly below the “Background color” selector

And the default color should be #E4E4E4

And when a user hovers over the Locations Panel

Then the designated Hover Color should replace the Background Color

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=167%3A1​

Scenario: Change Plugin Width to percentages instead of pixels

Given a user opens the Plugin Size drilldown in the Design tab

When the user adjusts the Plugin Width slider

Then the designated percentage should represent the percentage of a screen the Map’s width takes up

appView​

Scenario: Reduce button sizes on Google Maps

From Pilar: if this is a rabbit hole and doesn't seem possible, don’t spend too much time on it.

Given the Map appView is visible,

Then the Map/Satellite radio buttons should be 12% of the Map width, with a minimum width of 43px

And the Pegman and zoom buttons should be 4% of the Map width, with a minimum width of 13px

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=110%3A219​

Scenario: Search Radius dropdown options in appView

Given a user clicks on the Content tab,

When the user selects “Miles” for Search Radius Units,

Then the user should see the values of “5 mi”, “10 mi”, “20 mi”, and “100 mi” in the Search Radius dropdown in the appView

And when the user has selected “Kilometers” for Search Radius Units,

Then the user should see the values of “5 km”, “10 km”, “20 km”, and “100 km” in the Search Radius dropdown in the appView

Mobile​

Scenario: Locations Panel should appear below the Map

Given a user loads a POWr Map on a mobile device

When Show Locations Panel is enabled

Then the Locations Panel should appear below the Map

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=146%3A370​

Scenarios: Limit of 2 locations appear on the Locations Panel before scrolling required

Given a user loads a POWr Map on a mobile device

When Show Locations Panel is enabled

Then the Locations Panel should fully display the first two locations in the Locations drilldown

And the remaining locations should appear when scrolling up the Locations Panel

https://www.figma.com/file/kCwUdbtb5xhmEjzqAJZaPR/Map-Overhaul?node-id=178%3A0​

Previously created maps

Locations tab

✓Locations tab : renamed tab & list default addresses

✓Locations tab : tooltip

✓Location drilldown: new text boxes&placeholders

Location drilldown: tooltip

Location drilldown: invalid URL

✓Click on pin behavior

Click on location from the list behavior - radius radio buttons

Content tab

Content tab settings: locations panel, search bar, read radius, show directions (starter?)

Content tab settings: defaults

Content tab settings: search bar ON

Content tab settings: show directions toggle

Design tab

Map Display drilldown: open street map option (default) + settings list

Map Display drilldown: google maps + settings list

✓Fonts drilldown: changes + defaults

Map Pin drilldown: defaults

✓Map Size drilldown: percentage

Appearance

Standalone view: search bar change

Standalone view: locations panel changes

✓Mobile view

  1. Remove search radius in appView and in Content drilldown
  2. Add font selector to Name and Map Details color/font selector and remove Max [x] Size sliders
  3. Plugin Size > percentage instead of pixels (ask Sergey)
  4. Specs for previous versions
  5. Specs for retaining search bar but changing placeholder

Meeting Notes

  • Two versions of the Location drilldown elements for old and new users
  • Update (remove) specs for same height of all location panel sections
  • Steal FAQ stuff for hover color and remove hover color selector from specs/mocks
  • Letter break for font sizes
  • If text is greater than 32px, set to 32px for existing users