Implement desktop menu redesign

[nichhk]

Overview

Our designers have redesigned the desktop menu design in #1157, so we need a frontend engineer to implement it.

Action Items

• [ ] Take a look at the figma and implement the changes

Resources/Instructions

This fits in nicely with Edwin's work on switching to a light theme in #1362, so Edwin has agreed to take a look at it.

• https://github.com/hackforla/311-data/issues/1396

[edwinjue]

@melissahermes99 @elizabeth-ux I was taking a look at the final v2 design for the desktop menu in figma and noticed the dimensions for the new design are 417x838px.

Although taken from a high resolution display, as you can see from the screenshots, the new dimensions you propose may take up quite a bit of real estate on the screen especially for those on lower resolution displays.

Before I do any more work on this, I would like to confirm the new dimensions for the desktop menu are what you want because these new dimensions will require a new v2 design specification for the calendar picker as well considering the increased width of the new design will make the existing calendar picker look small by comparison to the rest of the desktop menu items and won't maximize on the new real estate presented by increasing width from 325px to 417px

Please let me know what you decide. I will be putting this on hold until I hear back. Thanks!

NEW DESIGN - desktop menu (417x838px) - figma

CURRENT DESIGN - desktop menu (325x488px) - in development

[melissahermes99]

I definitely see what you mean, it does take up a lot of space. I much prefer the current design that's in development's dimensions. I am not entirely sure what happened here because I do not think it was the intention to make it that large, going back to our Design Studio page, the previous dimensions of our map menu should've been smaller. I think what might've happened was that while Elizabeth and I were working on it, we scaled it up for visibility while designing and never came back to adjust it again. The map will be a little longer now that we're including a boundaries option but that's about it. I've adjusted the design again in Figma and I will double-check this with Elizabeth! Thanks a ton for letting me know.

[edwinjue]

Thanks for the quick response @melissahermes99 and for adjusting the design. I will continue to work in the original dimensions and focus on small changes until you check in and confirm with Elizabeth.

[melissahermes99]

@edwinjue Elizabeth has confirmed that it looks right and everything is good to go!

[edwinjue]

hi @melissahermes99,

Hope all is well.

I just wanted to confirm with you what you want to see once the Boundaries area of the desktop menu gets expanded.

A previous developer created a CouncilSelector component that looks like the area circled in red:

I'm wondering

• Would you like to see the Type District Name search filter?
• Do you think the sea green/cyan Neighborhood District heading should still appear since Neighborhood Districts already appears in the drop down menu at the top. It may appear redundant if we kept both.

If there is anything else you would like to see, please let me know. Looking forward to your response!

[melissahermes99]

@edwinjue that component looks perfect to use right now! We've been looking into how to search and present districts on the map, hence the tab on the top left of the menu. I completely agree with you on the header in the drop-down. Let's go ahead and leave the heading out and keep the search bar with the district options below it.

[edwinjue]

Hi @melissahermes99, it was great catching up with you last Wednesday. I hope you're well.

With what you're saying, are you suggesting the following for the District tab:

Which in words, replacing the current Enter District search input circled at the top with the Boundaries area circled below?

Otherwise, it is not clear what the Boundaries area at the bottom would do differently than the Search at the top. Let me know what you think. Thanks!

[melissahermes99]

@edwinjue I just spoke with Elizabeth and we haven't fully discussed what the menu would look like under the District tab. She believes it was for Business Districts, as opposed to Neighborhood Councils. So it seems that the District tab and drop-down would serve the same purpose just with extra options. The dropdown could have NCs, Business Districts, etc. any kind of border distinctions as described by the section heading. I think that’s why a scroll was incorporated, to get to the other menu options. I've come up with some changes on Figma, let me know if these work for you!

[edwinjue]

Hey @melissahermes99. Since I'm a late comer to the game, I'm still learning about the expectations the end users have and their requirements. I really appreciate your patience and your diligence.

So, If I understand correctly, everything we're designing is under the "Address" tab and the "District" tab is something else in the works. Is this correct?

Please feel free to correct me if I've misunderstood. Thanks!

[melissahermes99]

That's correct! I'm going to bring it up in the meeting today with Elizabeth and hopefully, we can finalize what should go under that tab so we can finish up the menu.

[edwinjue]

Hi @melissahermes99 @elizabeth-ux thanks for dropping in tonight.

Per our discussion, just wanted to let you know I was able to draft up a version of the front-end per your comments and new design in Figma

Recap:

• [ ] Change Filters & Settings to Filters
• [ ] Separate Boundaries into its own expandable section
• [ ] Remove Address and District tabs
• [ ] Propose a change to handle presence of dual input fields (Enter Address and Neighborhood District in boundaries)
• [ ] Propose a solution for low resolution displays with limited real estate. This is when Desktop Menu is cut off. May need to redesign as a side-panel to allow vertical scrollbars. (this is likely something we will get to post v2 rollout)

Please let me know if I missed anything.

Below, I've provided screenshots of the latest version in development with your new design changes in mind. If there anything else you'd like to see, please let me know.

Default (Both collapsed)

Filters expanded

Boundaries expanded

[melissahermes99]

Wow! That looks fantastic, I'll pass this along to Elizabeth and we'll finalize if this is the way to go. Either way, it looks great and I'm super impressed with how fast you came up with this design!

[edwinjue]

Thanks, keep me updated!

[melissahermes99]

@edwinjue Could you give me more insight into the hamburger menu idea you and Hosna had brought up? For the upcoming launch, we'll keep the menu you had created last week except we'll remove the tabs from the top and change the title. I've attached an image of what we were thinking. Let me know if you think the scroll bar will be necessary. For the next version, we'll create some concepts and ideas for how we can place the menu and the search bars within the menu.