search

hackforla / tdm-calculator

DTLA Hack for LA is partnering with Los Angeles Department of Transportation (LADOT) to develop a Traffic Demand Management (TDM) calculator tool. This tool will help planners at LADOT and real estate developers to meet the Los Angeles’s Mobility Plan goals by 2035.
https://tdm.ladot.lacity.org
GNU General Public License v2.0
48 stars 32 forks source link

Need to update sidebar & Success Toast #874

Closed VJ1285 closed 3 years ago

VJ1285 commented 3 years ago

Overview

Need to update the sidebar (and change of states) and success toast such that they are readily identified by the user

Action Items

_Finished:

Design updates as of 8/18

Front end issues to create once design is finalized:

Final tasks

Resources/Instructions

https://docs.google.com/spreadsheets/d/1SEd8uPOwOmEMdsDR_pylZ2tiByopzPrmlqB5Y4Ka4xc/edit?usp=sharing

ExperimentsInHonesty commented 3 years ago

David said he was interested in having a list of items selected appear under the accruing points earned

ExperimentsInHonesty commented 3 years ago

@Jonathanko52 We have reduced scope on this issue until the usability comes back from adding the measures they have selected. We are also going send it back to design so I am un assigning you for now. You can pick this back up once design has come up with mock ups and the stakeholder has reviewed.

seenaiype commented 3 years ago

As discussed, we shall come up with 3 mockups

  1. Shopping cart on left and right pane - Shaeeka
  2. Move the earned to a different section - Madison
  3. Different way to show the earned vs target points - Hope Shin
shinhope commented 3 years ago

Progress: finished and added to figma circle 1-12 tracker 1-12 new sidebar

Shaeeka commented 3 years ago

Option 2: Bottom Bar Variation by Madison- Located at Figma "New Sidebar- Aug 2021" page image

Shaeeka commented 3 years ago

Option 3a: Cart Style R. Sidebar by Shaeeka - Located at Figma "New Sidebar- Aug 2021" page

Features:

  1. Target bar to show if a user is meeting its target point.
  2. Earned point highlighted in color green to draw attention of the user so they are aware
  3. List of TDM measures that are selected by a user
    image
Shaeeka commented 3 years ago

Option 3b: Cart Style L. Sidebar by Shaeeka - Located at Figma "New Sidebar- Aug 2021" page

Features:

  1. Target bar to show if a user is meeting its target point.
  2. List of TDM measures that are selected by a user

image

Shaeeka commented 3 years ago

Option 3c: Cart Style R. Sidebar Version 2 by Shaeeka - Located at Figma "New Sidebar- Aug 2021" page

Features

image

seenaiype commented 3 years ago

@salauds , we discussed and would like to have the below three mockups

  1. Left Pane with the existing Project and earned and target points with the shopping cart

  2. Left Pane with the existing Project level and earned and target points in the circle dial with the shopping cart.

    • To use the below dial image
    • Update the dial to show Colors - red till 25% of the target achieved, orange from 25 to 75 %, yellow 75% to 90% and then green when target achieved. If the points go beyond, leave it as green , but increase the points shown.

  3. show the Project , earned and target points on the right pane.

Shaeeka commented 3 years ago

Listing the 3 Mock ups for the Side Slidebars. image Mock Up No. 1 image Mock Up No. 2 image Mock Up No. 3 image

seenaiype commented 3 years ago

@Shaeeka - we had a review with bonnie on the mockups. She really liked them.. couple of updates to be made before we present it to ladot

  1. Try to update the cart with white background and blue text to stand out a little for mockup 1 and 2.
  2. For mockup 3, show the dial with target not achieved scenario like 15/25 points to show the transition
  3. Since our team is split on the two designs for the dial. We would also like to get poll done with the ui/us community, let's do the mockup using usability hub free account and create 4 designs - circle or / for points and dial color to have start with grey or red.

Let me know if any questions

Shaeeka commented 3 years ago

image image image image

ExperimentsInHonesty commented 3 years ago

LADOT decisions made

  1. remove the pts under earned until they actual have earned them
  2. use the circle with the small circle for target
  3. add the shopping cart
  4. implement the above and push to UAT
  5. move the points/cart to right and then test with users both versions before pushing the right one to UAT. If the left one wins, we will roll back the right version on dev.
seenaiype commented 3 years ago

3 new issues to be created for developers

  1. Removing the points (pts ) from earned column , when there is no points gained
  2. Issues with two circles for earned and target and add the shopping cart (confirm the strategies with multiple choices to show properly)
  3. Issue with the two circles for earned and target and add the shopping cart (confirm the strategies with multiple choices to show properly) on the right pane (leave this in dev environment) for usability testing.
seenaiype commented 3 years ago

Questions

  1. Do we need the shopping cart on all the pages or only on page 4 (strategies)?
  2. How to handle scroll bar for shopping cart as it grows?
  3. Confirm the order of which items are added to the shopping cart?
  4. Do we need the success toast or only the dial is enough?2.
Shaeeka commented 3 years ago

Updated the cart background (in the screen shot the cart texts look blurry but in the actual file it looks clear) and including the final designs for the Dev team. Left Side Bar image Right Side Bar image Chosen Donut Chart image

entrotech commented 3 years ago

Created Issue #908 for developers to create the "Donut Chart", i.e., Earned Points progress control.

seenaiype commented 3 years ago

Couple of updates

seenaiype commented 3 years ago

Created - 909 for removing pts from earned section

Shaeeka commented 3 years ago

image