bcgov / nr-spar

SPAR app from FDS (Forestry Digital Services)
https://www2.gov.bc.ca/gov/content/industry/forestry/managing-our-forest-resources/tree-seed/seed-planning-use/spar
Apache License 2.0
2 stars 0 forks source link

Interface adjustments for A-class registration and Seedlot details pages #827

Closed mmarsoleta closed 7 months ago

mmarsoleta commented 8 months ago

Some interface changes were requested by PO and/or key users. Changes done in the design file should match the changes in code as well.

  1. Changes inside "Parent tree and SMP" step for A-class seedlot registration
  2. Changes inside seedlot details page
  3. Global changes for A-class seedlot registration

note: additional changes on the comment section (adjustments requested during review)

Changes inside "Parent tree and SMP" step for A-class seedlot registration

1.1 - Tab style Was: inline Change to: container style Reference:new tab style on figma Requested by: user feedback Goal: give tabs more visibility

Image

1.2 - New page structure Was: content over background Change to: table, summary and genetic worth over a container component. background color changed to layer-01 and a border was added to card/table. Reference: new page layout Requested by: user feedback Goal: give tabs more visibility - background and structure change due to container tab style

Image

1.3 - Summary section Was: over background Change to: a separate card section Reference: new summary Requested by: Goal:

Image

1.4 - Genetic worth and effective population size Was: over background, genetic worth and effective population size were separated, calculate genetic worth and effective population size was bellow both sections Change to: genetic worth and effective population size are under the same card section now, the button to calculate the genetic worth and effective population size is incorporated to the card. Reference: new genetic worth and effective population section Requested by: Goal: improve usability and make the action to calculate results more intuitive

Image

1.5 - Calculate genetic worth and effective population size Was: genetic worth and percent of tested parent tree contribution, and effective population size and diversity fields were always visible Change to: Typography style and hierarchy are different. Label and title changed to "tested parent tree contribution". Results will only show if button is triggered, then button's label will change to "Recalculate". Reference: new calculated results section Requested by: Goal: improve usability and make the action to calculate results more intuitive

Image

1.6 - New alert for missing parental contribution Was: -- Change to: New alert condition for when there is not enough parental contribution to calculate specific genetic trait (it should have at least 70% for system to be able to show the genetic worth results for each trait. Show banner with warning message. Change input color to red if value is below 70% and show warning icon besides it. Reference: new parental contribution alert Requested by: Business rule update Goal: let users know why there is no genetic worth results for a specific genetic trait

Image

1.7 - Table style Was: using table style according to DS Change to: new table style should be applied. Zebra style is using layer-01 color. Action buttons inside table's header are aligned to the left. Using ghost buttons with label, not only icon. "Clear data table" is outside the "more actions" and visible on screen. Table's background changed to layer-02 (white).
Reference:new table style Requested by: Design leaders Goal: standardize table across applications
PS: maybe this is a DS task - table's styles will be updated across applications and new pattern was defined by designer lead.(e.g. all tables will have zebra style, all tables should have buttons aligned to left, all tables should have label + icon if there is enough space, etc.)

Image

1.8 - Instruction at the top Was: -- Change to: add accordion component to display instruction on how to fill up/edit/upload file to table. Instructions should guide users on how to proceed with table fill. Also remove the info banner. Reference: new instructions section Requested by: suggested by design leaders and PO Goal: give more clarity to users

Image

Changes inside seedlot details page

2.1 - Remove review form section Was: There was a review form section Change to: Remove review form section from seedlot details page for every user besides TSC ADM Reference: seedlot details Requested: MVP 1 Goal: make the screen easier to build and less repetitive.

Image

2.2 - Can't edit when submitted or approved status Was: There was a "edit seedlot" and "edit applicant" button for every seedlot status Change to: Users should not be able to edit the form or the applicant information when the seedlot is submitted or approved. Remove the "edit applicant" button from "Check your applicant and seedlot information" section. Change the "edit seedlot form" button's label to "View seedlot form", inside the "see where you are in the registration process" and at the combo-button action. Reference: seedlot details - submitted and approved status Requested: business rule Goal: make the interface follow the determined business rule.

Image

Global changes for A-class seedlot registration

3.1 - Title change Was: Seedlot registration Change to: Registration for seedlot ##### [number] Reference: [new title] Requested: user feedback Goal: increase seedlot number's legibility by putting the number on the title

Image

3.2 - subtitle change Was: Seedlot ##### [number] Change to: display only "smartsave" toggletip (all changes saved) Reference: [new subtitle] Requested: user feedback Goal: increase seedlot number's legibility by putting the number on the title

Image

mmarsoleta commented 7 months ago

@SLDonnelly @craigyu @kevinginley - Here we have all changes done to the registration form and seedlot details page as requested. It's ready for review :)

SLDonnelly commented 7 months ago

Hello @mmarsoleta! This looks good :) I just have a few small edits:

  1. Get ride of "estimative the" and change to "Enter the cone and pollen count (required)"

Image

  1. I wonder if it is worth removing a couple of the subheadings? For example, with the button this one might be redundant and removing it would clear up the form:

Image

@kevinginley and @mmarsoleta let me know if you disagree, otherwise nothing else from me :)

mmarsoleta commented 7 months ago
  1. Enter the cone and pollen count (required)

those changes are done as requested.