Design solution to Users did not notice sidebar

[SMR9220]

Dependency

• A closed issue research issue for sidebar where research makes a summary of findings presentation and recommendations for Designers to consider.
• When all other features required for MVP have been finished by the Design team

Overview

We need to create design mockups to explore all options for improving the visibility of the sidebar so that we can decide if we are going to try any of them out.

Details

Several users did not even notice the sidebar until page 4. The majority of users did not see that the sidebar action related to their input. It was not in their line of sight. They were focused on the right side of the page where they were making entries.

Action Items

• Explore different options for how to make the information more visible to users (create separate issues for each one)
  • Design Mockups: Side Panel: Moving sidebar to the right side #1191
  • Design Mockups: Side Panel: Make the numbers and circle larger
  • Design Mockups: Side Panel: Adding the shopping cart display to page 2
    • (include details about their choices, and appear across subsequent pages)
  • Design Mockups: Side Panel: Don't show levels and points grayed out until selections made on page 2
  • Design Mockups: Title of Page 2 & 3: Change page title to describe function of the page
    • page 2 would change from Determine Project Level to Determine Project Level and Target Points
    • page 3 would change from Calculate Project TDM Target Points to Finalize Target Point Calculation
• Create issue to do dog-fooding of all option mockups to determine what is helpful
• Move issue to the icebox and add dog-fooding issue to this issue as a dependency.
• One all Dependencies have been removed:
  • Make presentation to product team with recommendations
• Add product label, remove UX lead label
  • Determine which option to pursue based on user feedback.

Resources/Instructions

Add this to each issue

### Resources/Instructions
- This issue is part of the Epic https://github.com/hackforla/tdm-calculator/issues/1180

[Reneedesigns]

Moved sidebar to right side of page, expanded the project level and target point circles

[SMR9220]

Issue #1151associated with this issue.

[SMR9220]

Development pending

[Biuwa]

Is this ready for dev? @Reneedesigns

[Biuwa]

@entrotech this was the last issue on the agenda for today (01-14-23), was a dev issue created from this, and has the design been implemented?

[ExperimentsInHonesty]

Review this issue at next pm meeting so that we can decide what happens next

[Noushie]

@mojimoh Could we maybe try A/B testing here? In other words: if the right side panel does make a difference in getting user's to notice it over the original left one?

Only thing is not too sure about conversion here as the user would most likely only glance/potentially hover on it

[Noushie]

@Biuwa

Ideas to discuss other than shifting sidebar to the right (based on UXR/UXD collaboration):

User Testing Perspective (our thoughts)

• Can see if these makes it more noticeable
• Then test to see if the circles are understood by users

Floating and sticky sidebar on the right-side

Idea #1 (view in figma)

• Americans read left-to-right
• Creating a more 'page-like' screen by removing full sidebar (i.e., blue background) and integrating components on page
• Making the sidebar pop visually by lightening the title columns to gray (also matches page 5 on the current website)
• Shopping cart will just show up below as a scroll-bar pop-up

Idea #2 (view in figma)

Same as idea #1, except UXR/UXD did agree the green target circle was confusing and could cause friction for real users

• To combat confusion of the green target circle: The thought was to space out the earned points from target points -> keeping the earned points circle but dropping the 'target points' to large green text below it

• Separating it from project level and having it more clearly denoted as points (we want them to remain close since they are related, but thought it might add some clarity to what each of them represent)

Idea #3 (view in figma)

Similar to top ideas, except a complete redesign of the target/earned points circle

• A descriptive title for the bar itself
• Earned points out of target points is communicated more fractionally (more of a universal way of presenting this information)
• Responsive, half circle bar (to display this information)