VegSpec Design Review

1. “Location” Improvements

User Need

Recommendation

Current Example

Proposed Change

As a user, I want information broken into small digestible chunks, and for the most actionable information to come first so I can easily focus.

  • Add a title for each action the user should take

  • After each title, describe the action or steps to take

  • Nest instructions within their relevant section (ie. Identification instructions should go in the identification section).

 

image-20240613-192103.png

 

Smaller Redesign:

 

image-20240613-192132.png

 

Bigger Redesign:

 

 

As a user, I want the map to be the main focus of the screen so I know exactly what I need to do.

  • Move text entry boxes where you refine and add more information below the map. In the future, we might want to split this into 2 steps like other tools have (Choose a location on the map, then enter details)

  • Add map controls information into a “help” button on the map so I click in to explore only if I’m confused.

As a user, I want to be able to swap between different map views so I can get map data from different resources

  • Add a dropdown to the map for MLRA, Lakes, etc. This way all maps are viewed enlarged, and can be interactive (this is a nice to have, I recognize it might be a larger lift.)

As a user, I want optional or less important selections to be deprioritized so it doesn’t distract me.

  • Put extra information into tooltips or help buttons

  • Call out any “optional” sections in their title

  • Allow optional sections to collapse to keep focus on key actions.

As a user, I want it to be clear whether or not I can type in a field so it’s easy to interact with text boxes.

  • Add a green outline to editable text boxes

  • Add a title and description above text entry boxes

  • Set up text boxes as a form where each subsection is called out and delineated (ie. Contact, Site Information)

2. “Growth Requirement” Improvements

User Need

Recommendation

Current Example

Proposed Change

As a user, I want information broken into small digestible chunks, and for the most actionable information to come first so I can easily focus.

  • Add a title for each action the user should take

  • After each title, describe the action or steps to take

  • Nest instructions within their relevant section

 

 

 

 

 

 

 

 

As a user, I want interactive elements to draw my attention with color and styling. /

As a user, I want consistency between different tools.

  • Style the soil table to match the cover crop selector approach with a colorful header, and horizontal row dividers.

As a user, I want as few visual options as necessary so I feel less decision fatigue.

  • Change yes/no options to be a single checkbox each rather than two options to choose from. Rephrase the question as statements.

As a user, I want optional or less important selections to be deprioritized so it doesn’t distract me.

  • Put extra information into tooltips or help buttons

  • Call out any “optional” sections in their title

  • Allow optional sections to collapse to keep focus on key actions.

As a user, I want it to be clear whether or not I can type in a field so it’s easy to interact with text boxes.

  • Add a green outline to editable text boxes

  • Add a title and description above text entry boxes

  • Set up text boxes as a form where each subsection is called out and delineated (ie. Contact, Site Information)

3. “Goals” Improvements

User Need

Recommendation

Current Example

Proposed Change

As a user, I want information broken into small digestible chunks, and for the most actionable information to come first so I can easily focus.

  • Add a title for each action the user should take

  • After each title, describe the action or steps to take

  • Make the key piece of information (how many plants are selected) large. Hide this info until a plant is selected.

  • Nest instructions within their relevant section (ie. “select the appropriate practice…” goes into the practice section).

 

 

 

 

 

 

 

 

 

As a user, I want interactive elements to draw my attention with color and styling. /

As a user, I want consistency between different tools.

  • Style the plant practice table to match the cover crop selector approach with a colorful header, and vertical dividers

As a user, I want optional or less important selections to be deprioritized so it doesn’t distract me.

  • Put extra information into tooltips or help buttons (ie. Plant descriptions)

  • Call out any “optional” sections in their title

  • Allow optional sections to collapse to keep focus on key actions.

4. “Species” Improvements

User Need

Recommendation

Current Example

Proposed Change

As a user, I want consistency between different tools.

As a user, I want all my options for changing the list to be in one place so they’re easy to control.

  • Replace the group by and filters menu approach with the approach with the sidebar approach proposed for the cover crop selector tool (white sidebar with collapsable sections)

  • Replace the current species selection state with the selection state used in the cover crop selector tool (use a blue checkmark and outline around the card)

 

 

Option 1

Option 2

 

As a user, I want the details for each crop to be easy to digest and to be something I can drill down into.

As a user, I want to see as many species on screen at a time as possible so that I feel all my options are available.

OPTIONS:

  1. Replace the dropdowns with a “Details” button that opens a popup with more info.

  2. Alternately, hide the dropdown sections under a “See details” button. When clicked, all collapsable menus can be viewed.

Make the listed details more readable by left aligning labels, and right aligning entries for the label. Use different font styles so they don’t blend in together.

ie.

“Answer: Yes
Option: No

rather than

“ Answer: Yes
Option: No”

5. “Seed Mix” Improvements

User Need

Recommendation

Current Example

Proposed Change

As a user, I want information broken into small digestible chunks, and for the most actionable information to come first so I can easily focus.

  • Add a title for each action the user should take

  • After each title, describe the action or steps to take

  • Nest instructions within their relevant section

 

 

 

 

 

As a user, I want interactive elements to draw my attention with color and styling. /

As a user, I want consistency between different tools.

  • Style the mix slider with more color so it draws attention.

  • In the future, we may want to resolve the style difference between this and the seeding rate calculator.

As a user, I want optional or less important selections to be deprioritized so it doesn’t distract me.

  • Put the text field for seeding rate at the top so its clearly connected to the slider

  • Move the info boxes for different rates below the numbers, since they’re secondary pieces of information.

  • Move the blurb about the standard rate to the bottom as a footnote, or have it as a tooltip.

  • Put the footnotes for the table into tooltips or popups.

As a user, I want it to be clear whether or not I can type in a field so it’s easy to interact with text boxes.

  • Add a green outline to editable text boxes

  • Add a title and description above text entry boxes

7. “Output” Improvements

User Need

Recommendation

Current Example

Proposed Change

As a user, I want information broken into small digestible chunks, and for the most actionable information to come first so I can easily focus.

  • Add a title for each action the user should take

  • After each title, describe the action or steps to take

  • Nest instructions within their relevant section (ie. Identification instructions should go in the identification section).

 

 

 

 

 

 

 

 

As a user, I want optional or less important selections to be deprioritized so it doesn’t distract me.

  • Put extra information into tooltips or help buttons

As a user, I want it to be clear whether or not I can type in a field so it’s easy to interact with text boxes.

  • Add a green outline to editable text boxes

  • Add a title and description above text entry boxes

  • Set up text boxes as a form where each subsection is called out and delineated (ie. Contact, Site Information)