Epic: Change map color scheme to light mode

[ryanfchase]

Design To Engineering Hand Off

Overview

We need to change the design/color of the map background to more easily see pins/differentiation.

Description of Requested Change

We'd like to make the map background to a lighter color to make it easier to see the pins.

PM Action Items

• Fix Title
• Update 'Feature Description'
• Add assignees (Design Lead, Engineering Lead, Assigned PM)
• Assign a Milestone
• Assign a Feature label
• Remove label 'Milestone: Missing'
• Add to Project Board

Design

Design Action Items

• fill in 'Section Name' in Figma Resources
• update image url and remove markdown tags
• Update 'Design Issue(s)' with list of relevant issues with role role: UI/UX Design

Figma Resources

• Link to Figma File
• Page Name:⭐⭐⭐ V1.2 HAND-OFF
• Section Name: Map: Light Version

Screenshot of Finalized Designs

Screenshot of Figma

Design Issue(s)

• Map Redesign Updates for V1.2 #1601 - Map Redesign Updates for V1.2

Engineering

Engineering Action Items

• Review 'Useful Notes for Figma' below
• Locate section on 311 Data Figma
• Create and list engineering tickets

Useful Notes for Figma

The file describes the overall Figma page. There is one Figma file for the team, which is the 311_Data_UXUI file. The page is the location of designs within the file, selected via the left-hand-side as a table of contents. The section name is the title of a particular section of the page. The section will encompass all relevant info needed to complete this request.

Engineering Issue(s)

• Change Map background style and boundary color #1661

Resources

• MapBox docs on map styles

[ryanfchase]

PM team is migrating the design to eng hand off tickets to become epics. Moving to New Issue Approval in the meantime.

[ryanfchase]

PM Instructions for correcting Design to Engineering Hand Off tickets to become Epics:

• Preface title with "Epic: "
• Update overview to comply with format, We need X for Y reason (consider using text from Description of Requested Change)
• Make sure labels indicate who should be working on this ticket next (see instructions here)
• If Milestone was set to Launch, set it to Map Page or Product Maintenance.
• Modify the screenshot to use the Details command to make it hideable (see instructions here)

[ryanfchase]

More info needed from dev team. Leaving as draft.

[ryanfchase]

Hi @annaseulgi and design team -- @Skydodle implemented a prototype version of the light basemap and boundary color -- after reviewing the work needed to implement the designs on Figma, we've come up with a couple of points to address:

• We noted that the figma section on Map: Light Version includes boundaries for all of LA County. Adding all county boundaries is not part of the requested changes, we will disregard this aspect of the design
• We're noticing that this light basemap's mountains and terrain is different than the Figma. I think dev is limited here to what Mapbox can provide as pre-determined basemaps. Please review the "Comparing Mapbox Light v8 thru v11" dropdown below
• Dev wants to know what the on-hover design should be for the light mode map (while the map is not focused on a particular NC) -- will it be #62ADFC, per the reference?
• Dev wants to confirm that while focusing on an NC should the other NC boundaries still be drawn? (See "NC On-Focus Boundaries" dropdown)

@Skydodle's prototype

Image: Light Version includes LA County boundaries

NC On-Focus Boundaries

Boundaries for non-focused NCs (as pictured in Figma)

Boundaries for non-focused NC's are missing (pictured by prototype)

Comparing Mapbox Light v8 thru v11

v8

v9

v10

v11

Thanks! Let us know if you need any clarification on these questions!! cc @edwinjue

[annaseulgi]

1. Please ignore the other areas. It was included in a vector I found for LA County but it was unintentional to include those regions.
2. Are v11 contrast levels set or are they adjustable in mapbox? Ideally, it would be good to have higher contrast levels (such as v9) without the terrain because it can be distracting.
3. Can we get some clarification on this question?
4. While a user is viewing a specific neighborhood district, it may be good to have thinner lines outlining the other ND in the area with potentially a lower opacity of the lines/outlines (if possible). Please follow up regarding this & if design will need to provide a mockup of this.

Thanks all, @ryanfchase @Skydodle @edwinjue !

[ryanfchase]

Hi @annaseulgi thanks for the responses! Ya lemme clarify on your follow ups

Are v11 contrast levels set or are they adjustable in mapbox? Ideally, it would be good to have higher contrast levels (such as v9) without the terrain because it can be distracting

I would say the pre-defined contrast levels for basemaps are not adjustable. If v9 has the best contrast, we should use that one as a pre-launch style. In the future, I think we could experiment with building custom map styles in Mapbox. I was just tinkering around with this tutorial on creating a basemap with custom hillshade styles.

Can we get some clarification on this question?

Sure! For example, when you hover over an NC, we are getting a grey fill color within the boundary. While we're implementing light mode with the, should we use the blue fill color for the hovered NC? See pictures below...

Screenshot of current NC hover

Screenshot of NC hover (@funbunch's proposed implementation)

[annaseulgi]

@ryanfchase thanks for the clarification - the blue fill with the opacity looks good but I'll discuss it with the design team and get back to yall on this (@funbunch )

[annaseulgi]

@ryanfchase @funbunch Hi all, let's go with the proposed implementation following the same color and opacity :). Thank you!

[ryanfchase]

PMs are noting that light mode is implemented. Closing this as done!