Update data upload dialog with icons (or better text)

[nllong]

Redesign this modal dialog to include icons of the various actions:

[RDmitchell]

If these button are replaced with icons, maybe they should be grouped somehow, ie, all the ESPM options together, etc (?). Also, the icons should have a "help" popup when the user rolls over the icon so that the use can see the actual import case the icon is representing.

[adrian-lara]

Sharing this in hopes of getting feedback and/or starting the conversation that'll help narrow down what we want this to look like:

[nllong]

I think this is a good start! I like that you broke out the PM, Prop/TaxLot, and Meters sections. I would put Properties and Tax lots first in the list, then PM, then Meters.

The icons are nice, but I'm working if there is stock art that we could use? If we keep the icons, then the icon should be om the left and aligned...

@RDmitchell @axelstudios - thoughts?

[adrian-lara]

Quick note - I stuck to the icons available via font-awesome 4.7.0 that SEED has installed now. https://fontawesome.com/v4.7.0/icons/

Happy to get the icons from elsewhere though.

[adrian-lara]

@nllong @axelstudios @RDmitchell Let me know what you think.

Here's the latest iteration that includes the suggested changes and a few more small ones:

• align "Time Period
• left align icons
• swap PM and Prop/TaxLot sections
• change Building Sync and Spreadsheet button text for consistency

[RDmitchell]

This does seem cleaner.

We will have to explain to existing users that they would choose "Upload a spreadsheet" for the ESPM files, but we already talked about that in slack.

[adrian-lara]

@RDmitchell and @nllong Per our discussion, I was able to grab our internal UI/UX designer for about 30 minutes. I gave him the appropriate context, and this is the really rough whiteboard mock up he came up with.

Note that this doesn't show the exact text (i.e. "Time" in the top right would still say "Time Period").

But the main idea is to implement tabs to help distinguish between "Properties and Tax Lots" import and "Meters" import. I'll mention a few more details below the image but I'm happy to jump on a call to explain more and discuss initial reactions.

Other notable points/explanations:

• The 3 "Upload a... " buttons have been consolidated into one button.
• Upon clicking that button, the user would be prompted to choose a file, and we'll "verify" with a check mark that the file is of the correct type.
• The upload process won't be moved forward until the user clicks the "Confirm" button on the bottom right.
• The text regarding which file types are supported will be moved to the "FILE TYPE SUPPORTED" section.
• The meter tab will look very similar to the property and tax lot tab, but the PM login section will be removed and the file type supported text will be changed.

[Ryoken]

Upload data modal:

Clicking on Portfolio Manager:

Meter Data:

Cycle:

[RDmitchell]

@Ryoken / @axelstudios -- I'm not sure we should put Time Period as the name for Cycle -- it's Cycle everywhere else.

Or maybe Time Period / Cycle ??

And it's not necessarily just used as a "time period" -- it's basically a grouping mechanism the way it is implemented now.

[nllong]

This is looking great! And yes, the tab should probably be Cycle. This will probably be one of the items that will get white-labeled in the near future.

[macintoshpie]

This does look excellent 🤠

I am also wondering about the cycle selection. From my understanding, It's only specific to property/tax lot data (not meter data). So maybe the select should be underneath the Property and Tax Lot Data tab?

[RDmitchell]

@macintoshpie -- yes I think you are right -- since it only applies to that one tab, it probably belongs inside the tab itself.

Good catch !

[Ryoken]

Renamed selection to "Cycle" and moved to the "Property and Tax Lot Data" tab.

[RDmitchell]

Instance: dev1 SHA: f3e9a4a

This is the final configuration of the import screen, which seems good to me.