Seeding Rate Calculator Design Review

0. “Component” Improvements
User Need	Recommendation	Current Example	Proposed Change
As a user, I want consistent styling for buttons types and text boxes so at a glance I can easily see and know what I can interact with and how.	Create a “style guide” / component set for all the standard elements that appear in the app (e.g. buttons, text boxes, drop downs, etc.) Add an iconography library and consider adding icons to key buttons so the user knows at a glance what the button is for without reading (priority for common / reoccurring button features, e.g. “next” or “submit”)
As a user, I want there to be clear styling on tooltips so I know where to look for help and it’s easy to digest the information.	Create styling for tooltips and potentially other page elements / sections so they’re clear and easy for the user to find.
As a developer, I’d like a simple “ruleset” that informs consistently how various pages change for a responsive / mobile layout.	Create a series of design rules / recommendations and ensure the designs across all the pages can work within those rules to create clear mobile layouts.

1. Site Conditions
User Need	Recommendation	Current Example	Proposed Change
As a user, it’s hard to see why I can’t move to the species selection step because it looks like the info is already filled in	Consistently pre-populate options or leave them blank (ie. pre-select a zone, drainage, and acreage) Create a UI style for "tips / how-to" that will catch the eye and be persistent so the user learns when they see that style it's text to help them make use of the app's functionality on that page. OR Add a red outline around invalid entries.
As a user, I feel confused that I can’t change my tile drainage.	Hide tile drainage until users have selected a choice it’s relevant for Visually connect tile drainage with soil drainage (design needed
As a user, it's hard for me to see how I progress the pages to make progress.	Implement a standard "next step / move forward" button instead of text and position it on the page in a way that will meet the user's flow (e.g. towards the bottom). Also review the Back button positioning to ensure it's aligned with the UI/UX approach for "next".
BUG: When you backspace in the “Acres” text box the word “None” keeps populating. To reproduce, put your cursor in front of the text and hit backspace. (Chrome on Mac)			N/A

2. Species Selection
User Need	Recommendation	Current Example	Proposed Change
As a user, it’s hard to make sense of the mix diversity bar is before I’ve selected something.	Hide the Mix Diversity Until an option is selected If possible: Add extra instructions in place of the bar
As a user I want to prioritize species in my recommended seeding window.	Sort the species that work with the entered window to the front of the list. (This rule can be generally applied too. It’s best practice to sort irrelevant options to the end of the list)
As a user I want more instructions on how to pick a species for the mix and how many I can pick	Change text “Pick Species for the mix.” to “Click 2 or more species for your mix.” Hide the tooltip on the next button until the user tries to click/ hover over the next button
As a user, I want it to be really obvious which species I’ve already selected so it's easy to scan the list.	Add a thick colorful outline around selected species Make the checkmark bigger and keep it inside the bounds of the image Change the text below the species to be bigger and to have a color change
As a user, I want a way to clear my current selections quickly so that I can avoid scanning the list.	Add an X to the selections in the top left
As a user I want it to have high contrast text so I can easily read it.	Change the “Seeding date is outside…” banner to a two part banner. At the top say “Not Recommended”. At the bottom say “Seeding Window: XX/XX - XX/XX Change the background of the banner to be #EFF1DF at 100% opacity Change the font to be #4F6030

3. Species Selection
User Need	Recommendation	Current Example	Proposed Change
As a user I want to know what text cannot be edited.	Uneditable / Static text should not have a box around it.
As a user, I want to know what text will change based on my actions	Text that will change (but cannot be typed in) will be in a square box with a colored in background, and a pale outline
As a user, I want to differentiate buttons from text displays so I know what I can click.	Containers that display text should have sharp corners. Buttons should be capsule shaped or should have visibly rounded corners.
As a user, it’s unclear what’s new that I can change after I click “Change My Rate”	More info needed - How is the user meant to interact with the area that expands? If they’re not meant to interact, the fix might be to rename the button from “Change my rate” to “View Calculations” or “More Info”		TBD

4. Seeding Method

User Need

Recommendation

Current Example

Proposed Change

As a user, it feels like the numbers in the circles are their own indepedent thing, and that they aren’t related to the titles on the right.

Use a card or row based approach for each method, rather than a table approach
Write out the amounts on a line so that they look less like buttons
Reduce the amount of space between each method
Add a drop shadow behind cards that are recommended methods so they pop

5. Mix Seeding Rate
User Need	Recommendation	Current Example	Proposed Change
As a user, I want more context on how the factors relate to my situation	Combine the two boxes into a single, larger instructional box Add context to the box explaining more about how the information is relevant to the user. Move the slider to the right more so that there’s room for additional information
As a user, I want it to be clear what I can and can’t interact with on screen.	Swap the High/calculated/low boxes with boxes that are colored in and have sharp edges Swap the factors boxes with boxes that are colored in and have sharp edges

6. Seed tag info
User Need	Recommendation	Current Example	Proposed Change
As a user, I want to scroll less often so I can compare my species better	Left align the species titles Reduce the width of the text boxes and titles Move the text entry box to the left so its closer to the species titles Reduce the height of the species titles and text entry boxes, but maintain the font size (there should be less padding between the box and the text)
As a user, I want it to be clear what I can and can’t interact with on screen.	Make the corners on the text entry boxes less round Make the background of the text entry box white

NOTE: These last two steps feel like they’d benefit from some deeper design collaboration so we’re leaving these two off for now!

7. Review Mix
User Need	Recommendation	Current Example	Proposed Change
---	---

8. Confirm Plan
User Need	Recommendation	Current Example	Proposed Change
---	---

Decision Support Tools

Seeding Rate Calculator Design Review

0. “Component” Improvements

1. Site Conditions

2. Species Selection

3. Species Selection

4. Seeding Method

5. Mix Seeding Rate

6. Seed tag info

7. Review Mix

8. Confirm Plan