Design: Layout Improvements

[Austinauth]

As the LW UI is being built out there are a few layout issues we can begin to address. Lets use this issue as a discussion for layout improvements.

Known Issues

• Scale: Modules are too big and take up too much vertical space, especially on smaller screens.
• Map Scrolling: Because the map takes up so much space scrolling becomes an issue. Often times the cursor gets locked scrolling the map as opposed to the actual page.

[kingtraceyj]

Layout out Improvements

• Consolidated header I header icons -- now header is 42px high
• Consolidated metric cards to 108px or 86px high (see discussion questions below)
• Added toggle between map view and list view of active shipment so user doesn't have to scroll to the bottom of the page
• Decreased margins between elements - 14 px
• Overall height of dashboard should be less than 700px so no scrolling should be necessary

Discussion question There are two options for metric cards. The first includs toggles to help make the metrics more believable — especially the shipments complete. A user would most likely like to see complete shipments broken down into today, month, and year and would need a way to toggle between those views. The second has no toggles and a user can only see completed shipments for the day (or month or year or whatever we decide is most important) The metric cards are much smaller can show less data. Is there an option that we are leaning towards?

@Austinauth @rvennam

[Austinauth]

@kingtraceyj Bringing our in-person conversation here. I like the first option with the toggle-able metrics. Just not sure if the toggle for the last two modules (Distribution Centers & Retail Centers) makes sense.

@rvennam Thoughts?

[rvennam]

Not sure what we would toggle for distribution and relation centers. I like the option 2 better as it leaves more real estate for anything we might want to add in the future.

[kingtraceyj]

updated retailer view with the local weather forecast

[Austinauth]

Great, we will go with this until further metrics are available that support the toggle pattern.

[Austinauth]

@kingtraceyj • Post list view screenshots. • Distribution center selected. • Shipment selected.

[kingtraceyj]

@rvennam & @Austinauth I've attached the screens for most states except for what we talked about today (hover states for list view, maybe an icon in list view to take user to map view)

List View

Distribution Selected

Shipment Selected

Nothing Selected

Retailer Selected

Weather Simulated

Weather Selected

[Austinauth]

@kingtraceyj These look great! @rvennam can we close this issue now that all the designs are accounted for?

[Austinauth]

@hellobrian Tagging you on this issue so you can see the latest hi-fi designs.

[hellobrian]

To do:

• [ ] remove vertical line in global nav
• [ ] fix spacing between cards and map (firefox)
• [ ] vertical center icons

[Austinauth]

@rvennam Check out the Hifis.