Need to update sidebar & Success Toast

[VJ1285]

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:

• Need to add animation to the sidebar to attract users attention
• Summary of points below Earned Points help users see what they have selected.
  Example
  25
  ----
  bike parking (2pt)
  wayfinding (1 pt)
  rideshare (2 pt)
  Also see summary on last page of calculato
• Not Run animation on page change.
• Fix crashing bug_

Design updates as of 8/18

• remove the pts under earned until they actual have earned them
• make sure Line breaks are spaced correctly on shopping cart
• Decide on what to do when too shopping cart items are longer than the available space - scroll bar?

Front end issues to create once design is finalized:

• create issue to remove the pts under earned until they actual have earned them
• create issue to swap the current side bar numbers for the two circle design
• create issue toUpdate tool tip to display both "earned point" and "target point" descriptions.
• create issue to add the shopping cart

**Final tasks **

• implement the above and push to UAT
• 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.
• strikethrough dependency on issue Create Detailed/In-depth video for users #866

Resources/Instructions

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

[ExperimentsInHonesty]

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

[ExperimentsInHonesty]

@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]

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]

Progress: finished and added to figma

[Shaeeka]

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

[Shaeeka]

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
   

[Shaeeka]

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

[Shaeeka]

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

Features

• Same as Option 3b, side bar is moved to right.

[seenaiype]

@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
  
• 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]

Listing the 3 Mock ups for the Side Slidebars.

Mock Up No. 1

Mock Up No. 2

Mock Up No. 3

[seenaiype]

@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]

[ExperimentsInHonesty]

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]

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]

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]

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

Right Side Bar

Chosen Donut Chart

[entrotech]

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

[seenaiype]

Couple of updates

• The initial state for the dial, as the page loads for a new project.
• Let's put a small description on each of the stage for explanation
• the words to be bigger font - earnings and target
• For the points cart - The cart to have plain white background, the transparency is hard to read
• Once ready, update Figma to have a green line, for the dev team to pickup
• Check on the other items to be finished on the main description above.

[seenaiype]

Created - 909 for removing pts from earned section

[Shaeeka]