Design: Update Submit Snapshot tables

[NilakshiS]

Note

This issue would normally have a dependency upon #2013, but due to impending deadlines and having other high priority issues dependent on it, this issue will be worked on concurrently with #2013.

Overview

Please update the design of the table on the Submit Snapshot page so that it is consistent with the updated style guidelines from #2013 .

Details

The design of the tables on the Submit Snapshot page is inconsistent with the updated table design on the style guide. Incorporate blue section headers and other style guide updates to the design of this table so that it looks more cohesive with the rest of the website. Changes to improve readability of the page such as spacing, alignment, or change in font properties can be explored. However, the content and structure should remain the same. All changes must adhere to the design system.

Action Items

• Wait for Design System: Consistency between table headers #2013 to be completed.
• Design a UI mockup that solves this issue in accordance with the style guide updates from Design System: Consistency between table headers #2013 .
• Review with the design team. Update designs if needed based on feedback.
• Review with the product, development, and research teams. Update designs if needed based on feedback.
• Add a slide to the the staging deck.
• After the slide has been approved by production, move it to the stakeholder presentation deck for the next stakeholder meeting.
• Review the design at the stakeholder meeting. Update designs if needed based on feedback.
• Update the Figma Design System with updates from this issue.
• Update the Style Guide Presentation with updates from this issue.
• After getting stakeholder approval, create a design handoff issue for the development team.

Resources/Instructions

• Link to Submit Snapshot on TDM Calculator Dev site
• Create a Submit Snapshot Form and Main Menu Item to select it. #1655
• Create separate form for submission #1407
• Link to the Design System on Figma

[namigoeku]

So this update is for the Submit Snapshot page. I created 2 options: A features minimal changes, while B has more advanced organization involved and is intended for a future revision.

Current design

• Features 3 separate tables.
• The first table serves as a submittal form, where the snapshots can be submitted once at a time. Indicated by the radio button.

Option A: Minimal Changes

• The 3 separate tables feature the updated table header.
• Submit button was moved to under the snapshot submittal form, and the wording was changed to "Submit Snapshot"

Option B: Some More Change

• Features Primary and Secondary header styles.

Option C: Future Revision

• Simplifies the page by combining all pending Snapshots, indicating which snapshots meet the target points.
• Empowers users to submit multiple snapshots at once (checkbox).

[ExperimentsInHonesty]

This is the comment on a prior issue where we changed from check boxes to radio buttons.
They can only submit one project at a time. #1407 (comment)

[Parisajf]

Menu title
- change to Submissions

The only chart on the page will be submitted projects

• have a navy blue header
• have basic sorting
• have a note telling them to go to "my projects" page for advanced filtering

Text on page where Submission section is now

• direct them to "my projects" or page 5 of project for submission

Also In “my projects” Page, the users will see 1 column with data for their own projects.

• Percentage of Pts Met (example 1: 90% example 2: 100%)

[greenishviolet]

2/18 Progress

Progress

• I created the first iteration of the Submission Page

• I made iterations of the subheader:

  • More direct: Submit your snapshots through My Projects or Page 5 of your project.
  • More urgent: You must submit your snapshots in My Projects or on Page 5 of your project.
  • More concise: Submit snapshots via My Projects or on Page 5 of your project.
  • More explicit/softer tone: You can submit your snapshot in My Projects or on Page 5 of your project.

• Currently, table headers have filter icons, where users can sort items in the table. I haven't had the time to find a more appropriate icon or go through past issues to see if we have already decided on icons. I will look into that for next week.

  • However, this makes me wonder if the Submissions table will have the same filtering and sorting functionality as the My Projects table (and if that is feasible given the timeline we have).

• I also played around with reordering menu items in the navigation so links are shown in the following order: Create Project → My Projects → Submissions

  • I felt that putting Submissions after My Projects will make navigation more intuitive, as users can easily access My Projects if they want to submit a snapshot.
  • However, this could be confusing to users since Submissions and My Projects sound like 2 similar things.

Blockers

• I would like more context about sorting in my submissions. Will sorting for the Submissions table work like sorting in the My Projects table (aka. overlay to show users sorting options vs toggle with the sort icons)?

Filtering overlay in My Projects

Availability

I have around 6 hours to work on this issue next week

ETA

Probably in 2 or 3 weeks?

[thetanmancan]

@greenishviolet Thank you for this update. I will move this issue to the Questions/Clarifications column so that we can get an answer to your question about whether or not sorting will be accessed via filter overlays in the same way that they are on the My Projects page.

[thetanmancan]

@greenishviolet, per this comment, I'm having @namigoeku reconcile the addition of the new column being added on the My Projects page via this comment. If you have any questions about it, please contact her or me. Thank you.

[thetanmancan]

I'm going to leave this issue in the Questions/Clarifications column so that we can get an answer from the production and development teams in regards to the prior question:

• If the Submissions page will only have sorting functionality, will it work the same way as on the My Projects page, where the user clicks the filter icon and opens an overlay and selects a radio button and clicks Apply? Or will there just be a sort icon that the user clicks?